haiwei-ui 1.0.0

package/src/views/components/form/select/_index/data/events.js

@@ -0,0 +1,32 @@
+export default [
+  {
+    name: 'change',
+    desc: '选中值发生变化时触发',
+    params: '目前的选中值'
+  },
+  {
+    name: 'visible-change',
+    desc: '下拉框出现/隐藏时触发',
+    params: '出现则为 true，隐藏则为 false'
+  },
+  {
+    name: 'remove-tag',
+    desc: '多选模式下移除tag时触发',
+    params: '移除的tag值'
+  },
+  {
+    name: 'clear',
+    desc: '可清空的单选模式下用户点击清空按钮时触发',
+    params: ''
+  },
+  {
+    name: 'blur',
+    desc: '当 input 失去焦点时触发',
+    params: 'event'
+  },
+  {
+    name: 'focus',
+    desc: '当 input 获得焦点时触发',
+    params: 'event'
+  }
+]

package/src/views/components/form/select/_index/data/methods.js

@@ -0,0 +1,6 @@
+export default [
+  {
+    name: 'refresh',
+    desc: '刷新数据'
+  }
+]

package/src/views/components/form/select/_index/index.vue

@@ -0,0 +1,27 @@
+<template>
+  <nm-tmpl v-bind="tmpl"></nm-tmpl>
+</template>
+<script>
+import page from './page.js'
+import attrs from './data/attrs.js'
+import events from './data/events.js'
+import methods from './data/methods.js'
+export default {
+  name: page.name,
+  data() {
+    return {
+      val: '',
+      tmpl: {
+        title: '下拉列表(nm-select)',
+        icon: 'list',
+        attrs,
+        events,
+        methods
+      }
+    }
+  },
+  created() {
+    this.setTabName(this.tmpl.title)
+  }
+}
+</script>

package/src/views/components/form/select/_index/page.js

@@ -0,0 +1,16 @@
+/** 页面信息 */
+const page = new (function() {
+  this.title = '下拉框'
+  this.name = 'components-select-index'
+  this.path = '/components/select/index'
+  this.icon = 'card'
+  this.group = 1
+  this.sort = 6
+})()
+
+export const route = {
+  page,
+  component: () => import('./index')
+}
+
+export default page

package/src/views/components/form/select/demo1/demo.vue

@@ -0,0 +1,61 @@
+<template>
+  <nm-box-row style="height:400px">
+    <nm-box-col :span="12">
+      <nm-form-page v-bind="form">
+        <el-form-item label="城市：" prop="area">
+          <nm-select v-model="form.model.area" v-bind="select" />
+        </el-form-item>
+        <el-form-item label="城市：" prop="area1">
+          <nm-select v-model="form.model.area1" disabled v-bind="select" />
+        </el-form-item>
+      </nm-form-page>
+    </nm-box-col>
+    <nm-box-col :span="12"></nm-box-col>
+  </nm-box-row>
+</template>
+<script>
+export default {
+  data() {
+    return {
+      form: {
+        title: '简单下拉列表',
+        icon: 'list',
+        model: {
+          area: '',
+          area1: ''
+        },
+        action: this.submit
+      },
+      select: {
+        method: this.queryOptions
+      }
+    }
+  },
+  methods: {
+    queryOptions() {
+      return new Promise(resolve => {
+        resolve([
+          {
+            label: '南京',
+            value: 1
+          },
+          {
+            label: '北京',
+            value: 2
+          },
+          {
+            label: '上海',
+            value: 3,
+            disabled: true
+          }
+        ])
+      })
+    },
+    submit() {
+      return new Promise(resolve => {
+        resolve()
+      })
+    }
+  }
+}
+</script>

package/src/views/components/form/select/demo1/index.vue

@@ -0,0 +1,21 @@
+<template>
+  <nm-container>
+    <demo />
+    <nm-code-preview :code="code" />
+  </nm-container>
+</template>
+<script>
+import page from './page.js'
+import Demo from './demo'
+import code from '!!raw-loader!./demo'
+export default {
+  name: page.name,
+  components: { Demo },
+  data() {
+    return {
+      timer: null,
+      code
+    }
+  }
+}
+</script>

package/src/views/components/form/select/demo1/page.js

@@ -0,0 +1,14 @@
+/** 页面信息 */
+const page = new (function() {
+  this.title = '示例代码'
+  this.name = 'components-select-demo1'
+  this.path = '/components/select/demo1'
+  this.icon = 'develop'
+})()
+
+export const route = {
+  page,
+  component: () => import('./index')
+}
+
+export default page

package/src/views/components/form/select/demo2/index.vue

@@ -0,0 +1,42 @@
+<template>
+  <nm-container>
+    <nm-box page header title="混入下拉框">
+      <el-alert type="warning">
+        <p>您也可以使用混入的方式来创建下拉组件，用法非常简单</p>
+      </el-alert>
+      <p>首先创建文件select.js</p>
+      <br />
+      <p>然后写入以下代码</p>
+      <br />
+      <pre
+        v-highlightjs="
+          `
+        <script>
+        import { mixins } from 'netmodular-ui'
+        export default {
+          mixins: [mixins.select],
+          data() {
+            return {
+              action: $api.admin.role.select
+            }
+          }
+        }
+        </script>`
+        "
+      ><code class="html">
+        </code>
+      </pre>
+      <br />
+      <p>最后再使用的地方注册组件即可~</p>
+    </nm-box>
+  </nm-container>
+</template>
+<script>
+import page from './page.js'
+export default {
+  name: page.name,
+  data() {
+    return {}
+  }
+}
+</script>

package/src/views/components/form/select/demo2/page.js

@@ -0,0 +1,14 @@
+/** 页面信息 */
+const page = new (function() {
+  this.title = '混入示例'
+  this.name = 'components-select-demo2'
+  this.path = '/components/select/demo2'
+  this.icon = 'develop'
+})()
+
+export const route = {
+  page,
+  component: () => import('./index')
+}
+
+export default page

package/src/views/components/map/map-coord-picking/_index/data/attrs.js

@@ -0,0 +1,100 @@
+export default [
+  {
+    name: 'value/v-model',
+    desc: '坐标值，如：{lng:116.11,lat:39.22}',
+    type: 'Object',
+    opt: '-',
+    def: '-'
+  },
+  {
+    name: 'title',
+    desc: '标题，默认：坐标拾取',
+    type: 'string',
+    opt: '-',
+    def: '-'
+  },
+  {
+    name: 'icon',
+    desc: '头部左侧的图标，默认：coordinate',
+    type: 'string',
+    opt: '-',
+    def: '-'
+  },
+  {
+    name: 'fullscreen',
+    desc: '是否显示全屏按钮',
+    type: 'boolean',
+    opt: '-',
+    def: 'true'
+  },
+  {
+    name: 'width',
+    desc: '高度，与css中的width属性相同，如：100%、100px，默认 70%',
+    type: 'string',
+    opt: '-',
+    def: ''
+  },
+  {
+    name: 'height',
+    desc: '高度，与css中的height属性相同，如：100%、100px，默认 80%',
+    type: 'string',
+    opt: '-',
+    def: ''
+  },
+  {
+    name: 'placeholder',
+    desc: '默认值：请输入或选择坐标，如：116.404,39.915',
+    type: 'string',
+    opt: '-',
+    def: '-'
+  },
+  {
+    name: 'disabled',
+    desc: '禁用',
+    type: 'boolean',
+    opt: '-',
+    def: 'false'
+  },
+  {
+    name: 'allow-input',
+    desc: '允许手动输入',
+    type: 'boolean',
+    opt: '-',
+    def: 'false'
+  },
+  {
+    name: 'delay',
+    desc: '查询延时，默认700ms',
+    type: 'Number',
+    opt: '-',
+    def: '700'
+  },
+  {
+    name: 'precision',
+    desc: '保留小数位精度',
+    type: 'Number',
+    opt: '-',
+    def: '3'
+  },
+  {
+    name: 'search-page-capacity',
+    desc: '查询时每页数量，默认15',
+    type: 'Number',
+    opt: '-',
+    def: '15'
+  },
+  {
+    name: 'scroll-wheel-zoom',
+    desc: '启用滚轮放大缩小',
+    type: 'boolean',
+    opt: '-',
+    def: 'true'
+  },
+  {
+    name: 'zoom',
+    desc: '缩放级别',
+    type: 'Number',
+    opt: '-',
+    def: '15'
+  }
+]

package/src/views/components/map/map-coord-picking/_index/data/events.js

@@ -0,0 +1 @@
+export default []

package/src/views/components/map/map-coord-picking/_index/data/methods.js

@@ -0,0 +1 @@
+export default []

package/src/views/components/map/map-coord-picking/_index/data/slots.js

@@ -0,0 +1 @@
+export default []

package/src/views/components/map/map-coord-picking/_index/index.vue

@@ -0,0 +1,29 @@
+<template>
+  <nm-tmpl v-bind="tmpl"> </nm-tmpl>
+</template>
+<script>
+import page from './page.js'
+import attrs from './data/attrs.js'
+import slots from './data/slots.js'
+import methods from './data/methods.js'
+import events from './data/events.js'
+export default {
+  name: page.name,
+  data() {
+    return {
+      val: '',
+      tmpl: {
+        title: '坐标拾取(nm-map-coord-picking)',
+        icon: 'card',
+        attrs,
+        slots,
+        methods,
+        events
+      }
+    }
+  },
+  created() {
+    this.setTabName(this.tmpl.title)
+  }
+}
+</script>

package/src/views/components/map/map-coord-picking/_index/page.js

@@ -0,0 +1,16 @@
+/** 页面信息 */
+const page = new (function() {
+  this.title = '坐标拾取'
+  this.name = 'components-map-picking-coord-index'
+  this.path = '/components/map-picking-coord/index'
+  this.icon = 'chart-map'
+  this.group = 3
+  this.sort = 1
+})()
+
+export const route = {
+  page,
+  component: () => import('./index')
+}
+
+export default page

package/src/views/components/map/map-coord-picking/demo1/demo.vue

@@ -0,0 +1,51 @@
+<template>
+  <nm-form-page v-bind="form">
+    <el-row>
+      <el-col :span="10" :offset="1">
+        <el-form-item label="坐标：" prop="point">
+          <NmMapCoordPicking v-model="form.model.point" />
+        </el-form-item>
+        <el-form-item label="允许手动输入坐标：" prop="point">
+          <NmMapCoordPicking v-model="form.model.point1" allow-input />
+        </el-form-item>
+        <el-form-item label="禁用：" prop="point">
+          <NmMapCoordPicking v-model="form.model.point1" disabled />
+        </el-form-item>
+        <el-form-item label="设置精度：" prop="point">
+          <NmMapCoordPicking v-model="form.model.point2" :precision="8" />
+        </el-form-item>
+      </el-col>
+    </el-row>
+  </nm-form-page>
+</template>
+<script>
+export default {
+  data() {
+    return {
+      form: {
+        header: true,
+        title: '坐标拾取示例',
+        icon: 'add',
+        labelWidth: '300px',
+        model: {
+          point: {
+            lng: 116.404,
+            lat: 39.915
+          },
+          point1: null,
+          point2: {
+            lng: 116.404,
+            lat: 39.915
+          }
+        },
+        rules: {},
+        action() {
+          return new Promise(resolve => {
+            resolve()
+          })
+        }
+      }
+    }
+  }
+}
+</script>

package/src/views/components/map/map-coord-picking/demo1/index.vue

@@ -0,0 +1,21 @@
+<template>
+  <nm-container>
+    <demo />
+    <nm-code-preview :code="code" />
+  </nm-container>
+</template>
+<script>
+import page from './page.js'
+import Demo from './demo'
+import code from '!!raw-loader!./demo'
+export default {
+  name: page.name,
+  components: { Demo },
+  data() {
+    return {
+      timer: null,
+      code
+    }
+  }
+}
+</script>

package/src/views/components/map/map-coord-picking/demo1/page.js

@@ -0,0 +1,14 @@
+/** 页面信息 */
+const page = new (function() {
+  this.title = '坐标拾取示例'
+  this.name = 'components-map-coord-picking-demo1'
+  this.path = '/components/map-coord-picking/demo1'
+  this.icon = 'develop'
+})()
+
+export const route = {
+  page,
+  component: () => import('./index')
+}
+
+export default page

package/src/views/components/menus.js

@@ -0,0 +1,84 @@
+import { loadMenu } from '@/utils/menus-loader'
+
+// 基础组件菜单
+const propertyPath = '_index/page.js'
+let componentMenus = [
+  {
+    name: '基础组件',
+    type: 0,
+    icon: 'database',
+    level: 1,
+    show: true,
+    children: []
+  },
+  {
+    name: '表单组件',
+    type: 0,
+    icon: 'form',
+    level: 1,
+    show: true,
+    children: []
+  },
+  {
+    name: '高级组件',
+    type: 0,
+    icon: 'product',
+    level: 1,
+    show: true,
+    children: []
+  },
+  {
+    name: '地图组件',
+    type: 0,
+    icon: 'chart-map',
+    level: 1,
+    show: true,
+    children: []
+  }
+]
+const requireComponent = require.context('./', true, /\page.js$/)
+
+requireComponent
+  .keys()
+  .filter(m => m.endsWith(propertyPath))
+  .sort((a, b) => {
+    let pageA = requireComponent(a).default
+    let pageB = requireComponent(b).default
+    return pageA.sort > pageB.sort ? 1 : -1
+  })
+  .map(fileName => {
+    // 先加载组件属性页面
+    let page = requireComponent(fileName).default
+    let indexMenu = loadMenu({
+      type: 0,
+      name: page.title,
+      icon: page.icon,
+      level: 2,
+      show: true,
+      children: []
+    })
+    let parentPath = fileName.replace(propertyPath, '')
+    requireComponent
+      .keys()
+      .filter(f => f.indexOf(parentPath) > -1)
+      .map(subFile => {
+        let page = requireComponent(subFile).default
+        let menu = loadMenu({
+          name: page.title,
+          routeName: page.name,
+          icon: page.icon,
+          level: 3
+        })
+        if (subFile.endsWith(propertyPath)) {
+          menu.name = '基础属性'
+          menu.icon = 'property'
+        }
+
+        indexMenu.children.push(menu)
+      })
+
+    let group = page.group || 0
+    componentMenus[group].children.push(indexMenu)
+  })
+
+export default componentMenus

package/src/views/login/index.js

@@ -0,0 +1,23 @@
+import { mapActions } from 'vuex'
+export default {
+  methods: {
+    ...mapActions('app/system', ['login']),
+    ...mapActions('app/token', { initToken: s => s.init })
+  },
+  created() {
+    this.login({ userName: 'admin', password: 'admin' }).then(data => {
+      // 初始化令牌
+      this.$store.commit('app/token/init', data)
+
+      // 跳转
+      let redirect = this.$route.query.redirect
+      if (!redirect || redirect === '') {
+        redirect = '/'
+      }
+
+      this.$router.push({
+        path: redirect
+      })
+    })
+  }
+}

package/src/views/run/index.vue

@@ -0,0 +1,57 @@
+<template>
+  <nm-box page header title="代码预览" icon="develop" no-scrollbar>
+    <template v-slot:toolbar-before>
+      <span style="position: relative; top: -13px;left:-15px">比例</span>
+      <div style="display:inline-block;width:200px">
+        <el-slider v-model="slider"></el-slider>
+      </div>
+    </template>
+    <div class="nm-run-wrapper">
+      <vuep ref="vuep" v-if="show" :template="template"></vuep>
+    </div>
+  </nm-box>
+</template>
+<script>
+export default {
+  data() {
+    return {
+      template: '',
+      show: false,
+      slider: 50
+    }
+  },
+  methods: {
+    receiveMessage(event) {
+      if (typeof event.data === 'string') {
+        this.template = event.data.replace('export default {', 'module.exports = {')
+        this.show = true
+        event.source.postMessage('1', event.origin)
+        window.removeEventListener('message', this.receiveMessage, false)
+      }
+    }
+  },
+  created() {
+    window.addEventListener('message', this.receiveMessage, false)
+  },
+  watch: {
+    slider(val) {
+      this.$refs.vuep.$el.querySelector('.vuep-editor').style.width = val + '%'
+      this.$refs.vuep.$el.querySelector('.vuep-preview').style.width = 100 - val + '%'
+    }
+  }
+}
+</script>
+<style lang="scss">
+.nm-run-wrapper {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+}
+.vuep {
+  height: 100%;
+}
+.vuep-preview {
+  padding: 5px;
+  background: #e1e6ef;
+}
+</style>

package/src/views/run/page.js

@@ -0,0 +1,15 @@
+/** 页面信息 */
+const page = new (function() {
+  this.title = '代码预览'
+  this.name = 'RunCode'
+  this.path = '/run'
+  this.frameIn = false
+  this.cache = false
+})()
+
+export const route = {
+  page,
+  component: () => import('./index')
+}
+
+export default page