feat: 增加Sample Type、Sample、QC Flags字段，及相应处理，重构部分代码

src/views/abnormalAlarm/analysisMonitor/alarmRules/config/index.js

@@ -0,0 +1,68 @@
+export const SampleTypeOptions = [
+  {
+    label: 'All',
+    value: 'All'
+  },
+  {
+    label: 'Gamma',
+    value: 'Gamma'
+  },
+  {
+    label: 'Beta',
+    value: 'Beta'
+  }
+]
+
+export const SampleMap = {
+  All: ['P', 'B', 'G', 'C'],
+  Gamma: ['P', 'G'],
+  Beta: ['B', 'C']
+}
+
+export const MenuNameMap = {
+  P: 'Particulate',
+  G: 'Noble Gas HPGe',
+  B: 'Noble Gas Beta-Gamma',
+  C: 'Self-Station'
+}
+
+export const QcFlagOptions = {
+  P: [
+    { label: 'acq_time (h)', isArray: false, value: 18, prop: 'acqTime' },
+    { label: 'airFlow (m3/h)', isArray: false, value: 500, prop: 'airFlow' },
+    { label: 'decay_time (h)', isArray: false, value: 26.4, prop: 'decayTime' },
+    { label: 'samp_vol (m3)', isArray: false, value: 10800, prop: 'sampVol' },
+    { label: 'Be7-FWHM (keV)', isArray: false, value: 1.7, prop: 'be7FWHM' },
+    {
+      label: 'Ba140-MDC (uBq/m3)',
+      isArray: false,
+      value: 30,
+      prop: 'ba140MDC'
+    },
+    { label: 'col_time (h)', isArray: true, value: [21.6, 26.4], prop: 'colTime' }
+  ],
+  B: [
+    { label: 'Xenon Volume (ml)', isArray: false, value: 0.2, prop: 'xeVol' },
+    { label: 'Collection Time (h)', isArray: true, value: [6.0, 24.0], prop: 'colTime' },
+    { label: 'Acqusition Time (h)', isArray: true, value: [6.0, 24.0], prop: 'acqTime' },
+    { label: 'MDC for Xe133 (mBq/m3)', isArray: true, value: [0.001, 5], prop: 'xe133MDC' },
+    { label: 'Xe131m Flag', isArray: false, value: 1, disabled: true, prop: 'xe131mFlag' },
+    { label: 'Xe133m Flag', isArray: false, value: 1, disabled: true, prop: 'xe133mFlag' },
+    { label: 'Xe133 Flag', isArray: false, value: 1, disabled: true, prop: 'xe133Flag' },
+    { label: 'Xe135 Flag', isArray: false, value: 1, disabled: true, prop: 'xe135Flag' }
+  ],
+  G: [
+    { label: 'airFlow (m3/h)', isArray: false, value: 0.4, prop: 'airFlow' },
+    { label: 'decay_time (h)', isArray: false, value: 10.0, prop: 'decayTime' },
+    { label: 'samp_vol (m3)', isArray: false, value: 10, prop: 'sampVol' },
+    { label: 'Xe133-MDC (uBq/m3)', isArray: false, value: 1000, prop: 'xe133MDC' },
+    { label: 'acq_time (h)', isArray: true, value: [16.0, 24.0], prop: 'acqTime' },
+    { label: 'col_time (h)', isArray: true, value: [21.6, 24.0], prop: 'colTime' },
+  ],
+  C: [
+    { label: 'Xe131m Flag', isArray: false, value: 1, disabled: true, prop: 'xe131mFlag' },
+    { label: 'Xe133m Flag', isArray: false, value: 1, disabled: true, prop: 'xe133mFlag' },
+    { label: 'Xe133 Flag', isArray: false, value: 1, disabled: true, prop: 'xe133Flag' },
+    { label: 'Xe135 Flag', isArray: false, value: 1, disabled: true, prop: 'xe135Flag' }
+  ]
+}

src/views/abnormalAlarm/analysisMonitor/alarmRules/index.vue

@@ -154,6 +154,8 @@
         @showSizeChange="handleSizeChange"
       />
     </div>
+
+    <!-- 新增/编辑规则弹窗 -->
     <a-modal
       :title="isAdd ? 'Add Rule' : 'Edit Rule'"
       :width="800"
@@ -161,52 +163,74 @@
       :maskClosable="false"
       @cancel="onCancel"
     >
-      <a-form :form="form" :label-col="labelCol" :wrapper-col="wrapperCol">
-        <a-form-item label="Name">
-          <a-input
-            v-decorator="[
-              'name',
-              {
-                rules: [{ required: true, message: 'Please input name!' }],
-                initialVale: this.formVal.name,
-              },
-            ]"
-          />
-        </a-form-item>
+      <a-form-model
+        ref="form"
+        :model="formVal"
+        :label-col="labelCol"
+        :wrapper-col="wrapperCol"
+        style="max-height: calc(100vh - 341px); overflow: hidden auto"
+      >
+        <a-form-model-item label="Name" prop="name" :rules="[{ required: true, message: 'Please input name!' }]">
+          <a-input v-model="formVal.name" />
+        </a-form-model-item>
 
-        <a-form-item label="Source">
-          <dic-select
-            type="checkbox"
-            dictCode="alarm_analyse_rule_source"
-            v-decorator="[
-              'source',
-              {
-                rules: [{ required: true }],
-                initialVale: this.formVal.source,
-              },
-            ]"
-          />
-        </a-form-item>
-        <a-form-item label="Station">
+        <a-form-model-item label="Source" prop="source" :rules="[{ required: true, message: 'Please select source!' }]">
+          <dic-select type="checkbox" dictCode="alarm_analyse_rule_source" v-model="formVal.source" />
+        </a-form-model-item>
+        <a-row>
+          <a-col :span="12">
+            <a-form-model-item
+              label="Sample Type"
+              prop="sampleType"
+              :rules="[{ required: true, message: 'Please select sample type!' }]"
+              :label-col="{ span: 8 }"
+              :wrapper-col="{ span: 16 }"
+            >
+              <a-select v-model="formVal.sampleType" @change="handleSampleTypeChange" style="width: 100%">
+                <a-select-option v-for="item in SampleTypeOptions" :key="item.value" :value="item.value">
+                  {{ item.label }}
+                </a-select-option>
+              </a-select>
+            </a-form-model-item>
+          </a-col>
+          <a-col :span="12">
+            <a-form-model-item
+              label="Sample"
+              prop="sample"
+              :rules="[{ required: true, message: 'Please select sample!' }]"
+              :label-col="{ span: 8 }"
+              :wrapper-col="{ span: 12 }"
+            >
+              <a-select v-model="formVal.sample" @change="handleSampleChange" style="width: 100%">
+                <a-select-option v-for="item in sampleList" :key="item" :value="item">
+                  {{ item }}
+                </a-select-option>
+              </a-select>
+            </a-form-model-item>
+          </a-col>
+        </a-row>
+        <a-form-model-item
+          label="Station"
+          prop="station"
+          :rules="[{ required: true, message: 'Please select station!' }]"
+        >
           <a-select
             class="form-select"
             mode="multiple"
             placeholder="select..."
             :filter-option="filterOption"
             show-arrow
-            :options="stationOptions"
-            v-decorator="[
-              'station',
-              {
-                rules: [{ required: true, message: 'Please select station' }],
-                initialVale: this.formVal.station,
-              },
-            ]"
+            :options="filteredStationList"
+            v-model="formVal.station"
           >
             <img slot="suffixIcon" src="@/assets/images/global/select-down.png" alt="" />
           </a-select>
-        </a-form-item>
-        <a-form-item label="Nuclide">
+        </a-form-model-item>
+        <a-form-model-item
+          label="Nuclide"
+          prop="nuclide"
+          :rules="[{ required: true, message: 'Please select nuclide!' }]"
+        >
           <a-select
             class="form-select"
             mode="multiple"
@@ -215,75 +239,85 @@
             :filter-option="filterOption"
             show-arrow
             :options="nuclideOptions"
-            v-decorator="[
-              'nuclide',
-              {
-                rules: [{ required: true, message: 'Please select nuclide' }],
-                initialVale: this.formVal.nuclide,
-              },
-            ]"
+            v-model="formVal.nuclide"
           >
             <img slot="suffixIcon" src="@/assets/images/global/select-down.png" alt="" />
           </a-select>
-        </a-form-item>
-        <a-form-item label="Qualifier">
-          <dic-select
-            type="checkbox"
-            dictCode="spectral_qualifier"
-            v-decorator="[
-              'qualifier',
-              {
-                rules: [{ required: true }],
-                initialVale: this.formVal.qualifier,
-              },
-            ]"
-          />
-        </a-form-item>
-        <a-form-item label="Condition">
+        </a-form-model-item>
+        <a-form-model-item
+          label="Coefficient"
+          prop="coefficient"
+          :rules="[{ required: true, message: 'Please input coefficient!' }]"
+        >
+          <a-input type="number" v-model="formVal.coefficient"></a-input>
+        </a-form-model-item>
+        <a-form-model-item v-if="formVal.sample" label="Qc Flags" style="margin-bottom: 0">
+          <a-row :gutter="10">
+            <a-col
+              class="qc-item"
+              :span="item.disabled ? 6 : item.isArray ? 24 : 12"
+              v-for="(item, index) in qcFlagList"
+              :key="index"
+            >
+              <a-checkbox v-model="item.checked"></a-checkbox>
+              <span>{{ item.label }}</span>
+              <!-- 如果有两个值 -->
+              <template v-if="item.isArray">
+                <a-input type="number" v-model="item.value[0]" placeholder="min" :readOnly="!item.checked"></a-input>
+                <a-input type="number" v-model="item.value[1]" placeholder="max" :readOnly="!item.checked"></a-input>
+              </template>
+              <template v-else>
+                <a-input
+                  v-if="!item.disabled"
+                  type="number"
+                  v-model="item.value"
+                  :readOnly="item.disabled || !item.checked"
+                  placeholder="请输入..."
+                />
+              </template>
+            </a-col>
+          </a-row>
+        </a-form-model-item>
+        <a-form-model-item
+          label="Qualifier"
+          prop="qualifier"
+          :rules="[{ required: true, message: 'Please select qualifier!' }]"
+        >
+          <dic-select type="checkbox" dictCode="spectral_qualifier" v-model="formVal.qualifier" />
+        </a-form-model-item>
+        <a-form-model-item
+          label="Condition"
+          prop="condition"
+          :rules="[{ required: true, message: 'Please select condition!' }]"
+        >
           <dic-select
             type="checkbox"
             layout="vertical"
             dictCode="alarm_analyse_rule_condition"
-            v-decorator="[
-              'condition',
-              {
-                rules: [{ required: true }],
-                initialVale: this.formVal.condition,
-              },
-            ]"
+            v-model="formVal.condition"
           >
           </dic-select>
-        </a-form-item>
-        <a-form-item label="Contact Group">
+        </a-form-model-item>
+        <a-form-model-item
+          label="Contact Group"
+          prop="contactGroup"
+          :rules="[{ required: true, message: 'Please select contact group!' }]"
+        >
           <a-select
             class="form-select"
             :options="contactGroupOptions"
             show-arrow
             allowClear
             placeholder="select..."
-            v-decorator="[
-              'contactGroup',
-              {
-                rules: [{ required: true }],
-                initialVale: this.formVal.contactGroup,
-              },
-            ]"
+            v-model="formVal.contactGroup"
           >
             <img slot="suffixIcon" src="@/assets/images/global/select-down.png" alt="" />
           </a-select>
-        </a-form-item>
-        <a-form-item label="Remark">
-          <a-input
-            type="textarea"
-            v-decorator="[
-              'remark',
-              {
-                initialVale: this.formVal.remark,
-              },
-            ]"
-          />
-        </a-form-item>
-      </a-form>
+        </a-form-model-item>
+        <a-form-model-item label="Remark">
+          <a-input type="textarea" v-model="formVal.remark" />
+        </a-form-model-item>
+      </a-form-model>
       <template slot="footer">
         <a-space class="operators" :size="20">
           <a-button type="success" @click="onSave">Save</a-button>
@@ -291,12 +325,32 @@
         </a-space>
       </template>
     </a-modal>
+    <!-- 新增/编辑规则弹窗 -->
   </div>
 </template>
 
 <script>
 import { getAction, postAction, httpAction, deleteAction, putAction } from '@/api/manage'
 import DicSelect from '../../components/dicSelect.vue'
+import { MenuNameMap, QcFlagOptions, SampleMap, SampleTypeOptions } from './config'
+import { cloneDeep } from 'lodash'
+
+const InitialFormVal = {
+  name: '',
+  source: null,
+  station: undefined,
+  nuclide: undefined,
+  qualifier: null,
+  condition: null,
+  contactGroup: null,
+  remark: '',
+
+  // 新增的Sample Type、Sample和Coefficient
+  sampleType: null,
+  sample: null,
+  coefficient: 1.0,
+}
+
 export default {
   components: {
     DicSelect,
@@ -339,18 +393,14 @@ export default {
       wrapperCol: { span: 18 },
       form: this.$form.createForm(this),
       contactGroupOptions: [],
-      formVal: {
-        name: '',
-        source: null,
-        station: undefined,
-        nuclide: undefined,
-        qualifier: null,
-        condition: null,
-        contactGroup: undefined,
-        remark: '',
-      },
+      formVal: cloneDeep(InitialFormVal),
       monitorList: [],
       currId: '',
+
+      SampleTypeOptions,
+      sampleList: [],
+      qcFlagList: [],
+      filteredStationList: [],
     }
   },
   created() {
@@ -360,29 +410,35 @@ export default {
     this.getAlarmRulesPage()
   },
   methods: {
-    getStationList() {
-      getAction('/webStatistics/findStationList', { menuName: '' }).then((res) => {
-        if (res.success) {
-          if (res.result.length > 0) {
-            this.stationOptions = res.result.map((item) => {
-              return {
-                label: item.stationCode,
-                value: `${item.stationId}`,
-              }
-            })
-          } else {
-            this.stationOptions = []
-          }
+    async getStationList() {
+      this.stationOptions = await this.stationRequest('')
+    },
+
+    async stationRequest(menuName) {
+      try {
+        const { success, result } = await getAction('/webStatistics/findStationList', { menuName })
+        if (success) {
+          return result.map((item) => {
+            return {
+              label: item.stationCode,
+              value: `${item.stationId}`,
+            }
+          })
         } else {
           this.$message.warning('This operation fails. Contact your system administrator')
+          return []
         }
-      })
+      } catch (error) {
+        this.$message.error(error)
+        return []
+      }
     },
+
     getNuclideList() {
       getAction('/sys/defaultNuclide/allName', { useType: 2 }).then((res) => {
         if (res.success) {
           if (res.result.length > 0) {
-            this.nuclideOptions = res.result.map((item) => {
+            this.nuclideOptions = Array.from(new Set(res.result)).map((item) => {
               return {
                 label: item,
                 value: item,
@@ -399,10 +455,32 @@ export default {
     handleAdd() {
       this.isAdd = true
       this.visible = true
+      this.formVal = cloneDeep(InitialFormVal)
+
+      this.sampleList = []
+      this.qcFlagList = []
+      this.filteredStationList = []
     },
     filterOption(input, option) {
       return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
     },
+
+    // Sample Type改变
+    handleSampleTypeChange() {
+      this.sampleList = SampleMap[this.formVal.sampleType]
+      this.formVal.sample = undefined
+      this.formVal.station = undefined
+      this.filteredStationList = []
+    },
+
+    // sample改变
+    async handleSampleChange() {
+      this.qcFlagList = QcFlagOptions[this.formVal.sample]
+      this.filteredStationList = []
+      this.formVal.station = undefined
+      this.filteredStationList = await this.stationRequest(MenuNameMap[this.formVal.sample])
+    },
+
     onStationChange(val) {
       this.queryParams.station = val
     },
@@ -435,28 +513,42 @@ export default {
       this.ipagination.current = 1
       this.getAlarmRulesPage()
     },
-    editItem(id) {
-      this.currId = id
-      getAction('/alarmAnalysisRule/finInfo', { id }).then((res) => {
-        if (res.success) {
+    async editItem(id) {
+      try {
+        this.currId = id
+        const { success, result, message } = await getAction('/alarmAnalysisRule/finInfo', { id })
+        if (success) {
           this.isAdd = false
           this.visible = true
-          this.$nextTick(() => {
-            this.form.setFieldsValue({
-              name: res.result.name,
-              source: res.result.sourceChecked.join(','),
-              station: res.result.stationChecked,
-              nuclide: res.result.nuclidesChecked,
-              qualifier: res.result.qualifierChecked.join(','),
-              condition: res.result.conditionChecked.join(','),
-              contactGroup: res.result.contactGroup,
-              remark: res.result.remark,
-            })
+          const { sourceChecked, qualifierChecked, conditionChecked, stationChecked, nuclidesChecked } = result
+          this.formVal = {
+            ...result,
+            station: stationChecked,
+            nuclide: nuclidesChecked,
+            source: sourceChecked.join(','),
+            qualifier: qualifierChecked.join(','),
+            condition: conditionChecked.join(','),
+          }
+
+          this.sampleList = SampleMap[this.formVal.sampleType]
+          this.qcFlagList = this.qcFlagList = QcFlagOptions[this.formVal.sample].map((item) => {
+            const val = this.formVal[item.prop]
+            const hasVal = val !== null && val !== undefined
+            return {
+              ...item,
+              checked: hasVal,
+              value: hasVal ? val : item.value,
+            }
           })
+
+          this.filteredStationList = await this.stationRequest(MenuNameMap[this.formVal.sample])
         } else {
           this.$message.warning('This operation fails. Contact your system administrator')
+          console.log(message)
         }
-      })
+      } catch (error) {
+        console.log(error)
+      }
     },
     deleteItem(id) {
       let _this = this
@@ -515,47 +607,70 @@ export default {
         }
       })
     },
-    onSave() {
-      this.form.validateFields((err, values) => {
-        if (!err) {
-          let params = {
-            conditions: values.condition,
-            name: values.name,
-            remark: values.remark,
-            stations: values.station.join(','),
-            source: values.source,
-            nuclides: values.nuclide.join(','),
-            contactGroup: values.contactGroup,
-            spectralQualifier: values.qualifier,
-          }
-          if (this.isAdd) {
-            postAction('/alarmAnalysisRule/add', params).then((res) => {
-              if (res.success) {
-                this.visible = false
-                this.form.resetFields()
-                this.$message.success('success')
-                this.getAlarmRulesPage()
-              } else {
-                this.$message.warning('This operation fails. Contact your system administrator')
-              }
-            })
+    async onSave() {
+      try {
+        await this.$refs.form.validate()
+
+        const qcFlagsHasBlank = this.qcFlagList.some(({ isArray, value, checked }) => {
+          return checked && (!value || (isArray && value.some((v) => !v)))
+        })
+        if (qcFlagsHasBlank) {
+          this.$message.warning('Please fill in the QC Flag value')
+          return
+        }
+
+        const qcFlags = this.qcFlagList.reduce((acc, { prop, value, isArray, checked }) => {
+          const val = checked ? (isArray ? value.join(',') : value) : null
+          acc[prop] = val
+          return acc
+        }, {})
+
+        // 清理已有的qc flags的值
+        Object.values(QcFlagOptions).forEach((v) => {
+          v.forEach((item) => {
+            this.formVal[item.prop] = null
+          })
+        })
+
+        const { station, nuclide, qualifier, condition } = this.formVal
+        const params = {
+          ...this.formVal,
+          nuclide: undefined,
+          station: undefined,
+          condition: undefined,
+          spectralQualifier: qualifier,
+          conditions: condition,
+          stations: station.join(','),
+          nuclides: nuclide.join(','),
+          ...qcFlags,
+        }
+        if (this.isAdd) {
+          const { success } = await postAction('/alarmAnalysisRule/add', params)
+          if (success) {
+            this.visible = false
+            this.$refs.form.resetFields()
+            this.$message.success('success')
+            this.getAlarmRulesPage()
           } else {
-            httpAction('/alarmAnalysisRule/edit', { ...params, id: this.currId }, 'put').then((res) => {
-              if (res.success) {
-                this.visible = false
-                this.form.resetFields()
-                this.$message.success('success')
-                this.getAlarmRulesPage()
-              } else {
-                this.$message.warning('This operation fails. Contact your system administrator')
-              }
-            })
+            this.$message.warning('This operation fails. Contact your system administrator')
+          }
+        } else {
+          const { success } = await httpAction('/alarmAnalysisRule/edit', { ...params, id: this.currId }, 'put')
+          if (success) {
+            this.visible = false
+            this.$refs.form.resetFields()
+            this.$message.success('success')
+            this.getAlarmRulesPage()
+          } else {
+            this.$message.warning('This operation fails. Contact your system administrator')
           }
         }
-      })
+      } catch (error) {
+        console.log(error)
+      }
     },
     onCancel() {
-      this.form.resetFields()
+      this.$refs.form.resetFields()
       this.visible = false
     },
   },
@@ -779,4 +894,14 @@ export default {
     }
   }
 }
+
+.qc-item {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+
+  span {
+    flex-shrink: 0;
+  }
+}
 </style>