@jetlinks-web/components 1.0.0

package/index.ts

@@ -0,0 +1,25 @@
+import type { App } from 'vue'
+
+import FullPage from './src/FullPage/index.vue'
+import PermissionButton from './src/PermissionButton/index'
+import BadgeStatus from './src/BadgeStatus'
+import GeoComponent from './src/GeoComponent'
+import ValueItem from './src/ValueItem'
+import Echarts from './src/Echarts'
+
+import { PageContainer, AIcon } from 'jetlinks-ui-components'
+import { InitAMap } from './src/AMap'
+
+export default {
+  install(app: App) {
+    app.component('PageContainer', PageContainer)
+      .component('AIcon', AIcon)
+      .component('PermissionButton', PermissionButton)
+      .component('FullPage', FullPage)
+      .component('BadgeStatus', BadgeStatus)
+      .component('InitAmap', InitAMap)
+      .component('GeoComponent', GeoComponent)
+      .component('ValueItem', ValueItem)
+      .component('Echarts', Echarts)
+  }
+}

package/package.json

@@ -0,0 +1,35 @@
+{
+  "name": "@jetlinks-web/components",
+  "version": "1.0.0",
+  "description": "",
+  "main": "index.ts",
+  "module": "index.ts",
+  "keywords": [],
+  "files": [
+    "src",
+    "index.ts"
+  ],
+  "private": false,
+  "author": "",
+  "license": "ISC",
+  "dependencies": {
+    "@vuemap/vue-amap": "^2.0.17",
+    "@vueuse/core": "^10.2.1",
+    "ant-design-vue": "^3.2.20",
+    "jetlinks-ui-components": "^1.0.27",
+    "lodash-es": "^4.17.21",
+    "pinia": "^2.1.6",
+    "vue": "^3.3.4",
+    "vue-router": "^4.2.4",
+    "@jetlinks/hooks": "npm:@jetlinks-web/hooks@^1.0.0",
+    "@jetlinks/stores": "npm:@jetlinks-web/stores@^1.0.0",
+    "@jetlinks/utils": "npm:@jetlinks-web/utils@^1.0.0"
+  },
+  "publishConfig": {
+    "registry": "https://registry.npmjs.org/",
+    "access": "public"
+  },
+  "scripts": {
+    "clean": "pnpm rimraf node_modules && pnpm rimraf .turbo"
+  }
+}

package/src/AMap/Map.vue

@@ -0,0 +1,107 @@
+<template>
+  <div
+    :style="props.style || { width: '100%', height: '100%' }"
+    :class="props.class"
+  >
+    <el-amap
+      v-if="amapKey"
+      v-bind="{
+        ...props,
+        ...$attrs
+      }"
+      :map-style="_mapStyle"
+      @init="initMap"
+      @click="(e) => emit('click', e)"
+      @dblclick="(e) => emit('dblclick', e)"
+      @movestart="(e) => emit('movestart', e)"
+      @moveend="(e) => emit('moveend', e)"
+      @rightclick="(e) => emit('rightclick', e)"
+    >
+      <template v-if="isOpenUi">
+        <template v-if="uiLoading">
+          <slot></slot>
+        </template>
+      </template>
+      <template v-else><slot></slot></template>
+    </el-amap>
+    <JEmpty v-else description="请配置高德地图key" style="padding: 20%" />
+  </div>
+</template>
+
+<script setup name="InitAMap" lang="ts">
+import type { CSSProperties, PropType } from 'vue';
+import { ref, computed } from 'vue'
+import { initAMapApiLoader, ElAmap } from '@vuemap/vue-amap';
+import '@vuemap/vue-amap/dist/style.css';
+import { store } from '@jetlinks/stores'
+import { getAMapUiPromise } from '@jetlinks/utils'
+import { MapProps } from './util'
+interface AMapProps {
+  style?: CSSProperties;
+  class?: string;
+  AMapUI?: string | boolean;
+  plugins?: string[]
+}
+
+const systemStore = store.SystemStore
+
+const amapKey = systemStore.systemInfo.apiKey
+
+const emit = defineEmits([
+  'initMap',
+  'click',
+  'dblclick',
+  'movestart',
+  'moveend',
+  'rightclick',
+])
+
+const props = defineProps({
+  ...MapProps(),
+  style: Object as PropType<AMapProps['style']>,
+  class: String as PropType<AMapProps['class']>,
+  AMapUI: [String, Boolean],
+  center: Array,
+  plugin: Array,
+  zooms: {
+    type: Array,
+    default: [3, 20]
+  }
+});
+
+const _mapStyle = computed(() => {
+  return props.mapStyle ? `amap://styles/${props.mapStyle}` : undefined
+})
+
+initAMapApiLoader({
+  key: amapKey || '',
+  plugin: props.plugin
+});
+
+const uiLoading = ref<boolean>(false);
+
+const map = ref<any>(null);
+
+const isOpenUi = computed(() => {
+  return 'AMapUI' in props || props.AMapUI;
+});
+const getAMapUI = () => {
+  const version = typeof props.AMapUI === 'string' ? props.AMapUI : '1.1';
+  getAMapUiPromise(version).then(() => {
+    uiLoading.value = true;
+  });
+};
+
+const initMap = (e: any) => {
+  map.value = e;
+  emit('initMap', e)
+  if (isOpenUi.value) {
+    getAMapUI();
+  }
+};
+
+</script>
+
+<style scoped>
+
+</style>

package/src/AMap/index.ts

@@ -0,0 +1 @@
+export { default as InitAMap } from './Map.vue'

package/src/AMap/util.ts

@@ -0,0 +1,56 @@
+export const MapProps = () => ({
+  //  响应式
+  center: Array,
+  labelzIndex: Number,
+  lang: String,
+  mapStyle: String,
+
+  //  静态属性
+  vid: String,
+  amapManager: Object as any,
+  defaultCursor: String,
+  animateEnable: {
+    type: Boolean,
+    default: true
+  },
+  isHotspot: Boolean,
+  rotateEnable: {
+    type: Boolean,
+    default: true
+  },
+  resizeEnable: {
+    type: Boolean,
+    default: true
+  },
+  showIndoorMap: Boolean,
+  expandZoomRange: Boolean,
+  dragEnable: {
+    type: Boolean,
+    default: true
+  },
+  zoomEnable: {
+    type: Boolean,
+    default: true
+  },
+  doubleClickZoom: {
+    type: Boolean,
+    default: true
+  },
+  keyboardEnable: {
+    type: Boolean,
+    default: true
+  },
+  jogEnable: {
+    type: Boolean,
+    default: true
+  },
+  scrollWheel: {
+    type: Boolean,
+    default: true
+  },
+  touchZoom: {
+    type: Boolean,
+    default: true
+  },
+
+})

package/src/BadgeStatus/Badge.vue

@@ -0,0 +1,40 @@
+<template>
+  <j-badge
+    :color="_color"
+    :text="text"
+  ></j-badge>
+</template>
+
+<script setup lang="ts" name="BadgeStatus">
+import { defineProps, computed } from 'vue'
+import { getHexColor } from './color'
+const props = defineProps({
+  text: {
+    type: String,
+  },
+  status: {
+    type: [String, Number],
+    default: 'default',
+  },
+  /**
+   * 自定义status值颜色
+   * @example {
+   *   1: 'success',
+   *   0: 'error'
+   * }
+   */
+  statusNames: {
+    type: Object,
+    default: () => ({
+      'success': 'success',
+      'warning': 'warning',
+      'error': 'error',
+      'default': 'default',
+    })
+  },
+});
+
+const _color = computed(() => {
+  return getHexColor(props.statusNames[props.status], 1)
+})
+</script>

package/src/BadgeStatus/color.ts

@@ -0,0 +1,23 @@
+
+const color = {
+  'processing': '9, 46, 231',
+  'error': '229, 0, 18',
+  'success': '36, 178, 118',
+  'warning': '255, 144, 0',
+  'default': '102, 102, 102',
+  //告警颜色
+  'level1': '229, 0,  18',
+  'level2': '255, 148,  87',
+  'level3': '250, 189,  71',
+  'level4': '153, 153, 153',
+  'level5': '196, 196,  196'
+}
+export const getHexColor = (code: string, pe: number = 0.1) => {
+  const _color = color[code] || color.default
+  if (code === 'default') {
+    pe = 0.1
+  }
+  return `rgba(${_color}, ${pe})`
+}
+
+export default color

package/src/BadgeStatus/index.ts

@@ -0,0 +1,4 @@
+import BadgeStatus from './Badge.vue'
+export * from './color'
+
+export default BadgeStatus

package/src/Echarts/Echarts.vue

@@ -0,0 +1,43 @@
+<template>
+  <div ref="echartsDom" class="echarts-warp" :style="style"></div>
+</template>
+  
+  <script lang="ts" name="Echarts" setup>
+import { CSSProperties, nextTick, ref, watch, Ref } from 'vue'
+import { useECharts } from '@jetlinks/hooks'
+
+interface Props {
+  style?: CSSProperties
+}
+
+const props = defineProps({
+  options: {
+    type: Object,
+    default: undefined,
+  },
+  style: Object as PropType<Props['style']>,
+})
+
+const echartsDom = ref<Ref<HTMLDivElement> | HTMLDivElement>()
+
+const { setOptions } = useECharts(echartsDom.value)
+
+watch(
+  () => props.options,
+  () => {
+    if (props.options) {
+      nextTick(() => {
+        setOptions(props.options)
+      })
+    }
+  },
+  { immediate: true, deep: true },
+)
+</script>
+  
+<style scoped>
+.echarts-warp {
+  width: 100%;
+  height: 100%;
+}
+</style>

package/src/Echarts/index.ts

@@ -0,0 +1,3 @@
+import Echarts from './Echarts.vue'
+
+export default Echarts

package/src/FullPage/index.vue

@@ -0,0 +1,27 @@
+<template>
+  <div class='full-page-warp' ref='fullPage' :style='{ minHeight: `calc(100vh - ${y + 24}px)`}'>
+    <div class="full-page-warp-content">
+      <slot></slot>
+    </div>
+  </div>
+</template>
+
+<script setup lang='ts' name='FullPage'>
+import { ref } from 'vue'
+import { useElementBounding } from '@vueuse/core'
+
+const fullPage = ref(null)
+const { y } = useElementBounding(fullPage)
+
+</script>
+
+<style scoped lang="less">
+.full-page-warp {
+  background: #fff;
+  display: flex;
+  .full-page-warp-content {
+    width: 100%;
+  }
+}
+
+</style>

package/src/GeoComponent/GeoComponent.vue

@@ -0,0 +1,139 @@
+<!-- 坐标点拾取组件 -->
+<template>
+  <div class="page-container">
+    <j-input allowClear v-bind="props" v-model:value="inputPoint">
+      <template #addonAfter>
+        <AIcon type="EnvironmentOutlined" @click="modalVisible = true" />
+      </template>
+    </j-input>
+    <j-modal
+      title="地理位置"
+      ok-text="确认"
+      cancel-text="取消"
+      v-model:visible="modalVisible"
+      width="700px"
+      @cancel="modalVisible = false"
+      @ok="handleModalSubmit"
+      destroyOnClose
+    >
+      <div style="width: 100%; height: 400px">
+        <div style="margin-bottom: 10px;">地理位置：{{ mapPoint }}</div>
+        <el-amap
+          :center="_center"
+          :zoom="_zoom"
+          @init="initMap"
+          @click="clickMap"
+        >
+          <el-amap-search-box visible @select="selectPosition" />
+          <el-amap-marker :position="position" />
+        </el-amap>
+      </div>
+    </j-modal>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { store } from '@jetlinks/stores'
+import { initAMapApiLoader } from '@vuemap/vue-amap'
+import '@vuemap/vue-amap/dist/style.css'
+import { computed, CSSProperties, PropType, ref } from 'vue'
+
+interface AMapProps {
+  style?: CSSProperties
+  class?: string
+  AMapUI?: string | boolean
+  plugins?: string[]
+}
+
+const systemStore = store.SystemStore
+
+const amapKey = systemStore.systemInfo.apiKey
+
+interface EmitProps {
+  (e: 'update:point', data: string): void
+  (e: 'change', data: string): void
+}
+const props = defineProps({
+  style: Object as PropType<AMapProps['style']>,
+  class: String as PropType<AMapProps['class']>,
+  AMapUI: [String, Boolean],
+  center: Array as PropType<number[]>,
+  plugin: Array,
+  zoom: {
+    type: Number,
+    default: 12,
+  },
+  securityJsCode: String,
+  point: { type: [Number, String], default: '' },
+})
+const emit = defineEmits<EmitProps>()
+
+
+initAMapApiLoader({
+  key: amapKey,
+  securityJsCode: props.securityJsCode
+})
+
+// 手动输入的坐标点(经纬度字符串)
+const inputPoint = computed({
+  get: () => {
+    return props.point
+  },
+  set: (val: any) => {
+    mapPoint.value = val
+    emit('update:point', val)
+    emit('change', val)
+  },
+})
+
+// 地图弹窗
+const modalVisible = ref<boolean>(false)
+
+const handleModalSubmit = () => {
+  inputPoint.value = mapPoint.value
+  modalVisible.value = false
+}
+
+// 地图拾取的坐标点(经纬度字符串)
+const mapPoint = ref('')
+
+const _zoom = ref<number>(props.zoom)
+const _center = ref<number[]>(props?.center || [])
+let map: any = null
+
+// 地图经纬度
+const position = ref<number[] | string[]>([])
+
+/**
+ * 地图初始化
+ * @param e
+ */
+const initMap = (e: any) => {
+  map = e
+
+  const pointStr = mapPoint.value as string
+  position.value = pointStr ? pointStr.split(',') : _center.value
+}
+
+/**
+ * 地图点击
+ * @param e
+ */
+const clickMap = (e: any) => {
+  mapPoint.value = `${e.lnglat.lng},${e.lnglat.lat}`
+  position.value = [e.lnglat.lng, e.lnglat.lat]
+}
+
+/**
+ * 选择搜索结果
+ * @param e
+ */
+const selectPosition = (e: any) => {
+  const selectPoint = [e.poi.location.lng, e.poi.location.lat]
+  map.setCenter(selectPoint)
+  mapPoint.value = selectPoint.join(',')
+  position.value = selectPoint
+}
+</script>
+
+<style lang="less" scoped></style>

package/src/GeoComponent/index.ts

@@ -0,0 +1,3 @@
+import GeoComponent from './GeoComponent.vue'
+
+export default GeoComponent

package/src/PermissionButton/hooks.ts

@@ -0,0 +1,20 @@
+import {watch, ref} from 'vue'
+import type { Ref } from 'vue'
+import { store } from '@jetlinks/stores'
+import {isBoolean} from "lodash-es";
+
+export const usePermission = (code?: string | string[] | boolean): {
+  hasPerm: Ref<boolean>
+} => {
+  const hasPerm = ref(false)
+
+  watch(() => code, () => {
+    if (code) {
+      hasPerm.value = isBoolean(code) ? code : store.AuthStore.hasPermission(code)
+    }
+  }, { immediate: true })
+
+  return {
+    hasPerm
+  }
+}

package/src/PermissionButton/index.tsx

@@ -0,0 +1,107 @@
+import {h, defineComponent, computed} from "vue";
+import type { PropType, CSSProperties, ExtractPropTypes } from 'vue'
+import { Button, Tooltip, Popconfirm } from 'jetlinks-ui-components'
+import {PopconfirmProps, TooltipProps} from "ant-design-vue/es";
+import {omit} from "lodash-es";
+import {buttonProps} from "ant-design-vue/es/button/button";
+import { usePermission } from './hooks'
+
+type PermissionType = string | Array<string> | boolean
+
+const definedProps = {
+  tooltip: {
+    type: Object as PropType<TooltipProps>,
+  },
+  popConfirm: {
+    type: Object as PropType<PopconfirmProps>,
+  },
+  hasPermission: {
+    type: [String, Array, Boolean] as PropType<PermissionType>,
+    default: undefined
+  },
+  style: {
+    type: Object as PropType<CSSProperties>
+  },
+  noPermissionTitle: {
+    type: String
+  },
+  ...omit(buttonProps(), 'icon')
+}
+
+type DefinedPropsType = Partial<ExtractPropTypes<typeof definedProps>>
+
+const PermissionButton = defineComponent({
+  name: 'PermissionButton',
+  // @ts-ignore
+  slots: ['button', 'icon'],
+  props: definedProps,
+  setup(props, { slots }) {
+
+    const { popConfirm, tooltip } = props
+    const { hasPerm } = usePermission(props.hasPermission as PermissionType)
+
+    const permission = computed(() => {
+      if (!props.hasPermission || props.hasPermission === true) {
+        return true
+      }
+      return hasPerm.value
+    })
+
+    const isPermission = computed(() => {
+      if ('hasPermission' in props && permission.value) {
+        return 'disabled' in props ? props.disabled : false
+      }
+      return true
+    })
+
+    const hasPopConfirm = computed(() => !!popConfirm) // 是否包含确认弹窗
+    const hasTooltip = computed(() => !!tooltip) // 是否包含文字提示
+
+    return () => {
+      const { popConfirm, tooltip, hasPermission, noPermissionTitle, ...buttonProps } = props
+
+      const button = !slots.button ?
+        h(Button,
+          {
+            ...buttonProps,
+            disabled: isPermission.value,
+          },
+          {
+          default: () => slots?.default?.(),
+          icon: () => slots?.icon?.()
+        }) :
+        slots.button()
+
+      // 文字提示
+      const _tooltip = tooltip ? h(Tooltip, { ...tooltip, disabled: isPermission.value }, { default: () => button}) : undefined
+
+      // 无权限
+      const noPermissionButton = !permission.value ? h(Tooltip, { title: noPermissionTitle || '暂无权限，请联系管理员' }, { default: () => button}) : undefined
+
+      // 二次确认
+      const _popConfirm = popConfirm ?
+        h(Popconfirm,
+          {
+            ...popConfirm,
+            disabled: !permission.value || buttonProps.disabled,
+            overlayStyle: { width: '220px' }
+          }, { default: () => tooltip ? _tooltip : button })
+        : undefined
+
+      if (permission.value) {
+        if(hasPopConfirm.value) {
+          return _popConfirm
+        }
+
+        if (hasTooltip.value) {
+          return _tooltip
+        }
+
+        return button
+      }
+      return noPermissionButton
+    }
+  }
+})
+
+export default PermissionButton

package/src/ValueItem/ValueItem.vue

@@ -0,0 +1,177 @@
+<!-- 参数类型输入组件 -->
+<template>
+  <div class="value-item-warp">
+    <j-select
+      v-if="typeMap.get(itemType) === 'select'"
+      v-model:value="myValue"
+      allowClear
+      @change="(_, options) => onChange(options)"
+      v-bind="props"
+    />
+    <j-date-picker
+      v-else-if="typeMap.get(itemType) === 'date'"
+      :valueFormat="valueFormat || 'YYYY-MM-DD HH:mm:ss'"
+      v-model:value="myValue"
+      allowClear
+      showTime
+      @change="onChange"
+    />
+    <j-input-number
+      v-else-if="typeMap.get(itemType) === 'inputNumber'"
+      v-bind="props"
+      v-model:value="myValue"
+      allowClear
+      @change="onChange"
+    />
+    <j-input
+      allowClear
+      v-bind="props"
+      v-else-if="typeMap.get(itemType) === 'object'"
+      v-model:value="myValue"
+      @change="onChange"
+    >
+      <template #addonAfter>
+        <AIcon type="FormOutlined" @click="modalVisible = true" />
+      </template>
+    </j-input>
+    <GeoComponent
+      v-else-if="typeMap.get(itemType) === 'geoPoint'"
+      v-model:point="myValue"
+      @change="onChange"
+      v-bind="props"
+    />
+    <j-input
+      v-else-if="typeMap.get(itemType) === 'file'"
+      v-model:value="myValue"
+      placeholder="请输入链接"
+      allowClear
+      @change="onChange"
+    >
+      <template #addonAfter>
+        <j-upload
+          name="file"
+          :action="action"
+          :headers="headers"
+          :showUploadList="false"
+          @change="handleFileChange"
+        >
+          <AIcon type="UploadOutlined" />
+        </j-upload>
+      </template>
+    </j-input>
+    <j-input-password
+      v-else-if="typeMap.get(itemType) === 'password'"
+      allowClear
+      v-bind="props"
+      type="password"
+      v-model:value="myValue"
+      @change="onChange"
+    />
+    <j-input
+      v-else
+      allowClear
+      v-bind="props"
+      type="text"
+      v-model:value="myValue"
+      @change="onChange"
+    />
+
+    <!-- 代码编辑器弹窗 -->
+    <j-modal
+      title="编辑"
+      ok-text="确认"
+      cancel-text="取消"
+      v-model:visible="modalVisible"
+      width="700px"
+      @cancel="modalVisible = false"
+      @ok="handleItemModalSubmit"
+      :zIndex="1100"
+    >
+      <div style="width: 100%; height: 300px">
+        <JMonacoEditor v-model:modelValue="objectValue" />
+      </div>
+    </j-modal>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { CSSProperties, PropType, ref, watch } from 'vue'
+import { componentsType } from './util'
+
+type Emits = {
+  (e: 'update:modelValue', data: string | number | boolean): void
+  (e: 'change', data: any, item?: any): void
+}
+
+interface ItemProps {
+  style?: CSSProperties
+  class?: string
+}
+
+const emit = defineEmits<Emits>()
+
+const props = defineProps({
+  // 组件双向绑定的值
+  modelValue: {
+    type: [Number, String],
+    default: '',
+  },
+  // 组件类型
+  itemType: {
+    type: String,
+    default: () => 'string',
+  },
+  // 多选框
+  mode: {
+    type: String as PropType<'multiple' | 'tags' | 'combobox' | ''>,
+    default: '',
+  },
+  placeholder: String,
+  options: Array, // 下拉选择框下拉数据
+  style: Object as PropType<ItemProps['style']>,
+  class: String,
+  valueFormat: String,
+  action: [String, Promise],
+  headers: Object,
+})
+
+const typeMap = new Map(Object.entries(componentsType))
+
+const myValue = ref<any>(undefined)
+const modalVisible = ref<boolean>(false)
+const objectValue = ref<string>('')
+
+const handleItemModalSubmit = () => {
+  myValue.value = objectValue.value.replace(/[\r\n]\s*/g, '')
+  modalVisible.value = false
+  emit('update:modelValue', objectValue.value)
+  emit('change', objectValue.value)
+}
+
+const onChange = (e) => {
+  emit('update:modelValue', myValue.value)
+  emit('change', e)
+}
+
+const handleFileChange = (info: any) => {
+  if (info.file.status === 'done') {
+    const url = info.file.response?.result
+    myValue.value = url
+    emit('update:modelValue', url)
+    emit('change', url)
+  }
+}
+
+watch(
+  () => props.modelValue,
+  () => {
+    myValue.value = props.modelValue
+    if (props.itemType === 'object') {
+      objectValue.value = props.modelValue as string
+    }
+  },
+  { immediate: true },
+)
+</script>
+
+<style lang="less" scoped></style>

package/src/ValueItem/index.ts

@@ -0,0 +1,3 @@
+import ValueItem from './ValueItem.vue'
+
+export default ValueItem

package/src/ValueItem/util.ts

@@ -0,0 +1,15 @@
+export const componentsType = {
+    int: 'inputNumber',
+    long: 'inputNumber',
+    float: 'inputNumber',
+    double: 'inputNumber',
+    string: 'input',
+    array: 'input',
+    password: 'password',
+    enum: 'select',
+    boolean: 'select',
+    date: 'date',
+    object: 'object',
+    geoPoint: 'geoPoint',
+    file: 'file',
+}