Merge branch 'dev' of github.com:jetlinks/jetlinks-ui-vue into dev
This commit is contained in:
easy
commit
5aeeda5433
|
|
@ -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']
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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);
|
||||
marker = new AMap.Marker({
|
||||
position: pointStr ? pointStr.split(',') : center.value,
|
||||
});
|
||||
map.add(marker);
|
||||
position.value = pointStr ? pointStr.split(',') : center.value;
|
||||
};
|
||||
|
||||
/**
|
||||
|
|
@ -96,13 +96,7 @@ const initMap = (e: any) => {
|
|||
*/
|
||||
const clickMap = (e: any) => {
|
||||
mapPoint.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);
|
||||
position.value = [e.lnglat.lng, e.lnglat.lat];
|
||||
};
|
||||
|
||||
/**
|
||||
|
|
|
|||
|
|
@ -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,
|
||||
default: () => ({ type: 'object' }),
|
||||
type: Object as PropType<ItemData>,
|
||||
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(() => {
|
||||
switch (props.itemData.type) {
|
||||
case 'int':
|
||||
return 'inputNumber';
|
||||
case 'long':
|
||||
return 'inputNumber';
|
||||
case 'float':
|
||||
return 'inputNumber';
|
||||
case 'double':
|
||||
return 'inputNumber';
|
||||
case 'string':
|
||||
return 'input';
|
||||
case 'array':
|
||||
return 'input';
|
||||
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 componentsType = ref<ITypes>({
|
||||
int: 'inputNumber',
|
||||
long: 'inputNumber',
|
||||
float: 'inputNumber',
|
||||
double: 'inputNumber',
|
||||
string: 'input',
|
||||
array: 'input',
|
||||
password: 'input',
|
||||
enum: 'select',
|
||||
boolean: 'select',
|
||||
date: 'date',
|
||||
object: 'object',
|
||||
geoPoint: 'geoPoint',
|
||||
file: 'file',
|
||||
});
|
||||
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>
|
||||
|
|
|
|||
|
|
@ -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
|
||||
}
|
||||
|
|
@ -17,3 +17,14 @@ export const STATE_COLOR = {
|
|||
// 已停止
|
||||
'stopped': '#F2994A'
|
||||
}
|
||||
|
||||
/**
|
||||
* 卡片组件状态
|
||||
*/
|
||||
export const StatusColorEnum = {
|
||||
'success': 'success',
|
||||
'error': 'error',
|
||||
'processing': 'processing',
|
||||
'warning': 'warning',
|
||||
'default': 'default',
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
Loading…
Reference in New Issue