Commit 697c6232acebb9bbe57bbca08905935e70a2c44f

Authored by fengtao
1 parent 80a237d5

perf: 优化组态,模板选择,根据组织过滤

@@ -44,7 +44,7 @@ export interface DeviceList { @@ -44,7 +44,7 @@ export interface DeviceList {
44 44
45 export type queryPageParams = BasicPageParams & { 45 export type queryPageParams = BasicPageParams & {
46 name?: Nullable<string>; 46 name?: Nullable<string>;
47 - organizationId?: Nullable<number>; 47 + organizationId?: string;
48 isTemplate?: number; 48 isTemplate?: number;
49 }; 49 };
50 50
@@ -10,6 +10,7 @@ @@ -10,6 +10,7 @@
10 <BasicForm @register="registerForm"> 10 <BasicForm @register="registerForm">
11 <!-- 模板选择 --> 11 <!-- 模板选择 -->
12 <template #templateId="{ model }"> 12 <template #templateId="{ model }">
  13 + <span style="display: none">{{ getFieldOrg(model['organizationId']) }}</span>
13 <Select 14 <Select
14 v-model:value="model['templateId']" 15 v-model:value="model['templateId']"
15 placeholder="请选择模板" 16 placeholder="请选择模板"
@@ -35,7 +36,7 @@ @@ -35,7 +36,7 @@
35 </BasicDrawer> 36 </BasicDrawer>
36 </template> 37 </template>
37 <script lang="ts"> 38 <script lang="ts">
38 - import { defineComponent, ref, computed, unref, Ref, onMounted, nextTick } from 'vue'; 39 + import { defineComponent, ref, computed, unref, Ref, onMounted, nextTick, watch } from 'vue';
39 import { BasicForm, useForm } from '/@/components/Form'; 40 import { BasicForm, useForm } from '/@/components/Form';
40 import { Select } from 'ant-design-vue'; 41 import { Select } from 'ant-design-vue';
41 import { formSchema, PC_DEFAULT_CONTENT, PHONE_DEFAULT_CONTENT, Platform } from './center.data'; 42 import { formSchema, PC_DEFAULT_CONTENT, PHONE_DEFAULT_CONTENT, Platform } from './center.data';
@@ -61,11 +62,12 @@ @@ -61,11 +62,12 @@
61 62
62 const selectDeviceProfileRef = ref<InstanceType<typeof SelectDeviceProfile>>(); 63 const selectDeviceProfileRef = ref<InstanceType<typeof SelectDeviceProfile>>();
63 64
64 - const [registerForm, { validate, setFieldsValue, resetFields, updateSchema }] = useForm({  
65 - labelWidth: 120,  
66 - schemas: formSchema,  
67 - showActionButtonGroup: false,  
68 - }); 65 + const [registerForm, { validate, setFieldsValue, resetFields, updateSchema, clearValidate }] =
  66 + useForm({
  67 + labelWidth: 120,
  68 + schemas: formSchema,
  69 + showActionButtonGroup: false,
  70 + });
69 71
70 const updateEnableTemplate = async (enable: number, disabled: boolean) => { 72 const updateEnableTemplate = async (enable: number, disabled: boolean) => {
71 await setFieldsValue({ 73 await setFieldsValue({
@@ -90,6 +92,14 @@ @@ -90,6 +92,14 @@
90 }; 92 };
91 }, 93 },
92 }); 94 });
  95 + await updateSchema({
  96 + field: 'organizationId',
  97 + componentProps: () => {
  98 + return {
  99 + disabled,
  100 + };
  101 + },
  102 + });
93 }; 103 };
94 104
95 const [registerDrawer, { setDrawerProps, closeDrawer }] = useDrawerInner(async (data) => { 105 const [registerDrawer, { setDrawerProps, closeDrawer }] = useDrawerInner(async (data) => {
@@ -107,6 +117,7 @@ @@ -107,6 +117,7 @@
107 ]; 117 ];
108 } 118 }
109 if (data.record.organizationDTO) { 119 if (data.record.organizationDTO) {
  120 + organizationIdStr.value = data.record['organizationId'];
110 await setFieldsValue(data.record); 121 await setFieldsValue(data.record);
111 } else { 122 } else {
112 Reflect.deleteProperty(data.record, 'organizationId'); 123 Reflect.deleteProperty(data.record, 'organizationId');
@@ -135,16 +146,41 @@ @@ -135,16 +146,41 @@
135 //新增修改 146 //新增修改
136 const templateDisabled = ref(false); 147 const templateDisabled = ref(false);
137 onMounted(() => { 148 onMounted(() => {
138 - getTemplate({  
139 - page: 1,  
140 - pageSize: 30,  
141 - }); 149 + getTemplate(
  150 + {
  151 + page: 1,
  152 + pageSize: 30,
  153 + },
  154 + null
  155 + );
142 }); 156 });
143 157
144 const selectTemplateOptions: Ref<any[]> = ref([]); 158 const selectTemplateOptions: Ref<any[]> = ref([]);
145 159
146 - const getTemplate = async (params: queryPageParams) => {  
147 - const { items } = await getPage({ ...params, isTemplate: 1 }); 160 + const organizationIdStr = ref('');
  161 +
  162 + const getFieldOrg = (org: string) => (organizationIdStr.value = org);
  163 +
  164 + watch(
  165 + () => organizationIdStr.value,
  166 + (newValue) => {
  167 + getTemplate(
  168 + {
  169 + page: 1,
  170 + pageSize: 30,
  171 + },
  172 + newValue
  173 + );
  174 + if (!isUpdate.value) {
  175 + setFieldsValue({
  176 + templateId: null,
  177 + });
  178 + }
  179 + }
  180 + );
  181 +
  182 + const getTemplate = async (params: queryPageParams, organizationId) => {
  183 + const { items } = await getPage({ ...params, isTemplate: 1, organizationId });
148 selectTemplateOptions.value = items.map((item) => ({ 184 selectTemplateOptions.value = items.map((item) => ({
149 ...item, 185 ...item,
150 label: item.name, 186 label: item.name,
@@ -154,6 +190,7 @@ @@ -154,6 +190,7 @@
154 const selectOptions: Ref<any[]> = ref([]); 190 const selectOptions: Ref<any[]> = ref([]);
155 191
156 const handleTemplateChange = async (_, option) => { 192 const handleTemplateChange = async (_, option) => {
  193 + clearValidate('templateId');
157 const { productAndDevice } = option; 194 const { productAndDevice } = option;
158 setFieldsValue({ platform: option?.platform }); 195 setFieldsValue({ platform: option?.platform });
159 await nextTick(); 196 await nextTick();
@@ -249,6 +286,7 @@ @@ -249,6 +286,7 @@
249 createPickerSearch, 286 createPickerSearch,
250 selectDeviceProfileRef, 287 selectDeviceProfileRef,
251 templateDisabled, 288 templateDisabled,
  289 + getFieldOrg,
252 }; 290 };
253 }, 291 },
254 }); 292 });