add:添加告警管理内容 告警统揽和告警设置 修改公共组件 适配多种情况
This commit is contained in:
zhaohy
@@ -0,0 +1,224 @@
|
||||
<!-- 配置设备告警 -->
|
||||
<template>
|
||||
<ns-view-list-table v-if="show" class="table" v-bind="tableConfig" />
|
||||
<!-- 新增or编辑界面 -->
|
||||
<editConfigureDeviceAlarm ref="editConfigureDeviceAlarms" />
|
||||
</template>
|
||||
<script lang="ts">
|
||||
import { ref } from 'vue';
|
||||
import data from '../notificationManagementMock.json';
|
||||
import editConfigureDeviceAlarm from '../equipmentAlarm/editConfigureDeviceAlarm.vue';
|
||||
|
||||
export default {
|
||||
components: { editConfigureDeviceAlarm },
|
||||
|
||||
setup() {
|
||||
//设备告警数据
|
||||
const configureDeviceAlarmsData = ref({});
|
||||
const show = ref(false);
|
||||
const tableConfig = ref({});
|
||||
const editConfigureDeviceAlarms = ref({});
|
||||
const mockData = ref(data.listData);
|
||||
const doWnload = (url) => {
|
||||
const a = document.createElement('a');
|
||||
document.body.appendChild(a);
|
||||
a.href = encodeURI(url);
|
||||
//设置下载的文件名
|
||||
// a.download = fileName.value;
|
||||
//触发a标签的点击事件，进行下载
|
||||
a.click();
|
||||
};
|
||||
const setconfigureDeviceAlarmsData = (value: any) => {
|
||||
configureDeviceAlarmsData.value = value;
|
||||
show.value = true;
|
||||
tableConfig.value = {
|
||||
title: '告警规则',
|
||||
// api: '/carbon_emission/device/getDeviceList',
|
||||
value: mockData.value,
|
||||
headerActions: [
|
||||
{
|
||||
label: '新增',
|
||||
name: 'RoleTypeAdd',
|
||||
type: 'primary',
|
||||
handle: () => {
|
||||
console.log('新增xxxxxxx');
|
||||
editConfigureDeviceAlarms.value.toggle();
|
||||
},
|
||||
},
|
||||
{
|
||||
label: '导入',
|
||||
name: 'groupImport',
|
||||
type: 'primary',
|
||||
extra: {
|
||||
// api: props.postImportApi, // 导入接口名
|
||||
title: '设备信息', // 弹窗title
|
||||
templateName: 'whiteListUser', // 所使用的文件名称
|
||||
indexName: '设备id', // 匹配类型字段
|
||||
message: [
|
||||
{ label: '1、若必填项未填写，则不能进行导入操作' },
|
||||
{ label: `2、当重复时，则更新数据。` },
|
||||
{ label: '3、数据将从模版的第五行进行导入。' },
|
||||
{ label: '4、文件导入勿超过5MB。' },
|
||||
],
|
||||
},
|
||||
},
|
||||
{
|
||||
label: '导出',
|
||||
name: 'groupExports',
|
||||
type: 'primary',
|
||||
handle: () => {
|
||||
doWnload('/hx-ai-intelligent/asset/file/whiteListUser.xlsx');
|
||||
},
|
||||
},
|
||||
{
|
||||
label: '批量删除',
|
||||
type: 'primary',
|
||||
name: 'userBatchDel',
|
||||
dynamicDisabled: (data: any) => {
|
||||
return data.list.length === 0;
|
||||
},
|
||||
confirm: true,
|
||||
isReload: true,
|
||||
isClearCheck: true,
|
||||
// api: origanizemanage.batchDel,
|
||||
dynamicParams: { userIds: 'userId[]' },
|
||||
},
|
||||
],
|
||||
columns: [
|
||||
{
|
||||
title: '序号',
|
||||
dataIndex: 'address',
|
||||
customRender: (text: any) => {
|
||||
return text.index + 1;
|
||||
},
|
||||
},
|
||||
{
|
||||
title: '规则id',
|
||||
dataIndex: 'id',
|
||||
},
|
||||
{
|
||||
title: '设备信息',
|
||||
dataIndex: 'deviceCode',
|
||||
},
|
||||
{
|
||||
title: '告警点位',
|
||||
dataIndex: 'deviceName',
|
||||
},
|
||||
{
|
||||
title: '判断条件',
|
||||
dataIndex: 'position',
|
||||
},
|
||||
{
|
||||
title: '取值类型',
|
||||
dataIndex: 'position',
|
||||
textEllipsis: true,
|
||||
},
|
||||
{
|
||||
title: '异常描述',
|
||||
dataIndex: 'position',
|
||||
},
|
||||
{
|
||||
title: '启用通知',
|
||||
dataIndex: 'isUse',
|
||||
},
|
||||
],
|
||||
params: {
|
||||
page: 0,
|
||||
pageSize: 10,
|
||||
},
|
||||
// rowSelection: null, 选择按钮
|
||||
columnActions: {
|
||||
title: '操作',
|
||||
actions: [
|
||||
{
|
||||
label: '编辑',
|
||||
name: 'FeedBackDetail',
|
||||
dynamicParams: ['uuid', 'appealType'],
|
||||
handle: (data: any) => {
|
||||
console.log(data, 'xxxxxxx');
|
||||
},
|
||||
},
|
||||
{
|
||||
label: '删除',
|
||||
name: 'FeedBackDetail',
|
||||
dynamicParams: ['uuid', 'appealType'],
|
||||
confirm: true,
|
||||
handle: () => {
|
||||
// mockData.value.splice(0, 1);
|
||||
console.log(data, 'xxxxxxx');
|
||||
},
|
||||
},
|
||||
],
|
||||
},
|
||||
formConfig: {
|
||||
title: value.position,
|
||||
schemas: [
|
||||
{
|
||||
field: 'provider',
|
||||
label: '设备名称',
|
||||
component: 'NsInput',
|
||||
componentProps: {
|
||||
placeholder: '请输入设备名称',
|
||||
},
|
||||
},
|
||||
{
|
||||
field: 'provider',
|
||||
label: '设备点位',
|
||||
component: 'NsSelect',
|
||||
componentProps: {
|
||||
placeholder: '请选择告警优先级',
|
||||
options: [
|
||||
{
|
||||
label: '电流',
|
||||
value: '1',
|
||||
},
|
||||
{
|
||||
label: '电压',
|
||||
value: '0',
|
||||
},
|
||||
],
|
||||
},
|
||||
},
|
||||
{
|
||||
field: 'payWay',
|
||||
label: '启用状态',
|
||||
component: 'NsSelect',
|
||||
componentProps: {
|
||||
placeholder: '请选择启用状态',
|
||||
options: [
|
||||
{
|
||||
label: '启用',
|
||||
value: '1',
|
||||
},
|
||||
{
|
||||
label: '关闭',
|
||||
value: '0',
|
||||
},
|
||||
],
|
||||
},
|
||||
},
|
||||
{
|
||||
field: 'provider',
|
||||
label: '异常描述',
|
||||
component: 'NsInput',
|
||||
componentProps: {
|
||||
placeholder: '请输入异常描述关键字',
|
||||
},
|
||||
},
|
||||
],
|
||||
},
|
||||
// pagination: { pageSizeOptions: false },
|
||||
rowKey: 'id',
|
||||
};
|
||||
};
|
||||
return {
|
||||
configureDeviceAlarmsData,
|
||||
show,
|
||||
doWnload,
|
||||
tableConfig,
|
||||
editConfigureDeviceAlarms,
|
||||
setconfigureDeviceAlarmsData,
|
||||
};
|
||||
},
|
||||
};
|
||||
</script>
|
||||
@@ -0,0 +1,339 @@
|
||||
<template>
|
||||
<ns-drawer
|
||||
v-model:visible="visible"
|
||||
width="520"
|
||||
:title="infoObject?.id ? '编辑' : '新增'"
|
||||
:ok="btnClick"
|
||||
:cancel="handleClose"
|
||||
placement="right">
|
||||
<div style="padding: 18px">
|
||||
<a-form ref="formRef" :model="infoObject" :rules="rules">
|
||||
<a-form-item ref="name" label="站点" name="name">
|
||||
<a-tree-select
|
||||
v-model:value="infoObject.name"
|
||||
show-search
|
||||
style="width: 100%"
|
||||
:dropdown-style="{ maxHeight: '400px', overflow: 'auto' }"
|
||||
placeholder="请选择站点"
|
||||
allow-clear
|
||||
tree-default-expand-all
|
||||
:tree-data="zdTreeData"
|
||||
tree-node-filter-prop="label">
|
||||
<!-- 特殊处理情况 -->
|
||||
<!-- <template #title="{ value: val, label }">
|
||||
<b v-if="val === 'parent 1-1'" style="color: #08c">sss</b>
|
||||
<template v-else>{{ label }}</template>
|
||||
</template> -->
|
||||
</a-tree-select>
|
||||
</a-form-item>
|
||||
<a-form-item label="设备类型" name="sbtype">
|
||||
<a-cascader
|
||||
v-model:value="infoObject.sbtype"
|
||||
:options="sbOptions"
|
||||
:show-search="{ filter }"
|
||||
placeholder="请选择设备类型" />
|
||||
</a-form-item>
|
||||
<a-form-item label="设备名称" name="sbName">
|
||||
<a-select
|
||||
v-model:value="infoObject.sbName"
|
||||
style="width: 100%"
|
||||
:autoClearSearchValue="true"
|
||||
placeholder="请选择设备名称">
|
||||
<a-select-option :key="1" :value="1"> AC001电表 </a-select-option>
|
||||
<a-select-option :key="2" :value="2"> AC002电表 </a-select-option>
|
||||
</a-select>
|
||||
</a-form-item>
|
||||
<a-form-item label="设备点位" name="sbAdress">
|
||||
<a-select
|
||||
v-model:value="infoObject.sbAdress"
|
||||
show-search
|
||||
placeholder="请选择设备点位"
|
||||
style="width: 100%"
|
||||
:options="dwOptions"
|
||||
:filter-option="filterOption"
|
||||
@focus="handleFocus"
|
||||
@change="handleChange" />
|
||||
</a-form-item>
|
||||
<a-form-item label="启用规则" name="delivery">
|
||||
<a-switch
|
||||
v-model:checked="infoObject.delivery"
|
||||
:class="{
|
||||
'blue-background': infoObject.delivery,
|
||||
'grey-background': !infoObject.delivery,
|
||||
}" />
|
||||
</a-form-item>
|
||||
<a-form-item label="取值类型" name="qzType">
|
||||
<a-select
|
||||
v-model:value="infoObject.qzType"
|
||||
show-search
|
||||
placeholder="请选择设备点位"
|
||||
style="width: 100%"
|
||||
:options="qzOptions"
|
||||
:filter-option="filterOption"
|
||||
@change="handleQzChange" />
|
||||
</a-form-item>
|
||||
<a-form-item label="规则类型" name="resource">
|
||||
<a-radio-group v-model:value="infoObject.resource">
|
||||
<a-radio value="1">且(and)</a-radio>
|
||||
<a-radio value="2">或(or)</a-radio>
|
||||
</a-radio-group>
|
||||
</a-form-item>
|
||||
<a-form-item label="异常描述" name="desc">
|
||||
<a-textarea
|
||||
v-model:value="infoObject.desc"
|
||||
style="height: 32px"
|
||||
:autoSize="{ minRows: 1, maxRows: 1 }"
|
||||
show-count
|
||||
:maxlength="30" />
|
||||
</a-form-item>
|
||||
<template v-for="index in infoObject.alarmList?.length" :key="index">
|
||||
<a-form-item :label="`逻辑${index}`" name="alarm">
|
||||
<a-input style="width: 60px" v-model:value="infoObject.alarmList[index - 1].alarm" />
|
||||
</a-form-item>
|
||||
<a-form-item :label="`数值${index}`" name="number">
|
||||
<a-input
|
||||
style="width: 60px"
|
||||
type="number"
|
||||
v-model:value="infoObject.alarmList[index - 1].number" />
|
||||
</a-form-item>
|
||||
</template>
|
||||
</a-form>
|
||||
</div>
|
||||
</ns-drawer>
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
import { NsMessage } from '/nerv-lib/component';
|
||||
import { ref, toRaw } from 'vue';
|
||||
import type { CascaderProps, TreeSelectProps, SelectProps } from 'ant-design-vue';
|
||||
import type { ShowSearchType } from 'ant-design-vue/es/cascader';
|
||||
|
||||
import type { Rule } from 'ant-design-vue/es/form';
|
||||
|
||||
const visible = ref(false);
|
||||
//表单数据
|
||||
const infoObject = ref({
|
||||
id: null,
|
||||
name: null,
|
||||
resource: null,
|
||||
desc: null,
|
||||
sbtype: null,
|
||||
delivery: null,
|
||||
alarmList: [{ alarm: null, number: null }],
|
||||
});
|
||||
const formRef = ref();
|
||||
//站点数
|
||||
const zdTreeData = ref<TreeSelectProps['treeData']>([
|
||||
{
|
||||
label: '铁路总局(T01)',
|
||||
value: 'T01',
|
||||
children: [
|
||||
{
|
||||
label: '济阳站(T0101)',
|
||||
value: 'T0101',
|
||||
},
|
||||
],
|
||||
},
|
||||
]);
|
||||
//设备类型树
|
||||
const sbOptions: CascaderProps['options'] = [
|
||||
{
|
||||
value: '3',
|
||||
label: '3.电梯',
|
||||
children: [
|
||||
{
|
||||
value: '301',
|
||||
label: '301.扶梯',
|
||||
},
|
||||
{
|
||||
value: '302',
|
||||
label: '301.直梯',
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
value: '4',
|
||||
label: '4.冷热源',
|
||||
children: [
|
||||
{
|
||||
value: '401',
|
||||
label: '402.冷水机组',
|
||||
},
|
||||
{
|
||||
value: '402',
|
||||
label: '403.热泵机组',
|
||||
},
|
||||
{
|
||||
value: '403',
|
||||
label: '403.锅炉',
|
||||
},
|
||||
{
|
||||
value: '404',
|
||||
label: '404.水处理机组',
|
||||
},
|
||||
{
|
||||
value: '405',
|
||||
label: '405.板式热交换机组',
|
||||
},
|
||||
],
|
||||
},
|
||||
];
|
||||
//设备点位
|
||||
const dwOptions = ref<SelectProps['options']>([
|
||||
{ value: '电压 (U)', label: '电压 (U)', code: '1' },
|
||||
{ value: '电流 (I)', label: '电流 (I)', code: '2' },
|
||||
{ value: '电流 (I)', label: 'a相电流 (Ia)', code: '3' },
|
||||
]);
|
||||
const filter: ShowSearchType['filter'] = (inputValue: any, path: any) => {
|
||||
return path.some(
|
||||
(option: any) => option.label.toLowerCase().indexOf(inputValue.toLowerCase()) > -1,
|
||||
);
|
||||
};
|
||||
//取值类型
|
||||
const qzOptions = ref<SelectProps['options']>([
|
||||
{ value: '实时值', label: '实时值', code: '1' },
|
||||
{ value: '平均值', label: '平均值', code: '2' },
|
||||
]);
|
||||
//设备点位方法
|
||||
const filterOption = (input: string, option: any) => {
|
||||
console.log('搜索', option.value);
|
||||
return option.value.toLowerCase().indexOf(input.toLowerCase()) >= 0;
|
||||
};
|
||||
const handleFocus = () => {
|
||||
console.log('点击');
|
||||
};
|
||||
const handleChange = (value: string) => {
|
||||
console.log(`selected ${value}`);
|
||||
console.log('选择', infoObject.value.sbAdress);
|
||||
//获得code
|
||||
dwOptions.value.forEach((item) => {
|
||||
if (item.value === value) {
|
||||
console.log('符合', item.code);
|
||||
}
|
||||
});
|
||||
};
|
||||
const handleQzChange = (value: string) => {
|
||||
//获得code
|
||||
qzOptions.value.forEach((item) => {
|
||||
if (item.value === value) {
|
||||
console.log('符合', item.code);
|
||||
}
|
||||
});
|
||||
};
|
||||
const emit = defineEmits(['editObject']);
|
||||
//父调子 页面显示方法
|
||||
const toggle = (value: any) => {
|
||||
//判断 是新增 还是修改
|
||||
if (value) {
|
||||
infoObject.value = value;
|
||||
} else {
|
||||
infoObject.value = {
|
||||
id: null,
|
||||
name: null,
|
||||
resource: null,
|
||||
desc: null,
|
||||
sbtype: null,
|
||||
delivery: null,
|
||||
alarmList: [{ alarm: null, number: null }],
|
||||
};
|
||||
}
|
||||
|
||||
visible.value = !visible.value;
|
||||
};
|
||||
//表单 判断规格
|
||||
const rules: Record<string, Rule[]> = {
|
||||
name: [{ required: true, message: '请选择站点', trigger: 'change' }],
|
||||
sbtype: [{ required: true, message: '请选择设备类型', trigger: 'change' }],
|
||||
delivery: [{ required: true, message: '请选择启用规则', trigger: 'change' }],
|
||||
sbName: [{ required: true, message: '请选择设备名称', trigger: 'change' }],
|
||||
sbAdress: [{ required: true, message: '请选择设备点位', trigger: 'change' }],
|
||||
qzType: [{ required: true, message: '请选择取值类型', trigger: 'change' }],
|
||||
resource: [{ required: true, message: '请选择规则类型', trigger: 'change' }],
|
||||
desc: [{ required: true, message: '请输入异常描述', trigger: 'blur' }],
|
||||
alarm: [{ required: true, message: '请选择逻辑', trigger: 'blur' }],
|
||||
number: [{ required: true, message: '请输入数值', trigger: 'blur' }],
|
||||
};
|
||||
// 开关选择
|
||||
const changeSwitch = () => {
|
||||
console.log(infoObject.value.selectSwitch, '开关');
|
||||
};
|
||||
// 确认按钮
|
||||
const btnClick = () => {
|
||||
console.log(infoObject.value, '数据');
|
||||
console.log(dwOptions.value, '点位');
|
||||
dwOptions.value?.forEach;
|
||||
//数据是否验证通过
|
||||
formRef.value.validate().then(() => {
|
||||
console.log('values', infoObject, toRaw(infoObject));
|
||||
});
|
||||
//调用接口
|
||||
// http
|
||||
// .post(props.api, data)
|
||||
// .then(() => {
|
||||
// isLoading.value = false;
|
||||
// NsMessage.success('操作成功', 1, () => {
|
||||
// navigateBack();
|
||||
// });
|
||||
// })
|
||||
// .catch(() => {
|
||||
// isLoading.value = false;
|
||||
// });
|
||||
};
|
||||
//取消按钮
|
||||
const handleClose = () => {
|
||||
// 清楚校验错误信息
|
||||
formRef.value.resetFields();
|
||||
//对象清空
|
||||
infoObject.value = {
|
||||
id: null,
|
||||
name: null,
|
||||
resource: null,
|
||||
desc: null,
|
||||
sbtype: null,
|
||||
delivery: null,
|
||||
alarmList: [{ alarm: null, number: null }],
|
||||
};
|
||||
visible.value = false;
|
||||
NsMessage.success('操作成功');
|
||||
};
|
||||
defineExpose({
|
||||
toggle,
|
||||
handleClose,
|
||||
dwOptions,
|
||||
formRef,
|
||||
});
|
||||
</script>
|
||||
<style scoped lang="less">
|
||||
.drawerContainer {
|
||||
height: 100%;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
.blue-background.ant-switch-checked {
|
||||
background-color: linear-gradient(
|
||||
180deg,
|
||||
rgba(1, 206, 255, 1) 0%,
|
||||
rgba(0, 150, 229, 1) 100%
|
||||
) !important;
|
||||
}
|
||||
|
||||
.grey-background.ant-switch {
|
||||
background-color: grey !important;
|
||||
}
|
||||
|
||||
.blue-background.ant-switch-checked .ant-switch-handle {
|
||||
background-color: linear-gradient(
|
||||
180deg,
|
||||
rgba(1, 206, 255, 1) 0%,
|
||||
rgba(0, 150, 229, 1) 100%
|
||||
) !important;
|
||||
}
|
||||
|
||||
.grey-background.ant-switch .ant-switch-handle {
|
||||
background-color: grey !important;
|
||||
}
|
||||
/deep/ .ant-form-item-label {
|
||||
z-index: 20;
|
||||
text-align: right;
|
||||
width: 20%;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,255 @@
|
||||
<template>
|
||||
<ns-drawer
|
||||
v-model:visible="visible"
|
||||
width="520"
|
||||
:title="infoObject?.id ? '编辑' : '新增'"
|
||||
:ok="btnClick"
|
||||
:cancel="handleClose"
|
||||
placement="right">
|
||||
<ns-form ref="formRef" :schemas="schemas" :model="infoObject" formLayout="vertical" />
|
||||
<div style="margin-left: 52px">
|
||||
应用规则:
|
||||
<a-switch
|
||||
v-model:checked="infoObject.isUse"
|
||||
:class="{
|
||||
'blue-background': infoObject.isUse,
|
||||
'grey-background': !infoObject.isUse,
|
||||
}"
|
||||
style="margin-left: 6px"
|
||||
@change="changeSwitch" />
|
||||
</div>
|
||||
</ns-drawer>
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
import { ref } from 'vue';
|
||||
import { NsMessage } from '/nerv-lib/component';
|
||||
|
||||
const visible = ref(false);
|
||||
//表单数据
|
||||
const infoObject = ref({});
|
||||
const formRef = ref();
|
||||
const emit = defineEmits(['editObject']);
|
||||
const toggle = (value) => {
|
||||
//判断 是新增 还是修改
|
||||
if (value) {
|
||||
infoObject.value = value;
|
||||
} else {
|
||||
infoObject.value = {
|
||||
accountNo: null,
|
||||
};
|
||||
}
|
||||
console.log('xxxx');
|
||||
|
||||
visible.value = !visible.value;
|
||||
};
|
||||
const schemas = [
|
||||
{
|
||||
field: 'basicInfo',
|
||||
label: '',
|
||||
displayFormItem: false,
|
||||
class: 'ns-form-item-full',
|
||||
component: 'NsChildForm',
|
||||
componentProps: {
|
||||
schemas: [
|
||||
{
|
||||
field: 'accountNo',
|
||||
label: '告警标题',
|
||||
component: 'NsInput',
|
||||
rules: [
|
||||
{
|
||||
required: true,
|
||||
message: '告警标题不能为空',
|
||||
trigger: 'change',
|
||||
},
|
||||
],
|
||||
componentProps: {
|
||||
placeholder: '请输入告警标题',
|
||||
maxLength: 20,
|
||||
},
|
||||
},
|
||||
{
|
||||
field: 'select',
|
||||
label: '重复次数',
|
||||
rules: [
|
||||
{
|
||||
required: true,
|
||||
message: '重复次数不能为空',
|
||||
trigger: 'change',
|
||||
},
|
||||
],
|
||||
component: 'NsSelect',
|
||||
componentProps: {
|
||||
allowClear: true,
|
||||
placeholder: '请选择重复次数',
|
||||
|
||||
options: [
|
||||
{
|
||||
label: '单次',
|
||||
value: 0,
|
||||
},
|
||||
{
|
||||
label: '重复',
|
||||
value: 1,
|
||||
},
|
||||
{
|
||||
label: '累计',
|
||||
value: 2,
|
||||
},
|
||||
],
|
||||
},
|
||||
},
|
||||
{
|
||||
field: 'accountNo',
|
||||
label: '检测时长',
|
||||
component: 'NsInputNumber',
|
||||
rules: [
|
||||
{
|
||||
required: true,
|
||||
validator: (rules, value, cbfn) => {
|
||||
if (value && /^[0-9]*$/.test(value)) {
|
||||
cbfn();
|
||||
} else {
|
||||
cbfn('请输入正确的检测时长');
|
||||
}
|
||||
},
|
||||
trigger: 'change',
|
||||
},
|
||||
],
|
||||
componentProps: {
|
||||
placeholder: '请输入监测时长',
|
||||
// maxLength: 30,
|
||||
},
|
||||
},
|
||||
{
|
||||
field: 'danwei',
|
||||
label: '监测时长单位',
|
||||
component: 'NsSelect',
|
||||
rules: [
|
||||
{
|
||||
required: true,
|
||||
message: '监测时长单位不能为空',
|
||||
trigger: 'change',
|
||||
},
|
||||
],
|
||||
componentProps: {
|
||||
allowClear: true,
|
||||
placeholder: '请选择监测时长单位',
|
||||
options: [
|
||||
{
|
||||
label: '分',
|
||||
value: 1,
|
||||
},
|
||||
{
|
||||
label: '时',
|
||||
value: 2,
|
||||
},
|
||||
{
|
||||
label: '天',
|
||||
value: 3,
|
||||
},
|
||||
],
|
||||
},
|
||||
},
|
||||
{
|
||||
field: 'select',
|
||||
label: '优先级',
|
||||
component: 'NsSelect',
|
||||
rules: [
|
||||
{
|
||||
required: true,
|
||||
message: '优先级不能为空',
|
||||
trigger: 'change',
|
||||
},
|
||||
],
|
||||
componentProps: {
|
||||
allowClear: true,
|
||||
placeholder: '请选择优先级',
|
||||
options: [
|
||||
{
|
||||
label: '紧急',
|
||||
value: 1,
|
||||
},
|
||||
{
|
||||
label: '重要',
|
||||
value: 2,
|
||||
},
|
||||
{
|
||||
label: '一般',
|
||||
value: 3,
|
||||
},
|
||||
],
|
||||
},
|
||||
},
|
||||
],
|
||||
},
|
||||
},
|
||||
];
|
||||
const changeSwitch = () => {
|
||||
console.log(infoObject.value.selectSwitch, '开关');
|
||||
};
|
||||
const btnClick = () => {
|
||||
//表单校验
|
||||
formRef.value.triggerSubmit().then((data: any) => {
|
||||
console.log('校验成功');
|
||||
console.log('data', infoObject.value);
|
||||
visible.value = false;
|
||||
NsMessage.success('操作成功');
|
||||
emit('editObject', null);
|
||||
//调用接口
|
||||
// http
|
||||
// .post(props.api, data)
|
||||
// .then(() => {
|
||||
// isLoading.value = false;
|
||||
// NsMessage.success('操作成功', 1, () => {
|
||||
// navigateBack();
|
||||
// });
|
||||
// })
|
||||
// .catch(() => {
|
||||
// isLoading.value = false;
|
||||
// });
|
||||
});
|
||||
};
|
||||
const handleClose = () => {
|
||||
// 清楚校验错误信息
|
||||
formRef.value.formElRef.clearValidate();
|
||||
console.log(infoObject.value);
|
||||
infoObject.value = {};
|
||||
visible.value = false;
|
||||
NsMessage.success('操作成功');
|
||||
};
|
||||
defineExpose({
|
||||
toggle,
|
||||
handleClose,
|
||||
formRef,
|
||||
});
|
||||
</script>
|
||||
<style scoped lang="less">
|
||||
.drawerContainer {
|
||||
height: 100%;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
.blue-background.ant-switch-checked {
|
||||
background-color: linear-gradient(
|
||||
180deg,
|
||||
rgba(1, 206, 255, 1) 0%,
|
||||
rgba(0, 150, 229, 1) 100%
|
||||
) !important;
|
||||
}
|
||||
|
||||
.grey-background.ant-switch {
|
||||
background-color: grey !important;
|
||||
}
|
||||
|
||||
.blue-background.ant-switch-checked .ant-switch-handle {
|
||||
background-color: linear-gradient(
|
||||
180deg,
|
||||
rgba(1, 206, 255, 1) 0%,
|
||||
rgba(0, 150, 229, 1) 100%
|
||||
) !important;
|
||||
}
|
||||
|
||||
.grey-background.ant-switch .ant-switch-handle {
|
||||
background-color: grey !important;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user