Merge branch 'dev' of github.com:jetlinks/jetlinks-ui-vue into dev

2023-06-09 11:11:46 +08:00 · 2023-06-09 11:11:46 +08:00 · b0a9a13491
parent 4aa8a2dbe6 93aed922bc
commit b0a9a13491
7 changed files with 119 additions and 15 deletions
--- a/package.json
+++ b/package.json
@ -41,6 +41,7 @@
    "v-clipboard3": "^0.1.4",
    "vite-plugin-monaco-editor": "^1.1.0",
    "vue": "^3.2.45",
+    "vue-cropper": "^1.0.9",
    "vue-json-viewer": "^3.0.4",
    "vue-router": "^4.1.6",
    "vue3-json-viewer": "^2.2.2",
--- a/src/api/comm.ts
+++ b/src/api/comm.ts
@ -34,4 +34,6 @@ export const systemVersion = () => server.get<{edition?: string}>('/system/versi
 * @param data 
 * @returns 
 */
-export const queryDashboard = (data: Record<string, any>) => server.post(`/dashboard/_multi`, data)
+export const queryDashboard = (data: Record<string, any>) => server.post(`/dashboard/_multi`, data)
+
+export const fileUpload = (data: any) => server.post('/file/static', data)
--- a/src/components/Upload/Cropper.vue
+++ b/src/components/Upload/Cropper.vue
@ -0,0 +1,67 @@
+<template>
+  <j-modal
+      title="图片编辑"
+      visible
+      :width="400"
+      @cancel="cancel"
+      @ok="ok"
+      :confirmLoading="loading"
+  >
+    <div style="height: 300px; width: 100%;">
+      <vue-cropper
+          ref="cropper"
+          :img="img"
+          :fixed-box="true"
+          :autoCrop="true"
+          :auto-crop-width="200"
+          :auto-crop-height="200"
+          outputType="jpg"
+      ></vue-cropper>
+    </div>
+  </j-modal>
+</template>
+
+<script setup lang="ts" name="UploadCropper">
+import 'vue-cropper/dist/index.css'
+import { VueCropper } from 'vue-cropper';
+import { fileUpload } from '@/api/comm';
+
+const props = defineProps({
+  img: {
+    type: String
+  }
+})
+
+const emit = defineEmits(['cancel', 'ok'])
+
+const imgUrl = ref()
+const cropper = ref()
+const loading = ref(false)
+
+const ok = () => {
+  cropper.value.getCropBlob(async (data: Blob) => {
+    console.log(data)
+    let formData = new FormData()
+    formData.append('file', data, new Date().getTime() + '.jpg')
+
+    imgUrl.value = data
+    loading.value = true
+    fileUpload(formData).then(res => {
+      if (res.success) {
+        emit('ok', res.result)
+      }
+    }).finally(() => {
+      loading.value = false
+    })
+  })
+
+}
+
+const cancel = () => {
+  emit('cancel')
+}
+</script>
+
+<style scoped>
+
+</style>
--- a/src/components/Upload/index.vue
+++ b/src/components/Upload/index.vue
@ -16,12 +16,6 @@
            >
                <div class="upload-image-content" :style="props.style">
                    <template v-if="imageUrl">
-                        <!-- <div class="upload-image"
-                        :style="{
-                            backgroundSize: props.backgroundSize,
-                            backgroundImage: `url(${imageUrl})`
-                        }"
-                        ></div> -->
                        <img :src="imageUrl" class="upload-image" />
                        <div class="upload-image-mask">点击修改</div>
                    </template>
@ -52,6 +46,12 @@
            </div>
        </div>
    </div>
+  <ImageCropper
+    v-if="cropperVisible"
+    :img="cropperImg"
+    @cancel="cropperVisible = false"
+    @ok="saveImage"
+  />
 </template>

 <script lang="ts" setup name='JProUpload'>
@ -59,8 +59,9 @@ import { UploadChangeParam, UploadProps } from 'ant-design-vue';
 import { message } from 'jetlinks-ui-components';
 import { FILE_UPLOAD } from '@/api/comm';
 import { TOKEN_KEY } from '@/utils/variable';
-import { LocalStore } from '@/utils/comm';
+import {getBase64, LocalStore} from '@/utils/comm';
 import { CSSProperties } from 'vue';
+import ImageCropper from './Cropper.vue'

 type Emits = {
    (e: 'update:modelValue', data: string): void;
@ -100,6 +101,9 @@ const loading = ref<boolean>(false);
 const imageUrl = ref<string>(props?.modelValue || '');
 const imageTypes = props.types ? props.types : ['image/jpeg', 'image/png'];

+const cropperImg = ref()
+const cropperVisible = ref(false)
+
 watch(
    () => props.modelValue,
    (newValue) => {
@ -129,6 +133,7 @@ const handleChange = (info: UploadChangeParam) => {

 const beforeUpload = (file: UploadProps['fileList'][number]) => {
    const isType = imageTypes.includes(file.type);
+    const maxSize = props.size || 2 // 最大值
    if (!isType) {
        if (props.errorMessage) {
            message.error(props.errorMessage);
@ -137,12 +142,25 @@ const beforeUpload = (file: UploadProps['fileList'][number]) => {
        }
        return false;
    }
-    const isSize = file.size / 1024 / 1024 < (props.size || 4);
+    const isSize = file.size / 1024 / 1024 < maxSize;
    if (!isSize) {
-        message.error(`图片大小必须小于${props.size || 4}M`);
+        message.error(`图片大小必须小于${maxSize}M`);
    }
-    return isType && isSize;
+
+    getBase64(file, (base64Url) => {
+      cropperImg.value = base64Url
+      cropperVisible.value = true
+    })
+
+    return false;
 };
+
+
+const saveImage = (url: string) => {
+  cropperVisible.value = false
+  imageUrl.value = url
+  emit('update:modelValue', url);
+}
 </script>

 <style lang="less" scoped>
--- a/src/utils/comm.ts
+++ b/src/utils/comm.ts
@ -174,4 +174,14 @@ export const openKeysByTree = (data: any[], search: any, searchKey: string = 'id

  findKey(filterTree)
  return openKeys
+}
+
+export const getBase64 = (img: File, callback: (base64Url: string) => void) => {
+  const reader = new FileReader();
+  reader.readAsDataURL(img);
+
+  reader.onload = (result: any) => {
+    console.log(result)
+    callback(result.target.result)
+  }
 }
--- a/src/views/rule-engine/Alarm/Configuration/index.vue
+++ b/src/views/rule-engine/Alarm/Configuration/index.vue
@ -124,18 +124,18 @@
                    <template #level="slotProps">
                        <j-tooltip
                            placement="topLeft"
-                            :title="(Store.get('default-level') || []).find((item: any) => item?.level === slotProps.level)?.title ||
+                            :title="(Store.get('default-level') || []).find((item) => item?.level === slotProps.level)?.title ||
            slotProps.level"
                        >
                            <div class="ellipsis">
-                                {{ (Store.get('default-level') || []).find((item: any) => item?.level === slotProps.level)?.title ||
+                                {{ (Store.get('default-level') || []).find((item) => item?.level === slotProps.level)?.title ||
            slotProps.level }}
                            </div>
                        </j-tooltip>
                    </template>
-                    <template #sceneId="slotProps">
+                    <template #scene="slotProps">
                        <span
-                            >{{(slotProps?.scene || []).map((item: any) => item?.name).join(',') || ''}}</span
+                            >{{(slotProps?.scene || []).map((item) => item?.name).join(',') || ''}}</span
                        >
                    </template>
                    <template #state="slotProps">
@ -273,6 +273,7 @@ const columns = [
        title: '关联场景联动',
        dataIndex: 'scene',
        scopedSlots: true,
+        key: 'scene',
        search: {
            type: 'select',
            // defaultTermType: 'rule-bind-alarm',
--- a/yarn.lock
+++ b/yarn.lock
@ -6945,6 +6945,11 @@ vite@^4.0.0:
  optionalDependencies:
    fsevents "~2.3.2"

+vue-cropper@^1.0.9:
+  version "1.0.9"
+  resolved "https://registry.jetlinks.cn/vue-cropper/-/vue-cropper-1.0.9.tgz#de402c57cadc221e9a2063399ff35bb04220ef22"
+  integrity sha512-JhQwxmjqmQohzI7sAp5O/Rfdxuw5HOEYkKjnp/De7iCi6c8Mv6M3N9HpMt9xgWCFchX3/DfXBv2axCZOCg3G8Q==
+
 vue-demi@*:
  version "0.13.11"
  resolved "https://registry.npmjs.org/vue-demi/-/vue-demi-0.13.11.tgz"