Commit 3b15c727aed0cb907df8ed4f28601475e7545851

Authored by fengtao
1 parent 477468c2

feat:修改报表配置部分代码

1 1 <template>
2 2 <div>
3   - <BasicModal
4   - v-bind="$attrs"
5   - width="55rem"
6   - :height="heightNum"
7   - @register="register"
8   - title="执行设备及属性"
9   - @cancel="handleCancel"
10   - :showOkBtn="false"
11   - >
  3 + <BasicModal v-bind="$attrs" width="55rem" :height="heightNum" @register="register" title="执行设备及属性"
  4 + @cancel="handleCancel" :showOkBtn="false">
12 5 <div>
13 6 <BasicTable @register="registerTable" :dataSource="tableData" />
14 7 </div>
... ... @@ -16,35 +9,38 @@
16 9 </div>
17 10 </template>
18 11 <script setup lang="ts">
19   - import { ref, nextTick } from 'vue';
20   - import { BasicModal, useModalInner } from '/@/components/Modal';
21   - import { BasicTable, useTable } from '/@/components/Table';
22   - import { viewDeviceColumn } from './config.data';
  12 +import { ref, nextTick } from 'vue';
  13 +import { BasicModal, useModalInner } from '/@/components/Modal';
  14 +import { BasicTable, useTable } from '/@/components/Table';
  15 +import { viewDeviceColumn } from './config.data';
  16 +import { reportEditDetailPage } from '/@/api/report/reportManager';
23 17
24   - const heightNum = ref(800);
25   - const tableData: any = ref([]);
26   - const [registerTable] = useTable({
27   - title: '执行设备及属性',
28   - columns: viewDeviceColumn,
29   - showIndexColumn: false,
30   - clickToRowSelect: false,
31   - showTableSetting: false,
32   - bordered: true,
33   - });
34   - const [register] = useModalInner((data) => {
35   - console.log(data);
36   - const getTableData = () => {
37   - for (let i = 0; i < 100; i++) {
38   - tableData.value.push({
39   - device: `设备${i}`,
40   - attribute: `CO${i}、Temp${i}`,
41   - });
  18 +const heightNum = ref(800);
  19 +const tableData: any = ref([]);
  20 +const [registerTable] = useTable({
  21 + title: '执行设备及属性',
  22 + columns: viewDeviceColumn,
  23 + showIndexColumn: false,
  24 + clickToRowSelect: false,
  25 + showTableSetting: false,
  26 + bordered: true,
  27 +});
  28 +const [register] = useModalInner((data) => {
  29 + const getTableData = async () => {
  30 + const res: any = await reportEditDetailPage(data.record.id)
  31 + const resMap = res.data.executeAttributes.map(d => {
  32 + return {
  33 + device: d.name,
  34 + attribute: d.attribute
42 35 }
43   - };
44   - nextTick(() => {
45   - getTableData();
46   - });
  36 + })
  37 + tableData.value = resMap
  38 + };
  39 + nextTick(() => {
  40 + getTableData();
47 41 });
48   - const handleCancel = () => {};
  42 +});
  43 +const handleCancel = () => { };
49 44 </script>
50   -<style></style>
  45 +<style>
  46 +</style>
... ...
... ... @@ -5,9 +5,8 @@
5 5 <Select placeholder="请选择设备" v-model:value="selectDevice" style="width: 100%" :options="selectOptions"
6 6 @change="handleDeviceChange" mode="multiple" labelInValue allowClear notFoundContent="请选择设备" />
7 7 <div style="margin-top: 1.5vh"></div>
8   - <div v-for="(item, index) in deviceList" :key="index">
9   - <DeviceAttrCpns ref="deviceAttrRef" @change="handleChange" :value="item" :orgId="organizationId || orgId" />
10   - </div>
  8 + <DeviceAttrCpns ref="deviceAttrRef" @change="handleChange" :value="deviceList"
  9 + :orgId="organizationId || orgId" />
11 10 </template>
12 11 </BasicForm>
13 12 </BasicDrawer>
... ... @@ -36,17 +35,21 @@ type TDeviceList = {
36 35 name?: string
37 36 }
38 37 const emit = defineEmits(['success', 'register']);
39   -const deviceAttrRef: any = ref(null);
  38 +const deviceAttrRef = ref<InstanceType<typeof DeviceAttrCpns> | null>(null)
40 39 const isUpdate = ref(true);
41 40 const editId = ref('');
42 41 const orgId = ref('');
43 42 const selectOptions: Ref<SelectTypes['options']> = ref([]);
44 43 const selectDevice = ref([]);
45 44 const deviceList: Ref<TDeviceList[]> = ref([]);
  45 +const editDeviceList: Ref<TDeviceList[]> = ref([]);
  46 +let editResData: any = reactive({})
  47 +const watchOrgId = ref('')
46 48
47 49 watch(organizationId, async (newValue: string) => {
48 50 if (!newValue) return;
49 51 //获取设备
  52 + watchOrgId.value = newValue
50 53 const { items } = await screenLinkPageByDeptIdGetDevice({
51 54 organizationId: newValue,
52 55 });
... ... @@ -59,6 +62,7 @@ watch(organizationId, async (newValue: string) => {
59 62 });
60 63 });
61 64 const handleDeviceChange = (e) => {
  65 + console.log(e)
62 66 deviceList.value = e;
63 67 };
64 68 const [registerForm, { validate, setFieldsValue, resetFields }] = useForm({
... ... @@ -71,21 +75,29 @@ const [registerDrawer, { setDrawerProps, closeDrawer }] = useDrawerInner(async (
71 75 await resetFields();
72 76 setDrawerProps({ confirmLoading: false });
73 77 isUpdate.value = !!data?.isUpdate;
  78 + editId.value = '';
  79 + orgId.value = '';
  80 + selectDevice.value = [];
  81 + selectOptions.value = [];
  82 + deviceList.value = [];
  83 + getAttrDevice.value = []
  84 + editDeviceList.value = []
74 85 if (unref(isUpdate)) {
75 86 //编辑回显数据
76   - const editResData: any = await reportEditDetailPage(data.record.id)
77   - console.log(editResData.data)
78   - // //回显基础数据
  87 + editResData = await reportEditDetailPage(data.record.id)
  88 + //回显基础数据
79 89 editId.value = editResData.data.id;
80 90 await setFieldsValue(editResData.data);
81 91 //回显嵌套数据
82 92 setFieldsValue({
83 93 agg: editResData.data.queryCondition?.agg,
84 94 interval: editResData.data.queryCondition?.interval,
  95 + limit: editResData.data.queryCondition?.limit,
  96 + orderBy: editResData.data.queryCondition?.orderBy,
  97 + useStrictDataTypes: editResData.data.queryCondition?.useStrictDataTypes
85 98 });
86 99 //回显设备
87 100 orgId.value = editResData.data.organizationId;
88   - //获取该组织下的设备--排除网关设备
89 101 const { items } = await screenLinkPageByDeptIdGetDevice({
90 102 organizationId: editResData.data.organizationId,
91 103 });
... ... @@ -103,25 +115,23 @@ const [registerDrawer, { setDrawerProps, closeDrawer }] = useDrawerInner(async (
103 115 }
104 116 })
105 117 selectDevice.value = deviceIds;
106   - //回显设备属性 TODO 模拟的数据 待服务端返回
107   - deviceList.value = editResData.data.executeAttributes
  118 + //回显设备属性
  119 + const editDeviceAttr = editResData.data.executeAttributes?.map(item => {
  120 + return {
  121 + label: item.name,
  122 + value: item.device,
  123 + attribute: item.attribute,
  124 + }
  125 + })
  126 + deviceList.value = editDeviceAttr
  127 + editDeviceList.value = editResData.data.executeAttributes
108 128 nextTick(() => { });
109   - } else {
110   - editId.value = '';
111   - orgId.value = '';
112   - selectDevice.value = [];
113   - selectOptions.value = [];
114   - deviceList.value = [];
115 129 }
116 130 });
117 131 const getAttrDevice: Ref<TDeviceList[]> = ref([]);
118 132 const getTitle = computed(() => (!unref(isUpdate) ? '新增报表配置' : '编辑报表配置'));
119 133 const handleChange = (e: any) => {
120   - getAttrDevice.value.push({
121   - device: e.value,
122   - attribute: e.attribute,
123   - name: e.device
124   - });
  134 + getAttrDevice.value = e
125 135 };
126 136 let postObj: any = reactive({});
127 137 let queryCondition: any = reactive({});
... ... @@ -134,8 +144,10 @@ async function handleSubmit() {
134 144 const { createMessage } = useMessage();
135 145 const values = await validate();
136 146 if (!values) return;
137   - if (getAttrDevice.value.length === 0) {
138   - return createMessage.error('请选择设备及其属性');
  147 + if (!unref(isUpdate)) {
  148 + if (getAttrDevice.value.length === 0) {
  149 + return createMessage.error('请选择设备及其属性');
  150 + }
139 151 }
140 152 if (values.executeWay == 0) {
141 153 executeContent = null;
... ... @@ -164,7 +176,7 @@ async function handleSubmit() {
164 176 delete values.cronYear;
165 177 postObj = {
166 178 ...values,
167   - ...{ executeAttributes: getAttrDevice.value },
  179 + ...{ executeAttributes: getAttrDevice.value.length == 0 ? editDeviceList.value : getAttrDevice.value },
168 180 ...{ queryCondition },
169 181 ...{
170 182 startTs: startTs.value
... ...
... ... @@ -40,7 +40,7 @@ export const columns: BasicColumn[] = [
40 40 },
41 41 {
42 42 title: '所属组织',
43   - dataIndex: 'organizationName',
  43 + dataIndex: 'organizationDTO.name',
44 44 width: 120,
45 45 },
46 46 {
... ...
1 1 <template>
2   - <div
3   - v-for="param in dynamicInput.params"
4   - :key="param.key"
5   - style="display: flex; margin-top: 0.25vh"
6   - >
7   - <a-input
8   - :disabled="true"
9   - v-model:value="param.device"
10   - style="width: 50%; margin-bottom: 5px; margin-left: 0vh"
11   - @change="emitChange"
12   - />
13   - <Select
14   - placeholder="请选择设备属性"
15   - v-model:value="param.attribute"
16   - style="width: 50%; margin-left: 1.8vw"
17   - :options="selectOptions"
18   - @change="emitChange"
19   - allowClear
20   - />
  2 + <div v-for="param in dynamicInput.params" :key="param.key" style="display: flex; margin-top: 0.25vh">
  3 + <a-input :disabled="true" v-model:value="param.device" style="width: 38%; margin-bottom: 5px; margin-left: 1vh"
  4 + @change="emitChange" />
  5 + <Select placeholder="请选择设备属性" v-model:value="param.attribute" style="width: 160px; margin-left: 1.8vw"
  6 + :options="selectOptions" @change="emitChange" allowClear />
21 7 </div>
22 8 </template>
23 9 <script lang="ts">
24   - export default {
25   - inheritAttrs: false,
26   - };
  10 +export default {
  11 + inheritAttrs: false,
  12 +};
27 13 </script>
28 14 <script lang="ts" setup>
29   - import { reactive, UnwrapRef, watchEffect, ref } from 'vue';
30   - import { propTypes } from '/@/utils/propTypes';
31   - import { SelectTypes } from 'ant-design-vue/es/select';
32   - import { Select } from 'ant-design-vue';
33   - import { getAttribute } from '/@/api/ruleengine/ruleengineApi';
  15 +import { reactive, UnwrapRef, watchEffect, ref } from 'vue';
  16 +import { propTypes } from '/@/utils/propTypes';
  17 +import { SelectTypes } from 'ant-design-vue/es/select';
  18 +import { Select } from 'ant-design-vue';
  19 +import { getAttribute } from '/@/api/ruleengine/ruleengineApi';
34 20
35   - interface Params {
36   - [x: string]: string;
37   - attribute: string;
38   - device: string;
39   - }
40   - const props = defineProps({
41   - value: propTypes.object.def({}),
42   - orgId: propTypes.string.def(''),
  21 +interface Params {
  22 + [x: string]: string;
  23 + attribute: string;
  24 + device: string;
  25 +}
  26 +const props = defineProps({
  27 + value: propTypes.array.def([]),
  28 + orgId: propTypes.string.def(''),
  29 +});
  30 +const emits = defineEmits(['change', 'update:value']);
  31 +const selectOptions = ref<SelectTypes['options']>([]);
  32 +//获取属性
  33 +const getAttr = async (orgId, deviceId) => {
  34 + const res = await getAttribute(orgId, deviceId.join(','));
  35 + selectOptions.value = res.map((o) => {
  36 + return {
  37 + label: o,
  38 + value: o,
  39 + };
43 40 });
44   - const emits = defineEmits(['change', 'update:value']);
45   - const selectOptions = ref<SelectTypes['options']>([]);
46   - //获取属性
47   - const getAttr = async (orgId, deviceId) => {
48   - const res = await getAttribute(orgId, deviceId);
49   - selectOptions.value = res.map((o) => {
  41 +};
  42 +//动态数据
  43 +const dynamicInput: UnwrapRef<{ params: Params[] }> = reactive({ params: [] });
  44 +//监听传入数据value
  45 +watchEffect(() => {
  46 + initVal();
  47 +});
  48 +/**
  49 + * 初始化数值
  50 + */
  51 +async function initVal() {
  52 + if (props.value && props.orgId) {
  53 + let jsonObj = props.value;
  54 + const deviceId = jsonObj.map((m: any) => m.value);
  55 + await getAttr(props.orgId, deviceId);
  56 + dynamicInput.params = jsonObj.map((item: any) => {
50 57 return {
51   - label: o,
52   - value: o,
53   - };
54   - });
55   - };
56   - //动态数据
57   - const dynamicInput: UnwrapRef<{ params: Params[] }> = reactive({ params: [] });
58   - const rEffect = watchEffect(() => {
59   - initVal();
60   - });
61   - rEffect();
62   - /**
63   - * 初始化数值
64   - */
65   - async function initVal() {
66   - if (props.orgId && props.value.value) {
67   - await getAttr(props.orgId, props.value.value);
68   - dynamicInput.params.push({
69   - device: props.value.label,
70   - value: props.value.value,
71   - attribute: props.value.attribute == '' ? '' : props.value.attribute,
72   - });
73   - }
  58 + attribute: item.attribute,
  59 + device: item.label,
  60 + value: item.value,
  61 + }
  62 + })
74 63 }
75   - /**
76   - * 数值改变
77   - */
78   - function emitChange() {
79   - let obj: any = dynamicInput.params[0];
80   - emits('change', obj);
81   - emits('update:value', obj);
  64 +}
  65 +/**
  66 + * 数值改变
  67 + */
  68 +function emitChange() {
  69 + let obj: any = [];
  70 + if (dynamicInput.params.length > 0) {
  71 + dynamicInput.params.forEach((item: Params) => {
  72 + obj.push({
  73 + attribute: item.attribute,
  74 + device: item.value,
  75 + name: item.device
  76 + });
  77 + });
82 78 }
83   - defineExpose({
84   - getAttr,
85   - });
  79 + emits('change', obj);
  80 + emits('update:value', obj);
  81 +}
86 82 </script>
87 83 <style scoped lang="css">
88   - @import './deviceAttrCpns.css';
  84 +@import './deviceAttrCpns.css';
89 85 </style>
... ...