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

components.d.ts

@@ -11,6 +11,8 @@ declare module '@vue/runtime-core' {
     ACol: typeof import('ant-design-vue/es')['Col']
     ARow: typeof import('ant-design-vue/es')['Row']
     ATooltip: typeof import('ant-design-vue/es')['Tooltip']
+    BadgeStatus: typeof import('./src/components/BadgeStatus/index.vue')['default']
+    CardBox: typeof import('./src/components/CardBox/index.vue')['default']
     GeoComponent: typeof import('./src/components/GeoComponent/index.vue')['default']
     MonacoEditor: typeof import('./src/components/MonacoEditor/index.vue')['default']
     RouterLink: typeof import('vue-router')['RouterLink']

src/components/BadgeStatus/index.vue

@@ -0,0 +1,33 @@
+<template>
+    <a-badge
+        :status="statusNames ? statusNames[status] : 'default'"
+        :text="text"
+    ></a-badge>
+</template>
+
+<script setup lang="ts">
+import { StatusColorEnum } from '@/utils/consts.ts';
+
+const props = defineProps({
+    text: {
+        type: String,
+    },
+    status: {
+        type: String || Number,
+        default: 'default',
+        validator: (value) => {
+            // 这个值必须匹配下列字符串中的一个
+            return Object.keys(StatusColorEnum).includes(value);
+        },
+    },
+    /**
+     * 自定义status值颜色
+     * @example {
+     *   1: 'success',
+     *   0: 'error'
+     * }
+     */
+    statusNames: { type: Object },
+});
+
+</script>

src/components/CardBox/index.vue

@@ -0,0 +1,382 @@
+<template>
+    <div class="card">
+        <div
+            class="card-warp"
+            :class="{
+                hover: maskShow ? 'hover' : '',
+                active: actived ? 'active' : '',
+            }"
+            @click="handleClick"
+        >
+            <div
+                class="card-content"
+                @mouseenter="setMaskShow(true)"
+                @mouseleave="setMaskShow(false)"
+            >
+                <a-row>
+                    <a-col :span="6">
+                        <!-- 图片 -->
+                        <div class="card-item-avatar">
+                            <slot name="img"> </slot>
+                        </div>
+                    </a-col>
+                    <a-col :span="18">
+                        <!-- 内容 -->
+                        <slot name="content"></slot>
+                    </a-col>
+                </a-row>
+
+                <!-- 勾选 -->
+                <div v-if="actived" class="checked-icon">
+                    <div>
+                        <CheckOutlined />
+                    </div>
+                </div>
+
+                <!-- 状态 -->
+                <div
+                    v-if="showStatus"
+                    class="card-state"
+                    :class="statusNames ? statusNames[status] : ''"
+                >
+                    <div class="card-state-content">
+                        <BadgeStatus
+                            :status="status"
+                            :text="statusText"
+                            :statusNames="statusNames"
+                        ></BadgeStatus>
+                    </div>
+                </div>
+
+                <!-- 遮罩层 -->
+                <div
+                    v-if="showMask"
+                    class="card-mask"
+                    :class="maskShow ? 'show' : ''"
+                >
+                    <slot name="mask"></slot>
+                </div>
+            </div>
+        </div>
+
+        <!-- 按钮 -->
+        <slot name="botton-tool">
+            <div v-if="showTool" class="card-tools">
+                <div
+                    v-for="item in actions"
+                    :key="item.key"
+                    class="card-button"
+                    :class="{
+                        delete: item.key === 'delete',
+                    }"
+                >
+                    <a-tooltip v-if="item.disabled === true">
+                        <template #title>{{ item.message }}</template>
+                        <a-button :disabled="item.disabled">
+                            <template #icon><SearchOutlined /></template>
+                            <span>{{ item.label }}</span>
+                        </a-button>
+                    </a-tooltip>
+
+                    <a-button v-else :disabled="item.disabled">
+                        <template #icon><SearchOutlined /></template>
+                        <span>{{ item.label }}</span>
+                    </a-button>
+                </div>
+            </div>
+        </slot>
+    </div>
+</template>
+
+<script setup lang="ts">
+import { SearchOutlined, CheckOutlined } from '@ant-design/icons-vue';
+import BadgeStatus from '@/components/BadgeStatus/index.vue';
+import { StatusColorEnum } from '@/utils/consts.ts';
+
+type EmitProps = {
+    (e: 'update:modelvalue', data: string | number): void;
+    (e: 'actived', data: boolean): void;
+};
+
+const emit = defineEmits<EmitProps>();
+
+const props = defineProps({
+    showStatus: {
+        type: Boolean,
+        default: true,
+    },
+    showTool: {
+        type: Boolean,
+        default: true,
+    },
+    showMask: {
+        type: Boolean,
+        default: true,
+    },
+    statusText: {
+        type: String,
+        default: '正常',
+    },
+    status: {
+        type: [String, Number],
+        default: 'default',
+    },
+    statusNames: {
+        type: Object,
+    },
+    actions: {
+        type: Array as any,
+        default: () => [],
+    },
+});
+
+const maskShow = ref(false);
+const actived = ref(false);
+
+const setMaskShow = (val: boolean) => {
+    maskShow.value = val;
+};
+
+const handleClick = () => {
+    actived.value = !actived.value;
+    emit('actived', actived.value);
+};
+</script>
+
+<style lang="less" scoped>
+.card {
+    width: 100%;
+    background-color: #fff;
+    .checked-icon {
+        position: absolute;
+        right: -22px;
+        bottom: -22px;
+        z-index: 2;
+        width: 44px;
+        height: 44px;
+        color: #fff;
+        background-color: red;
+        background-color: #2f54eb;
+        transform: rotate(-45deg);
+
+        > div {
+            position: relative;
+            height: 100%;
+            transform: rotate(45deg);
+
+            > span {
+                position: absolute;
+                top: 6px;
+                left: 6px;
+                font-size: 12px;
+            }
+        }
+    }
+
+    .card-warp {
+        position: relative;
+        border: 1px solid #e6e6e6;
+
+        &.hover {
+            cursor: pointer;
+            box-shadow: 0 0 24px rgba(#000, 0.1);
+        }
+
+        &.active {
+            position: relative;
+            border: 1px solid #2f54eb;
+        }
+
+        .card-content {
+            position: relative;
+            padding: 30px 12px 16px 30px;
+            overflow: hidden;
+
+            &::before {
+                position: absolute;
+                top: 0;
+                left: 30px + 10px;
+                display: block;
+                width: 15%;
+                min-width: 64px;
+                height: 2px;
+                background-image: url('/images/rectangle.png');
+                background-repeat: no-repeat;
+                background-size: 100% 100%;
+                content: ' ';
+            }
+
+            .card-item-avatar {
+                margin-right: 16px;
+            }
+
+            .card-state {
+                position: absolute;
+                top: 30px;
+                right: -12px;
+                display: flex;
+                justify-content: center;
+                width: 100px;
+                padding: 2px 0;
+                background-color: rgba(#5995f5, 0.15);
+                transform: skewX(45deg);
+
+                &.success {
+                    background-color: @success-color-deprecated-bg;
+                }
+
+                &.warning {
+                    background-color: rgba(#ff9000, 0.1);
+                }
+
+                &.error {
+                    background-color: rgba(#e50012, 0.1);
+                }
+
+                .card-state-content {
+                    transform: skewX(-45deg);
+                }
+            }
+        }
+
+        .card-mask {
+            position: absolute;
+            top: 0;
+            left: 0;
+            z-index: 2;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            width: 100%;
+            height: 100%;
+            color: #fff;
+            background-color: rgba(#000, 0);
+            visibility: hidden;
+            cursor: pointer;
+            transition: all 0.3s;
+
+            > div {
+                display: flex;
+                align-items: center;
+                justify-content: center;
+                width: 100%;
+                height: 100%;
+                padding: 0 !important;
+            }
+
+            &.show {
+                background-color: rgba(#000, 0.5);
+                visibility: visible;
+            }
+        }
+    }
+
+    &.item-active {
+        position: relative;
+        color: #2f54eb;
+
+        .checked-icon {
+            display: block;
+        }
+
+        .card-warp {
+            border: 1px solid #2f54eb;
+        }
+    }
+
+    .card-tools {
+        display: flex;
+        margin-top: 8px;
+
+        .card-button {
+            display: flex;
+            flex-grow: 1;
+
+            > span,
+            & button {
+                width: 100%;
+                border-radius: 0;
+            }
+
+            button {
+                background: #f6f6f6;
+                border: 1px solid #e6e6e6;
+                color: #2f54eb;
+
+                &:hover {
+                    background-color: @primary-color-hover;
+                    border-color: @primary-color-hover;
+
+                    span {
+                        color: #fff !important;
+                    }
+                }
+
+                &:active {
+                    background-color: @primary-color-active;
+                    border-color: @primary-color-active;
+
+                    span {
+                        color: #fff !important;
+                    }
+                }
+            }
+
+            &:not(:last-child) {
+                margin-right: 8px;
+            }
+
+            &.delete {
+                flex-basis: 60px;
+                flex-grow: 0;
+
+                button {
+                    background: @error-color-deprecated-bg;
+                    border: 1px solid @error-color-outline;
+
+                    span {
+                        color: @error-color !important;
+                    }
+
+                    &:hover {
+                        background-color: @error-color-hover;
+
+                        span {
+                            color: #fff !important;
+                        }
+                    }
+
+                    &:active {
+                        background-color: @error-color-active;
+
+                        span {
+                            color: #fff !important;
+                        }
+                    }
+                }
+            }
+
+            button[disabled] {
+                background: @disabled-bg;
+                border-color: @disabled-color;
+
+                span {
+                    color: @disabled-color !important;
+                }
+
+                &:hover {
+                    background-color: @disabled-active-bg;
+                }
+
+                &:active {
+                    background-color: @disabled-active-bg;
+                }
+            }
+
+            :deep(.ant-tooltip-disabled-compatible-wrapper) {
+                width: 100%;
+            }
+        }
+    }
+}
+</style>

src/components/GeoComponent/index.vue

@@ -1,3 +1,4 @@
+<!-- 坐标点拾取组件 -->
 <template>
     <div class="page-container">
         <a-input allowClear v-model:value="inputPoint">
@@ -23,6 +24,7 @@
                     @click="clickMap"
                 >
                     <el-amap-search-box visible @select="selectPoi" />
+                    <el-amap-marker :position="position" />
                 </el-amap>
                 {{ mapPoint }}
             </div>
@@ -49,7 +51,7 @@ const props = defineProps({
 });
 const emit = defineEmits<EmitProps>();
 
-// 手动输入的坐标点
+// 手动输入的坐标点(经纬度字符串)
 const inputPoint = computed({
     get: () => {
         return props.point;
@@ -67,13 +69,15 @@ const handleModalSubmit = () => {
     modalVis.value = false;
 };
 
-// 地图拾取的坐标点
+// 地图拾取的坐标点(经纬度字符串)
 const mapPoint = ref('');
 
 const zoom = ref(12);
 const center = ref([106.55, 29.56]);
 let map: any = null;
-let marker: any = null;
+
+// 地图经纬度
+const position = ref<number[] | string[]>([]);
 
 /**
  * 地图初始化
@@ -83,11 +87,7 @@ const initMap = (e: any) => {
     map = e;
 
     const pointStr = mapPoint.value as string;
-    if (marker) map.remove(marker);
+    position.value = pointStr ? pointStr.split(',') : center.value;
-    marker = new AMap.Marker({
-        position: pointStr ? pointStr.split(',') : center.value,
-    });
-    map.add(marker);
 };
 
 /**
@@ -96,13 +96,7 @@ const initMap = (e: any) => {
  */
 const clickMap = (e: any) => {
     mapPoint.value = `${e.lnglat.lng},${e.lnglat.lat}`;
-
+    position.value = [e.lnglat.lng, e.lnglat.lat];
-    if (marker) map.remove(marker);
-
-    marker = new AMap.Marker({
-        position: [e.lnglat.lng, e.lnglat.lat],
-    });
-    map.add(marker);
 };
 
 /**

src/components/ValueItem/index.vue

@@ -1,14 +1,15 @@
+<!-- 参数类型输入组件 -->
 <template>
     <div class="wrapper">
         <a-select
-            v-if="componentsType === 'select'"
+            v-if="typeMap.get(itemType) === 'select'"
             v-model:value="myValue"
             :options="options"
             allowClear
             style="width: 100%"
         />
         <a-date-picker
-            v-else-if="componentsType === 'date'"
+            v-else-if="typeMap.get(itemType) === 'date'"
             v-model:value="myValue"
             allowClear
             showTime
@@ -17,14 +18,14 @@
             style="width: 100%"
         />
         <a-input-number
-            v-else-if="componentsType === 'inputNumber'"
+            v-else-if="typeMap.get(itemType) === 'inputNumber'"
             v-model:value="myValue"
             allowClear
             style="width: 100%"
         />
         <a-input
             allowClear
-            v-else-if="componentsType === 'object'"
+            v-else-if="typeMap.get(itemType) === 'object'"
             v-model:value="myValue"
         >
             <template #addonAfter>
@@ -32,11 +33,11 @@
             </template>
         </a-input>
         <GeoComponent
-            v-else-if="componentsType === 'geoPoint'"
+            v-else-if="typeMap.get(itemType) === 'geoPoint'"
             v-model:point="myValue"
         />
         <a-input
-            v-else-if="componentsType === 'file'"
+            v-else-if="typeMap.get(itemType) === 'file'"
             v-model:value="myValue"
             placeholder="请输入图片链接"
             allowClear
@@ -79,12 +80,15 @@
 </template>
 
 <script setup lang="ts">
+import { PropType } from 'vue';
 import { FormOutlined, CloudUploadOutlined } from '@ant-design/icons-vue';
 import { UploadChangeParam, UploadFile } from 'ant-design-vue';
+import { DefaultOptionType } from 'ant-design-vue/lib/select';
 import MonacoEditor from '@/components/MonacoEditor/index.vue';
 import GeoComponent from '@/components/GeoComponent/index.vue';
 import { BASE_API_PATH, TOKEN_KEY } from '@/utils/variable';
 import { LocalStore } from '@/utils/comm';
+import { ItemData, ITypes } from './types';
 
 type Emits = {
     (e: 'update:modelValue', data: string | number | boolean): void;
@@ -93,13 +97,24 @@ const emit = defineEmits<Emits>();
 
 const props = defineProps({
     itemData: {
-        type: Object,
+        type: Object as PropType<ItemData>,
-        default: () => ({ type: 'object' }),
+        default: () => ({}),
     },
+    // 组件双向绑定的值
     modelValue: {
         type: [Number, String],
         default: '',
     },
+    // 组件类型
+    itemType: {
+        type: String,
+        default: () => 'geoPoint',
+    },
+    // 下拉选择框下拉数据
+    options: {
+        type: Array as PropType<DefaultOptionType[]>,
+        default: () => [],
+    },
 });
 // type Props = {
 //     itemData?: Object;
@@ -110,59 +125,23 @@ const props = defineProps({
 //     modelValue: '',
 // });
 
-const componentsType = computed(() => {
+const componentsType = ref<ITypes>({
-    switch (props.itemData.type) {
+    int: 'inputNumber',
-        case 'int':
+    long: 'inputNumber',
-            return 'inputNumber';
+    float: 'inputNumber',
-        case 'long':
+    double: 'inputNumber',
-            return 'inputNumber';
+    string: 'input',
-        case 'float':
+    array: 'input',
-            return 'inputNumber';
+    password: 'input',
-        case 'double':
+    enum: 'select',
-            return 'inputNumber';
+    boolean: 'select',
-        case 'string':
+    date: 'date',
-            return 'input';
+    object: 'object',
-        case 'array':
+    geoPoint: 'geoPoint',
-            return 'input';
+    file: 'file',
-        case 'password':
-            return 'input';
-        case 'enum':
-            return 'select';
-        case 'boolean':
-            return 'select';
-        case 'date':
-            return 'date';
-        case 'object':
-            return 'object';
-        case 'geoPoint':
-            return 'geoPoint';
-        case 'file':
-            return 'file';
-        default:
-            return 'input';
-    }
 });
+const typeMap = new Map(Object.entries(componentsType.value));
 
-const options = computed(() => {
-    if (props.itemData.type === 'boolean') {
-        return [
-            {
-                label: 'true',
-                value: true,
-            },
-            {
-                label: 'false',
-                value: false,
-            },
-        ];
-    }
-    return props.itemData.options
-        ? props.itemData.options.map((m: any) => ({
-              label: m.text,
-              value: m.value,
-          }))
-        : [];
-});
 const myValue = computed({
     get: () => {
         return props.modelValue;
@@ -173,10 +152,6 @@ const myValue = computed({
     },
 });
 
-const handleValueData = (value: any) => {
-    emit('update:modelValue', value);
-};
-
 // 代码编辑器弹窗
 const modalVis = ref<boolean>(false);
 const objectValue = ref<string>('');
@@ -192,7 +167,7 @@ const handleFileChange = (info: UploadChangeParam<UploadFile<any>>) => {
     if (info.file.status === 'done') {
         const url = info.file.response?.result;
         myValue.value = url;
-        handleValueData(url);
+        emit('update:modelValue', url);
     }
 };
 </script>

src/components/ValueItem/types.d.ts

@@ -0,0 +1,19 @@
+export type ItemData = {
+    type: string
+}
+
+export type ITypes = {
+    int: string
+    long: string
+    float: string
+    double: string
+    string: string
+    array: string
+    password: string
+    enum: string
+    boolean: string
+    date: string
+    object: string
+    geoPoint: string
+    file: string
+}

src/utils/consts.ts

@@ -17,3 +17,14 @@ export const STATE_COLOR = {
     // 已停止
     'stopped': '#F2994A'
 }
+
+/**
+ * 卡片组件状态
+ */
+export const StatusColorEnum = {
+  'success': 'success',
+  'error': 'error',
+  'processing': 'processing',
+  'warning': 'warning',
+  'default': 'default',
+}

src/views/demo/index.vue

@@ -3,13 +3,78 @@
     <div class="page-container">
         父级: {{ testValue }}
         <ViewItem v-model="testValue" />
+        <!-- 卡片 -->
+        <br />卡片组件：
+        <a-row :gutter="20">
+            <a-col :span="6">
+                <CardBox
+                    status="disable"
+                    :statusNames="{ disable: StatusColorEnum.error }"
+                    statusText="正常"
+                    :showMask="false"
+                    :actions="actions"
+                >
+                    <template #img>
+                        <img :src="getImage('/device-product.png')" />
+                    </template>
+                    <template #content>
+                        <div class="card-item-heard-name">设备名称</div>
+                        <a-row>
+                            <a-col :span="12">
+                                <div class="card-item-content-text">
+                                    设备类型
+                                </div>
+                                <div>直连设备</div>
+                            </a-col>
+                            <a-col :span="12">
+                                <div class="card-item-content-text">
+                                    产品名称
+                                </div>
+                                <div>测试固定地址</div>
+                            </a-col>
+                        </a-row>
+                    </template>
+                </CardBox>
+            </a-col>
+        </a-row>
     </div>
 </template>
 
 <script setup lang="ts">
 import ViewItem from '@/components/ValueItem/index.vue';
+import CardBox from '@/components/CardBox/index.vue';
+import { StatusColorEnum } from '@/utils/consts';
+import { getImage } from '@/utils/comm';
 
 const testValue = ref('');
+// 卡片按钮
+const actions = ref([
+    {
+        key: 'check',
+        label: '查看',
+    },
+    {
+        key: 'edit',
+        label: '编辑',
+        disabled: true,
+        message: '暂无权限，请联系管理员',
+    },
+    {
+        key: 'delete',
+        label: '删除',
+    },
+]);
 </script>
 
-<style lang="less" scoped></style>
+<style lang="less" scoped>
+.card-item-heard-name {
+    font-weight: 700;
+    font-size: 16px;
+    margin-bottom: 12px;
+}
+
+.card-item-content-text {
+    color: rgba(0, 0, 0, 0.75);
+    font-size: 12px;
+}
+</style>