parent
d5b2d1e3b4
commit
39818930d0
|
@ -0,0 +1,17 @@
|
||||||
|
import request from '@/utils/request';
|
||||||
|
import { AxiosPromise } from 'axios';
|
||||||
|
import { RingVO, RingQuery } from '@/api/business/deviceData/ring/types';
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 查询设备数据采集(指环)列表
|
||||||
|
* @param query
|
||||||
|
* @returns {*}
|
||||||
|
*/
|
||||||
|
|
||||||
|
export const listRing = (query?: RingQuery): AxiosPromise<RingVO[]> => {
|
||||||
|
return request({
|
||||||
|
url: '/business/deviceData/page',
|
||||||
|
method: 'post',
|
||||||
|
data: query
|
||||||
|
});
|
||||||
|
};
|
|
@ -0,0 +1,29 @@
|
||||||
|
export interface RingVO {
|
||||||
|
email: string;
|
||||||
|
deviceId: string;
|
||||||
|
deviceMode: string;
|
||||||
|
activationTime: string;
|
||||||
|
heartRate: number;
|
||||||
|
bodyTemp: number;
|
||||||
|
bloodOxygen: number;
|
||||||
|
collectTime: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface RingForm extends BaseEntity {}
|
||||||
|
|
||||||
|
export interface RingQuery extends PageQuery {
|
||||||
|
/**
|
||||||
|
* 设备类型
|
||||||
|
*/
|
||||||
|
deviceType: string;
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 用户邮箱
|
||||||
|
*/
|
||||||
|
email?: string;
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 激活时间
|
||||||
|
*/
|
||||||
|
collectTimeRange?: string[];
|
||||||
|
}
|
|
@ -0,0 +1,17 @@
|
||||||
|
import request from '@/utils/request';
|
||||||
|
import { AxiosPromise } from 'axios';
|
||||||
|
import { UserDeviceVO, UserDeviceQuery } from '@/api/business/userDevice/types';
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 查询用户设备列表
|
||||||
|
* @param query
|
||||||
|
* @returns {*}
|
||||||
|
*/
|
||||||
|
|
||||||
|
export const listUserDevice = (query?: UserDeviceQuery): AxiosPromise<UserDeviceVO[]> => {
|
||||||
|
return request({
|
||||||
|
url: '/business/userDevice/page',
|
||||||
|
method: 'get',
|
||||||
|
params: query
|
||||||
|
});
|
||||||
|
};
|
|
@ -0,0 +1,61 @@
|
||||||
|
export interface UserDeviceVO {
|
||||||
|
/**
|
||||||
|
* 用户邮箱
|
||||||
|
*/
|
||||||
|
email: string;
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 用户设备id
|
||||||
|
*/
|
||||||
|
deviceId: string;
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 设备类型
|
||||||
|
*/
|
||||||
|
deviceType: string;
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 设备名称
|
||||||
|
*/
|
||||||
|
deviceName: string;
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 设备当前模式
|
||||||
|
*/
|
||||||
|
deviceMode: string;
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 设备状态
|
||||||
|
*/
|
||||||
|
deviceStatus: string;
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 激活时间
|
||||||
|
*/
|
||||||
|
activationTime: string;
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface UserDeviceForm extends BaseEntity {
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface UserDeviceQuery extends PageQuery {
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 用户邮箱
|
||||||
|
*/
|
||||||
|
email?: string;
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 设备状态
|
||||||
|
*/
|
||||||
|
deviceStatus?: string;
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 激活时间
|
||||||
|
*/
|
||||||
|
activationTime?: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
|
@ -10,6 +10,7 @@ export interface DictDataVO extends BaseEntity {
|
||||||
dictValue: string;
|
dictValue: string;
|
||||||
cssClass: string;
|
cssClass: string;
|
||||||
listClass: ElTagType;
|
listClass: ElTagType;
|
||||||
|
effect: ElTagEffect;
|
||||||
dictSort: number;
|
dictSort: number;
|
||||||
remark: string;
|
remark: string;
|
||||||
}
|
}
|
||||||
|
@ -21,6 +22,7 @@ export interface DictDataForm {
|
||||||
dictValue: string;
|
dictValue: string;
|
||||||
cssClass: string;
|
cssClass: string;
|
||||||
listClass: ElTagType;
|
listClass: ElTagType;
|
||||||
|
effect: ElTagEffect;
|
||||||
dictSort: number;
|
dictSort: number;
|
||||||
remark: string;
|
remark: string;
|
||||||
}
|
}
|
||||||
|
|
|
@ -25,6 +25,7 @@
|
||||||
: 'primary'
|
: 'primary'
|
||||||
"
|
"
|
||||||
:class="item.elTagClass"
|
:class="item.elTagClass"
|
||||||
|
:effect="item.effect ? item.effect : 'light'"
|
||||||
>
|
>
|
||||||
{{ item.label + ' ' }}
|
{{ item.label + ' ' }}
|
||||||
</el-tag>
|
</el-tag>
|
||||||
|
|
|
@ -1,6 +1,7 @@
|
||||||
import type * as ep from 'element-plus';
|
import type * as ep from 'element-plus';
|
||||||
declare global {
|
declare global {
|
||||||
declare type ElTagType = 'primary' | 'success' | 'info' | 'warning' | 'danger';
|
declare type ElTagType = 'primary' | 'success' | 'info' | 'warning' | 'danger';
|
||||||
|
declare type ElTagEffect = 'light' | 'dark' | 'plain';
|
||||||
declare type ElFormInstance = ep.FormInstance;
|
declare type ElFormInstance = ep.FormInstance;
|
||||||
declare type ElTableInstance = ep.TableInstance;
|
declare type ElTableInstance = ep.TableInstance;
|
||||||
declare type ElUploadInstance = ep.UploadInstance;
|
declare type ElUploadInstance = ep.UploadInstance;
|
||||||
|
|
|
@ -63,6 +63,7 @@ declare global {
|
||||||
value: string;
|
value: string;
|
||||||
elTagType?: ElTagType;
|
elTagType?: ElTagType;
|
||||||
elTagClass?: string;
|
elTagClass?: string;
|
||||||
|
effect?: string;
|
||||||
}
|
}
|
||||||
|
|
||||||
declare interface BaseEntity {
|
declare interface BaseEntity {
|
||||||
|
|
|
@ -16,7 +16,7 @@ export const useDict = (...args: string[]): { [key: string]: DictDataOption[] }
|
||||||
} else {
|
} else {
|
||||||
await getDicts(dictType).then((resp) => {
|
await getDicts(dictType).then((resp) => {
|
||||||
res.value[dictType] = resp.data.map(
|
res.value[dictType] = resp.data.map(
|
||||||
(p): DictDataOption => ({ label: p.dictLabel, value: p.dictValue, elTagType: p.listClass, elTagClass: p.cssClass })
|
(p): DictDataOption => ({ label: p.dictLabel, value: p.dictValue, elTagType: p.listClass, elTagClass: p.cssClass, effect: p.effect})
|
||||||
);
|
);
|
||||||
useDictStore().setDict(dictType, res.value[dictType]);
|
useDictStore().setDict(dictType, res.value[dictType]);
|
||||||
});
|
});
|
||||||
|
|
|
@ -0,0 +1,173 @@
|
||||||
|
<template>
|
||||||
|
<div class="p-2">
|
||||||
|
<transition :enter-active-class="proxy?.animate.searchAnimate.enter" :leave-active-class="proxy?.animate.searchAnimate.leave">
|
||||||
|
<div v-show="showSearch" class="search">
|
||||||
|
<el-form ref="queryFormRef" :model="deviceId" :inline="true" label-width="100px">
|
||||||
|
<el-form-item label="设备ID" prop="deviceId">
|
||||||
|
<el-input v-model="queryParams.deviceId" placeholder="请输入设备ID" clearable style="width: 240px" @keyup.enter="handleQuery" />
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="用户邮箱" prop="email">
|
||||||
|
<el-input v-model="queryParams.email" placeholder="请输入用户邮箱" clearable style="width: 240px" @keyup.enter="handleQuery" />
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="采集时间范围" prop="collectTimeRange">
|
||||||
|
<el-date-picker
|
||||||
|
v-model="queryParams.collectTimeRange"
|
||||||
|
type="datetimerange"
|
||||||
|
start-placeholder="起始时间"
|
||||||
|
end-placeholder="截止时间"
|
||||||
|
format="YYYY-MM-DD HH:mm:ss"
|
||||||
|
value-format="YYYY-MM-DD HH:mm:ss"
|
||||||
|
/>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item>
|
||||||
|
<el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
|
||||||
|
<el-button icon="Refresh" @click="resetQuery">重置</el-button>
|
||||||
|
</el-form-item>
|
||||||
|
</el-form>
|
||||||
|
</div>
|
||||||
|
</transition>
|
||||||
|
|
||||||
|
<el-card shadow="never">
|
||||||
|
<el-table v-loading="loading" :data="ringList">
|
||||||
|
<el-table-column v-if="false" label="主键" align="center" prop="id" />
|
||||||
|
<el-table-column label="用户邮箱" align="center" prop="email" />
|
||||||
|
<el-table-column label="用户设备id" align="center" prop="deviceId" />
|
||||||
|
<el-table-column label="设备当前模式" align="center" prop="deviceMode" >
|
||||||
|
<template #default="scope">
|
||||||
|
<dict-tag :options="biz_device_mode" :value="scope.row.deviceMode" />
|
||||||
|
</template>
|
||||||
|
</el-table-column>
|
||||||
|
<el-table-column label="心率" align="center" prop="heartRate">
|
||||||
|
<template #default="scope">
|
||||||
|
<p class="ring-data-block bc-heartRate" v-text="`${scope.row.heartRate} BPM`"></p>
|
||||||
|
</template>
|
||||||
|
</el-table-column>
|
||||||
|
<el-table-column label="体温" align="center" prop="bodyTemp" >
|
||||||
|
<template #default="scope">
|
||||||
|
<p class="ring-data-block bc-bodyTemp" v-text="`${scope.row.bodyTemp} °C`"></p>
|
||||||
|
</template>
|
||||||
|
</el-table-column>
|
||||||
|
<el-table-column label="血氧" align="center" prop="bloodOxygen">
|
||||||
|
<template #default="scope">
|
||||||
|
<p class="ring-data-block bc-bloodOxygen" v-text="`${scope.row.bloodOxygen * 100} %`"></p>
|
||||||
|
</template>
|
||||||
|
</el-table-column>
|
||||||
|
<el-table-column label="电池电量" align="center" prop="batteryLevel">
|
||||||
|
<template #default="scope">
|
||||||
|
<p class="ring-data-block bc-batteryLevel" v-text="`${scope.row.batteryLevel} %`"></p>
|
||||||
|
</template>
|
||||||
|
</el-table-column>
|
||||||
|
<el-table-column label="采集时间" align="center" prop="collectTime" />
|
||||||
|
</el-table>
|
||||||
|
|
||||||
|
<pagination v-show="total > 0" v-model:page="queryParams.pageNum" v-model:limit="queryParams.pageSize" :total="total" @pagination="getList" />
|
||||||
|
</el-card>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup name="Ring" lang="ts">
|
||||||
|
import { listRing } from '@/api/business/deviceData/ring';
|
||||||
|
import { RingVO, RingQuery, RingForm } from '@/api/business/deviceData/ring/types';
|
||||||
|
|
||||||
|
const { proxy } = getCurrentInstance() as ComponentInternalInstance;
|
||||||
|
const { biz_device_mode } = toRefs<any>(proxy?.useDict('biz_device_mode'));
|
||||||
|
|
||||||
|
const ringList = ref<RingVO[]>([]);
|
||||||
|
const buttonLoading = ref(false);
|
||||||
|
const loading = ref(true);
|
||||||
|
const showSearch = ref(true);
|
||||||
|
const ids = ref<Array<string | number>>([]);
|
||||||
|
const single = ref(true);
|
||||||
|
const multiple = ref(true);
|
||||||
|
const total = ref(0);
|
||||||
|
|
||||||
|
const queryFormRef = ref<ElFormInstance>();
|
||||||
|
const ringFormRef = ref<ElFormInstance>();
|
||||||
|
|
||||||
|
const dialog = reactive<DialogOption>({
|
||||||
|
visible: false,
|
||||||
|
title: ''
|
||||||
|
});
|
||||||
|
|
||||||
|
const initFormData: RingForm = {};
|
||||||
|
const data = reactive<PageData<RingForm, RingQuery>>({
|
||||||
|
form: { ...initFormData },
|
||||||
|
queryParams: {
|
||||||
|
pageNum: 1,
|
||||||
|
pageSize: 10,
|
||||||
|
deviceId: undefined,
|
||||||
|
deviceType: 'Ring',
|
||||||
|
email: undefined,
|
||||||
|
collectTimeRange: []
|
||||||
|
},
|
||||||
|
rules: {}
|
||||||
|
});
|
||||||
|
|
||||||
|
const { queryParams, form, rules } = toRefs(data);
|
||||||
|
|
||||||
|
/** 查询设备数据采集(指环)列表 */
|
||||||
|
const getList = async () => {
|
||||||
|
loading.value = true;
|
||||||
|
const res = await listRing(queryParams.value);
|
||||||
|
ringList.value = res.rows;
|
||||||
|
total.value = res.total;
|
||||||
|
loading.value = false;
|
||||||
|
};
|
||||||
|
|
||||||
|
/** 取消按钮 */
|
||||||
|
const cancel = () => {
|
||||||
|
reset();
|
||||||
|
dialog.visible = false;
|
||||||
|
};
|
||||||
|
|
||||||
|
/** 表单重置 */
|
||||||
|
const reset = () => {
|
||||||
|
form.value = { ...initFormData };
|
||||||
|
ringFormRef.value?.resetFields();
|
||||||
|
};
|
||||||
|
|
||||||
|
/** 搜索按钮操作 */
|
||||||
|
const handleQuery = () => {
|
||||||
|
queryParams.value.pageNum = 1;
|
||||||
|
getList();
|
||||||
|
};
|
||||||
|
|
||||||
|
/** 重置按钮操作 */
|
||||||
|
const resetQuery = () => {
|
||||||
|
queryFormRef.value?.resetFields();
|
||||||
|
handleQuery();
|
||||||
|
};
|
||||||
|
|
||||||
|
const route = useRoute();
|
||||||
|
onMounted(() => {
|
||||||
|
const deviceId = route.query.deviceId;
|
||||||
|
if (deviceId) {
|
||||||
|
queryParams.value.deviceId = deviceId;
|
||||||
|
}
|
||||||
|
getList();
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.ring-data-block {
|
||||||
|
text-align: center;
|
||||||
|
margin: 0px auto;
|
||||||
|
color: white;
|
||||||
|
font-weight: bold;
|
||||||
|
padding: 6px;
|
||||||
|
border-radius: 20px;
|
||||||
|
width: 90px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.bc-heartRate {
|
||||||
|
background-color: rgba(255, 60, 60, 0.8);
|
||||||
|
}
|
||||||
|
.bc-bodyTemp {
|
||||||
|
background-color: rgba(251, 160, 0, 0.8);
|
||||||
|
}
|
||||||
|
.bc-bloodOxygen {
|
||||||
|
background-color: rgba(45, 180, 255, 0.8);
|
||||||
|
}
|
||||||
|
.bc-batteryLevel {
|
||||||
|
background-color: rgb(85, 206, 41);
|
||||||
|
}
|
||||||
|
</style>
|
|
@ -0,0 +1,150 @@
|
||||||
|
<template>
|
||||||
|
<div class="p-2">
|
||||||
|
<transition :enter-active-class="proxy?.animate.searchAnimate.enter" :leave-active-class="proxy?.animate.searchAnimate.leave">
|
||||||
|
<div class="search" v-show="showSearch">
|
||||||
|
<el-form :model="queryParams" ref="queryFormRef" :inline="true" label-width="68px">
|
||||||
|
<el-form-item label="激活时间" prop="activationTime">
|
||||||
|
<el-date-picker clearable
|
||||||
|
v-model="queryParams.activationTime"
|
||||||
|
type="date"
|
||||||
|
value-format="YYYY-MM-DD"
|
||||||
|
placeholder="请选择激活时间"
|
||||||
|
/>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item>
|
||||||
|
<el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
|
||||||
|
<el-button icon="Refresh" @click="resetQuery">重置</el-button>
|
||||||
|
</el-form-item>
|
||||||
|
</el-form>
|
||||||
|
</div>
|
||||||
|
</transition>
|
||||||
|
|
||||||
|
<el-card shadow="never">
|
||||||
|
<el-table v-loading="loading" :data="userDeviceList">
|
||||||
|
<el-table-column label="用户邮箱" align="center" prop="email" />
|
||||||
|
<el-table-column label="设备ID" align="center" prop="deviceId" />
|
||||||
|
<el-table-column label="设备名称" align="center" prop="deviceName" />
|
||||||
|
<el-table-column label="设备类型" align="center" prop="deviceType" >
|
||||||
|
<template #default="scope">
|
||||||
|
<dict-tag :options="biz_device_type" :value="scope.row.deviceType" />
|
||||||
|
</template>
|
||||||
|
</el-table-column>
|
||||||
|
<el-table-column label="设备当前模式" align="center" prop="deviceMode" >
|
||||||
|
<template #default="scope">
|
||||||
|
<dict-tag :options="biz_device_mode" :value="scope.row.deviceMode" />
|
||||||
|
</template>
|
||||||
|
</el-table-column>
|
||||||
|
<el-table-column label="设备状态" align="center" prop="deviceStatus" >
|
||||||
|
<template #default="scope">
|
||||||
|
<dict-tag :options="biz_device_status" :value="scope.row.deviceStatus" />
|
||||||
|
</template>
|
||||||
|
</el-table-column>
|
||||||
|
<el-table-column label="激活时间" align="center" prop="activationTime" width="180">
|
||||||
|
<template #default="scope">
|
||||||
|
<span>{{ parseTime(scope.row.activationTime, '{y}-{m}-{d}') }}</span>
|
||||||
|
</template>
|
||||||
|
</el-table-column>
|
||||||
|
<el-table-column label="操作" align="center" class-name="small-padding fixed-width">
|
||||||
|
<template #default="scope">
|
||||||
|
<el-button v-if="scope.row.deviceId" link type="primary" @click="jumpToDeviceData(scope.row.deviceId)">
|
||||||
|
<span v-text="'查看数据'"></span>
|
||||||
|
</el-button>
|
||||||
|
</template>
|
||||||
|
</el-table-column>
|
||||||
|
</el-table>
|
||||||
|
|
||||||
|
<pagination
|
||||||
|
v-show="total>0"
|
||||||
|
:total="total"
|
||||||
|
v-model:page="queryParams.pageNum"
|
||||||
|
v-model:limit="queryParams.pageSize"
|
||||||
|
@pagination="getList"
|
||||||
|
/>
|
||||||
|
</el-card>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup name="UserDevice" lang="ts">
|
||||||
|
import { listUserDevice, getUserDevice, delUserDevice, addUserDevice, updateUserDevice } from '@/api/business/userDevice';
|
||||||
|
import { UserDeviceVO, UserDeviceQuery, UserDeviceForm } from '@/api/business/userDevice/types';
|
||||||
|
import router from "@/router";
|
||||||
|
|
||||||
|
const { proxy } = getCurrentInstance() as ComponentInternalInstance;
|
||||||
|
const { biz_device_type, biz_device_status, biz_device_mode } = toRefs<any>(proxy?.useDict('biz_device_type', 'biz_device_status', 'biz_device_mode'));
|
||||||
|
|
||||||
|
const userDeviceList = ref<UserDeviceVO[]>([]);
|
||||||
|
const buttonLoading = ref(false);
|
||||||
|
const loading = ref(true);
|
||||||
|
const showSearch = ref(true);
|
||||||
|
const ids = ref<Array<string | number>>([]);
|
||||||
|
const single = ref(true);
|
||||||
|
const multiple = ref(true);
|
||||||
|
const total = ref(0);
|
||||||
|
|
||||||
|
const queryFormRef = ref<ElFormInstance>();
|
||||||
|
const userDeviceFormRef = ref<ElFormInstance>();
|
||||||
|
|
||||||
|
const dialog = reactive<DialogOption>({
|
||||||
|
visible: false,
|
||||||
|
title: ''
|
||||||
|
});
|
||||||
|
|
||||||
|
const initFormData: UserDeviceForm = {
|
||||||
|
}
|
||||||
|
const data = reactive<PageData<UserDeviceForm, UserDeviceQuery>>({
|
||||||
|
form: {...initFormData},
|
||||||
|
queryParams: {
|
||||||
|
pageNum: 1,
|
||||||
|
pageSize: 10,
|
||||||
|
email: undefined,
|
||||||
|
deviceStatus: undefined,
|
||||||
|
activationTime: undefined
|
||||||
|
},
|
||||||
|
rules: {
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
const { queryParams, form, rules } = toRefs(data);
|
||||||
|
|
||||||
|
/** 查询用户设备列表 */
|
||||||
|
const getList = async () => {
|
||||||
|
loading.value = true;
|
||||||
|
const res = await listUserDevice(queryParams.value);
|
||||||
|
userDeviceList.value = res.rows;
|
||||||
|
total.value = res.total;
|
||||||
|
loading.value = false;
|
||||||
|
}
|
||||||
|
|
||||||
|
/** 取消按钮 */
|
||||||
|
const cancel = () => {
|
||||||
|
reset();
|
||||||
|
dialog.visible = false;
|
||||||
|
}
|
||||||
|
|
||||||
|
/** 表单重置 */
|
||||||
|
const reset = () => {
|
||||||
|
form.value = {...initFormData};
|
||||||
|
userDeviceFormRef.value?.resetFields();
|
||||||
|
}
|
||||||
|
|
||||||
|
/** 搜索按钮操作 */
|
||||||
|
const handleQuery = () => {
|
||||||
|
queryParams.value.pageNum = 1;
|
||||||
|
getList();
|
||||||
|
}
|
||||||
|
|
||||||
|
/** 重置按钮操作 */
|
||||||
|
const resetQuery = () => {
|
||||||
|
queryFormRef.value?.resetFields();
|
||||||
|
handleQuery();
|
||||||
|
}
|
||||||
|
|
||||||
|
/** 跳转至设备数据 */
|
||||||
|
const jumpToDeviceData = (deviceId: any) => {
|
||||||
|
router.push({ path: '/deviceData/ring', query: { deviceId } });
|
||||||
|
}
|
||||||
|
|
||||||
|
onMounted(() => {
|
||||||
|
getList();
|
||||||
|
});
|
||||||
|
</script>
|
|
@ -49,16 +49,8 @@
|
||||||
<el-table-column v-if="false" label="字典编码" align="center" prop="dictCode" />
|
<el-table-column v-if="false" label="字典编码" align="center" prop="dictCode" />
|
||||||
<el-table-column label="字典标签" align="center" prop="dictLabel">
|
<el-table-column label="字典标签" align="center" prop="dictLabel">
|
||||||
<template #default="scope">
|
<template #default="scope">
|
||||||
<span
|
<span v-if="scope.row.listClass === '' || scope.row.listClass === 'default'">{{ scope.row.dictLabel }}</span>
|
||||||
v-if="(scope.row.listClass === '' || scope.row.listClass === 'default') && (scope.row.cssClass === '' || scope.row.cssClass == null)"
|
<el-tag v-else :type="scope.row.listClass === 'primary' ? '' : scope.row.listClass" :effect="scope.row.effect">{{ scope.row.dictLabel }}</el-tag>
|
||||||
>{{ scope.row.dictLabel }}</span
|
|
||||||
>
|
|
||||||
<el-tag
|
|
||||||
v-else
|
|
||||||
:type="scope.row.listClass === 'primary' || scope.row.listClass === 'default' ? 'primary' : scope.row.listClass"
|
|
||||||
:class="scope.row.cssClass"
|
|
||||||
>{{ scope.row.dictLabel }}</el-tag
|
|
||||||
>
|
|
||||||
</template>
|
</template>
|
||||||
</el-table-column>
|
</el-table-column>
|
||||||
<el-table-column label="字典键值" align="center" prop="dictValue" />
|
<el-table-column label="字典键值" align="center" prop="dictValue" />
|
||||||
|
@ -111,6 +103,16 @@
|
||||||
></el-option>
|
></el-option>
|
||||||
</el-select>
|
</el-select>
|
||||||
</el-form-item>
|
</el-form-item>
|
||||||
|
<el-form-item label="主题" prop="effect">
|
||||||
|
<el-select v-model="form.effect">
|
||||||
|
<el-option
|
||||||
|
v-for="item in effectOptions"
|
||||||
|
:key="item.value"
|
||||||
|
:label="item.label + '(' + item.value + ')'"
|
||||||
|
:value="item.value"
|
||||||
|
></el-option>
|
||||||
|
</el-select>
|
||||||
|
</el-form-item>
|
||||||
<el-form-item label="备注" prop="remark">
|
<el-form-item label="备注" prop="remark">
|
||||||
<el-input v-model="form.remark" type="textarea" placeholder="请输入内容"></el-input>
|
<el-input v-model="form.remark" type="textarea" placeholder="请输入内容"></el-input>
|
||||||
</el-form-item>
|
</el-form-item>
|
||||||
|
@ -164,12 +166,20 @@ const listClassOptions = ref<Array<{ value: string; label: string }>>([
|
||||||
{ value: 'danger', label: '危险' }
|
{ value: 'danger', label: '危险' }
|
||||||
]);
|
]);
|
||||||
|
|
||||||
|
// 数据标签主题
|
||||||
|
const effectOptions = ref<Array<{ value: string, label: string }>>([
|
||||||
|
{ value: "light", label: "亮色" },
|
||||||
|
{ value: "dark", label: "暗色" },
|
||||||
|
{ value: "plain", label: "扁平" },
|
||||||
|
]);
|
||||||
|
|
||||||
const initFormData: DictDataForm = {
|
const initFormData: DictDataForm = {
|
||||||
dictCode: undefined,
|
dictCode: undefined,
|
||||||
dictLabel: '',
|
dictLabel: '',
|
||||||
dictValue: '',
|
dictValue: '',
|
||||||
cssClass: '',
|
cssClass: '',
|
||||||
listClass: 'primary',
|
listClass: 'primary',
|
||||||
|
effect: 'light',
|
||||||
dictSort: 0,
|
dictSort: 0,
|
||||||
remark: ''
|
remark: ''
|
||||||
};
|
};
|
||||||
|
|
|
@ -22,7 +22,7 @@
|
||||||
"compilerOptions": {
|
"compilerOptions": {
|
||||||
"types": ["element-plus/global"]
|
"types": ["element-plus/global"]
|
||||||
},
|
},
|
||||||
"types": ["vite/client"],
|
"types": ["vite/client", "element-plus/global"],
|
||||||
"skipLibCheck": true,
|
"skipLibCheck": true,
|
||||||
"removeComments": true,
|
"removeComments": true,
|
||||||
// 允许默认导入
|
// 允许默认导入
|
||||||
|
|
Loading…
Reference in New Issue