[Mod 0000] 模型管理页面重新设计采空区表格并对接相关功能

src/components/Form/src/hooks/useFormEvents.ts

@@ -58,10 +58,10 @@ export function useFormEvents({
       let value = values[key];
 
       //antd3升级后，online表单时间控件选中值报js错 TypeError: Reflect.has called on non-object
-      if(!(values instanceof Object)){
+      if (!(values instanceof Object)) {
         return;
       }
-      
+
       const hasKey = Reflect.has(values, key);
 
       value = handleInputNumberValue(schema?.component, value);
@@ -100,14 +100,14 @@ export function useFormEvents({
    */
   function getSchemaByField(field: string): Nullable<FormSchema> {
     if (!isString(field)) {
-      return null
+      return null;
     }
     const schemaList: FormSchema[] = unref(getSchema);
     const index = schemaList.findIndex((schema) => schema.field === field);
     if (index !== -1) {
       return cloneDeep(schemaList[index]);
     }
-    return null
+    return null;
   }
 
   /**
@@ -270,7 +270,7 @@ export function useFormEvents({
     } catch (error) {
       // 代码逻辑说明: 列表查询表单会触发校验错误导致重置失败，原因不明
       emit('submit', {});
-      console.error('query form validate error, please ignore!', error)
+      console.error('query form validate error, please ignore!', error);
       //throw new Error(error);
     }
   }

src/views/system/algorithm/algorithm.api.ts

@@ -27,9 +27,7 @@ export function getCoalSeamAlarmRule(params: any) {
   return defHttp.post({ url: Api.getCoalSeamAlarmRule, params });
 }
 export function updateCoalSeamAlarmRule(params: any) {
-  return defHttp.post({ url: Api.updateCoalSeamAlarmRule, params }).then(() => {
-    message.success('修改成功');
-  });
+  return defHttp.post({ url: Api.updateCoalSeamAlarmRule, params });
 }
 export function addCoalSeamAlarmRule(params: any) {
   return defHttp.post({ url: Api.addCoalSeamAlarmRule, params }).then(() => {
@@ -51,9 +49,7 @@ export function addGoafDataLimit(params: any) {
   });
 }
 export function updateGoafDataLimit(params: any) {
-  return defHttp.post({ url: Api.updateGoafDataLimit, params }).then(() => {
-    message.success('修改成功');
-  });
+  return defHttp.post({ url: Api.updateGoafDataLimit, params });
 }
 export function deleteGoafDataLimit(params: any) {
   return defHttp.post({ url: Api.deleteGoafDataLimit, params }, { joinParamsToUrl: true });

src/views/system/algorithm/algorithm.data.ts

@@ -3,17 +3,6 @@ import { FormSchema } from '/@/components/Form';
 import { BasicColumn } from '/@/components/Table';
 import { Tag } from 'ant-design-vue';
 
-const goafAlarmOptions = [
-  { value: 'ch4Val', label: '甲烷' },
-  { value: 'o2Val', label: '氧气' },
-  { value: 'coVal', label: '一氧化碳' },
-  { value: 'co2Val', label: '二氧化碳' },
-  { value: 'c2h4Val', label: '乙烯' },
-  { value: 'c2h2Val', label: '乙炔' },
-  { value: 'sourcePressure', label: '压差' },
-  { value: 'temperature', label: '温度' },
-];
-
 /** 煤层预警参数 表格配置 */
 export const columnsCoalAlarm: BasicColumn[] = [
   {
@@ -467,32 +456,137 @@ export const schemasCoalAlarm: FormSchema[] = [
     colProps: { span: 12 },
   },
 ];
+
+export const goafAlarmModel = {
+  ch4Val: {
+    alarmField: 'ch4Val',
+    lowerLimit: undefined,
+    upperLimit: undefined,
+  },
+  o2Val: {
+    alarmField: 'o2Val',
+    lowerLimit: undefined,
+    upperLimit: undefined,
+  },
+  coVal: {
+    alarmField: 'coVal',
+    lowerLimit: undefined,
+    upperLimit: undefined,
+  },
+  co2Val: {
+    alarmField: 'co2Val',
+    lowerLimit: undefined,
+    upperLimit: undefined,
+  },
+  c2h4Val: {
+    alarmField: 'c2h4Val',
+    lowerLimit: undefined,
+    upperLimit: undefined,
+  },
+  c2h2Val: {
+    alarmField: 'c2h2Val',
+    lowerLimit: undefined,
+    upperLimit: undefined,
+  },
+  sourcePressure: {
+    alarmField: 'sourcePressure',
+    lowerLimit: undefined,
+    upperLimit: undefined,
+  },
+  temperature: {
+    alarmField: 'temperature',
+    lowerLimit: undefined,
+    upperLimit: undefined,
+  },
+};
+
 export const schemasGoafLimit: FormSchema[] = [
   {
-    label: 'ID',
-    field: 'id',
-    show: false,
+    field: 'ch4Val',
+    label: '甲烷',
+    labelWidth: 118,
     component: 'Input',
+    slot: 'InputRangeGoaf',
+    defaultValue: goafAlarmModel.ch4Val,
+    /** 借用 */
+    groupName: '下限 - 上限',
+    colProps: { span: 12 },
   },
   {
-    label: '监测值:',
-    field: 'alarmField',
-    component: 'Select',
-    defaultValue: 'ch4Val',
-    componentProps: {
-      options: goafAlarmOptions,
-    },
+    field: 'o2Val',
+    label: '氧气',
+    labelWidth: 118,
+    component: 'Input',
+    slot: 'InputRangeGoaf',
+    defaultValue: goafAlarmModel.o2Val,
+    /** 借用 */
+    groupName: '下限 - 上限',
+    colProps: { span: 12 },
   },
   {
-    label: '下限值:',
-    field: 'lowerLimit',
-    defaultValue: 0,
-    component: 'InputNumber',
+    field: 'coVal',
+    label: '一氧化碳',
+    labelWidth: 118,
+    component: 'Input',
+    slot: 'InputRangeGoaf',
+    defaultValue: goafAlarmModel.coVal,
+    /** 借用 */
+    groupName: '下限 - 上限',
+    colProps: { span: 12 },
   },
   {
-    label: '上限值:',
-    field: 'upperLimit',
-    defaultValue: 100,
-    component: 'InputNumber',
+    field: 'co2Val',
+    label: '二氧化碳',
+    labelWidth: 118,
+    component: 'Input',
+    slot: 'InputRangeGoaf',
+    defaultValue: goafAlarmModel.co2Val,
+    /** 借用 */
+    groupName: '下限 - 上限',
+    colProps: { span: 12 },
+  },
+  {
+    field: 'c2h4Val',
+    label: '乙烯',
+    labelWidth: 118,
+    component: 'Input',
+    slot: 'InputRangeGoaf',
+    defaultValue: goafAlarmModel.c2h4Val,
+    /** 借用 */
+    groupName: '下限 - 上限',
+    colProps: { span: 12 },
+  },
+  {
+    field: 'c2h2Val',
+    label: '乙炔',
+    labelWidth: 118,
+    component: 'Input',
+    slot: 'InputRangeGoaf',
+    defaultValue: goafAlarmModel.c2h2Val,
+    /** 借用 */
+    groupName: '下限 - 上限',
+    colProps: { span: 12 },
+  },
+  {
+    field: 'sourcePressure',
+    label: '压力',
+    labelWidth: 118,
+    component: 'Input',
+    slot: 'InputRangeGoaf',
+    defaultValue: goafAlarmModel.sourcePressure,
+    /** 借用 */
+    groupName: '下限 - 上限',
+    colProps: { span: 12 },
+  },
+  {
+    field: 'temperature',
+    label: '温度',
+    labelWidth: 118,
+    component: 'Input',
+    slot: 'InputRangeGoaf',
+    defaultValue: goafAlarmModel.temperature,
+    /** 借用 */
+    groupName: '下限 - 上限',
+    colProps: { span: 12 },
   },
 ];

src/views/system/algorithm/index.vue

@@ -17,9 +17,9 @@
             <button @click="handleEdit({ goafId: record.id, mineCode: last(expandedRowKeys) }, 'goaf')" class="action-btn">
               <SvgIcon name="edit" />
             </button>
-            <button @click="handleAdd({ goafId: record.id, mineCode: last(expandedRowKeys) }, 'goaf')" class="action-btn ml-1">
+            <!-- <button @click="handleAdd({ goafId: record.id, mineCode: last(expandedRowKeys) }, 'goaf')" class="action-btn ml-1">
               <PlusOutlined />
-            </button>
+            </button> -->
             <a-popconfirm title="确认删除？" @confirm="handleDelete(record, 'coal')">
               <button @click="handleDelete(record, 'goaf')" class="action-btn ml-1">
                 <SvgIcon name="delete" />
@@ -33,9 +33,9 @@
         <button @click="handleEdit({ coalSeamId: record.id, mineCode: record.mineCode }, 'coal')" class="action-btn">
           <SvgIcon name="edit" />
         </button>
-        <button @click="handleAdd({ coalSeamId: record.id, mineCode: record.mineCode }, 'coal')" class="action-btn ml-1">
+        <!-- <button @click="handleAdd({ coalSeamId: record.id, mineCode: record.mineCode }, 'coal')" class="action-btn ml-1">
           <PlusOutlined />
-        </button>
+        </button> -->
         <a-popconfirm title="确认删除？" @confirm="handleDelete(record, 'coal')">
           <button class="action-btn ml-1">
             <SvgIcon name="delete" />
@@ -73,6 +73,15 @@
           </a-input-group>
         </a-form-item>
       </template>
+      <template #InputRangeGoaf="{ model, field, schema }">
+        <a-form-item v-if="model[field]">
+          <a-input-group>
+            <a-input-number v-model:value="model[field][`lowerLimit`]" style="width: calc(50% - 100px)" placeholder="-" />
+            <a-input style="width: 200px; border-left: 0; pointer-events: none; color: inherit" :value="schema.groupName" disabled />
+            <a-input-number v-model:value="model[field][`upperLimit`]" style="width: calc(50% - 100px); border-left: 0" placeholder="-" />
+          </a-input-group>
+        </a-form-item>
+      </template>
     </BasicForm>
   </BasicModal>
 </template>
@@ -85,7 +94,7 @@
   import { useForm, BasicForm } from '/@/components/Form';
   import { BasicTable, useTable } from '/@/components/Table';
   import { useListPage } from '/@/hooks/system/useListPage';
-  import { columnsCoalAlarm, columnsGoafLimit, schemasCoalAlarm, schemasGoafLimit, searchFormSchema } from './algorithm.data';
+  import { columnsCoalAlarm, columnsGoafLimit, schemasCoalAlarm, schemasGoafLimit, searchFormSchema, goafAlarmModel } from './algorithm.data';
   import {
     addCoalSeamAlarmRule,
     deleteCoalSeamAlarmRule,
@@ -99,9 +108,9 @@
     getGoafDataLimit,
   } from './algorithm.api';
   import { Flex } from 'ant-design-vue';
-  import { PlusOutlined } from '@ant-design/icons-vue';
-  import { last } from 'lodash-es';
-
+  // import { PlusOutlined } from '@ant-design/icons-vue';
+  import { forEach, isNil, last, map } from 'lodash-es';
+  import { message } from 'ant-design-vue';
   import { SvgIcon } from '/@/components/Icon';
 
   const { prefixCls } = useDesign('algorithm-list');
@@ -165,8 +174,30 @@
       'goaf',
       {
         schemas: schemasGoafLimit,
-        submitFunc: (res) => (res.id ? updateGoafDataLimit(res) : addGoafDataLimit(res)),
-        fetchRecord: (params) => getGoafDataLimit(params).then((r) => last(r)),
+        submitFunc: (res) =>
+          Promise.all(
+            map(res, (item) => {
+              if (item.id) {
+                return updateGoafDataLimit(item);
+              }
+              if (!isNil(item.lowerLimit) || !isNil(item.upperLimit)) {
+                return addGoafDataLimit(item);
+              }
+              return Promise.resolve();
+            })
+          ),
+        fetchRecord: (params) =>
+          getGoafDataLimit(params).then((r) => {
+            const result: any = {};
+            forEach(goafAlarmModel, (item, key) => {
+              result[key] = { ...params, ...item };
+            });
+            forEach(r, (item) => {
+              result[item.alarmField] = item;
+            });
+
+            return result;
+          }),
       },
     ],
   ]);
@@ -174,7 +205,7 @@
     ['coal', { title: '预警参数设置', visible: true, loading: true }],
     ['goaf', { title: '超限预警设置', visible: true, loading: true }],
   ]);
-  const submitResolver = ref<(res: any) => Promise<void>>();
+  const submitResolver = ref<(res: any) => Promise<unknown>>();
   // 点击编辑后，获取对应的表单和弹窗配置
   async function handleEdit(record, sign: string) {
     if (!modalPropsMap.has(sign)) return;
@@ -196,26 +227,26 @@
 
     setModalProps({ loading: false });
   }
-  async function handleAdd(record, sign: string) {
-    if (!modalPropsMap.has(sign)) return;
-    if (!formPropsMap.has(sign)) return;
-    setModalProps(modalPropsMap.get(sign) as ModalProps);
-    const { schemas, submitFunc } = formPropsMap.get(sign)!;
-    await nextTick();
-    await resetSchema(schemas);
+  // async function handleAdd(record, sign: string) {
+  //   if (!modalPropsMap.has(sign)) return;
+  //   if (!formPropsMap.has(sign)) return;
+  //   setModalProps(modalPropsMap.get(sign) as ModalProps);
+  //   const { schemas, submitFunc } = formPropsMap.get(sign)!;
+  //   await nextTick();
+  //   await resetSchema(schemas);
 
-    await nextTick();
+  //   await nextTick();
 
-    await resetFields();
+  //   await resetFields();
 
-    await nextTick();
+  //   await nextTick();
 
-    // 不要使用setFormProps因为它会错误的触发submit方法
-    // await setFormProps({ submitFunc });
-    submitResolver.value = (res) => submitFunc(Object.assign(res, record));
+  //   // 不要使用setFormProps因为它会错误的触发submit方法
+  //   // await setFormProps({ submitFunc });
+  //   submitResolver.value = (res) => submitFunc(Object.assign(res, record));
 
-    setModalProps({ loading: false });
-  }
+  //   setModalProps({ loading: false });
+  // }
 
   const deletionPropsMap = new Map<string, { api: (id: string) => Promise<void> }>([
     ['coal', { api: (id) => deleteCoalSeamAlarmRule({ id }) }],
@@ -228,7 +259,7 @@
   }
 
   const [registerModal, { setModalProps }] = useModal();
-  const [registerForm, { resetFields, setFieldsValue, validate, resetSchema }] = useForm({
+  const [registerForm, { setFieldsValue, validate, resetSchema }] = useForm({
     model: {},
     schemas: schemasCoalAlarm,
     showResetButton: false,
@@ -239,7 +270,11 @@
 
   function handleSubmit() {
     return validate().then((res) => {
-      submitResolver.value && submitResolver.value(res);
+      submitResolver.value &&
+        submitResolver.value(res).then(() => {
+          message.success('操作成功');
+          setModalProps({ visible: false });
+        });
     });
   }
 </script>