新增参数设置

src/components/Base/Dialog/index.vue

@@ -31,112 +31,113 @@
 </template>
 
 <script lang="ts">
-import { ElForm } from 'element-ui/types/form'
-import { Vue, Component, Prop, PropSync } from 'vue-property-decorator'
+  import { ElForm } from 'element-ui/types/form'
+  import { Vue, Component, Prop, PropSync } from 'vue-property-decorator'
 
-@Component({ name: 'TfDialog', inheritAttrs: false })
-export default class Dialog extends Vue {
-  @PropSync('visible', { type: Boolean }) dialogVisible!: boolean
-  @Prop({ type: String }) title!: string
-  @Prop({ type: Boolean }) loading!: boolean
-  @Prop({ type: Boolean }) disabled!: boolean
-  @Prop({ type: Boolean, default: true }) clear!: boolean
-  @Prop({ type: Boolean, default: true }) footer!: boolean
-  @Prop({ type: Boolean, default: true }) gutter!: boolean
+  @Component({ name: 'TfDialog', inheritAttrs: false })
+  export default class Dialog extends Vue {
+    @PropSync('visible', { type: Boolean }) dialogVisible!: boolean
+    @Prop({ type: String }) title!: string
+    @Prop({ type: Boolean }) loading!: boolean
+    @Prop({ type: Boolean }) disabled!: boolean
+    @Prop({ type: Boolean, default: true }) clear!: boolean
+    @Prop({ type: Boolean, default: true }) footer!: boolean
+    @Prop({ type: Boolean, default: true }) gutter!: boolean
 
-  get listeners() {
-    const { open, closed, submit, ...rest } = this.$listeners
-    return rest
-  }
+    get listeners() {
+      const { open, closed, submit, ...rest } = this.$listeners
+      return rest
+    }
 
-  onOpen() {
-    if (this.clear) {
-      const { clearValidate } = (this.$parent.$refs['form'] as ElForm) || {}
-      setTimeout(() => {
-        clearValidate && clearValidate()
-      }, 0)
+    onOpen() {
+      if (this.clear) {
+        const { clearValidate } = (this.$parent.$refs['form'] as ElForm) || {}
+        setTimeout(() => {
+          clearValidate && clearValidate()
+        }, 0)
+      }
+      this.$emit('open')
     }
-    this.$emit('open')
-  }
 
-  onClosed() {
-    if (this.clear) {
-      const { resetFields } = (this.$parent.$refs['form'] as ElForm) || {}
-      resetFields && resetFields()
+    onClosed() {
+      if (this.clear) {
+        const { resetFields } = (this.$parent.$refs['form'] as ElForm) || {}
+        resetFields && resetFields()
+      }
+      this.$emit('closed')
     }
-    this.$emit('closed')
-  }
-  updated() {
-    this.$nextTick(() => {
-      /**我也不知道为什么title会被传到html上 */
-      ;[...document.querySelectorAll('.dialog')].forEach((dialog) => {
-        dialog.removeAttribute('title')
+    updated() {
+      this.$nextTick(() => {
+        /**我也不知道为什么title会被传到html上 */
+        ;[...document.querySelectorAll('.dialog')].forEach((dialog) => {
+          dialog.removeAttribute('title')
+        })
       })
-    })
+    }
   }
-}
 </script>
 <style lang="scss" scoped>
-.dialog {
-  font-size: $--font-size-base;
-  $radius: $--border-radius-base;
-  $font-color: $--color-white;
-  $bg-color: $--color-primary;
+  .dialog {
+    font-size: $--font-size-base;
+    $radius: $--border-radius-base;
+    $font-color: $--color-white;
+    $bg-color: $--color-primary;
 
-  border-radius: $radius;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  >>> .el-dialog {
-    background-color: transparent;
-    max-width: 85vw;
-    margin-top: 0 !important;
-    .title {
-      font-size: $--font-size-medium;
-      color: $font-color;
-      font-weight: 500;
-    }
+    border-radius: $radius;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    >>> .el-dialog {
+      background-color: transparent;
+      max-width: 85vw;
+      margin-top: 0 !important;
+      transition: width 300ms ease;
+      .title {
+        font-size: $--font-size-medium;
+        color: $font-color;
+        font-weight: 500;
+      }
 
-    &__header {
-      background-color: $bg-color;
-      color: $font-color;
-      border-bottom-color: $bg-color;
-      height: 54px;
-      text-indent: 0;
-      padding: 0 $gutter-medium;
-      display: flex;
-      align-items: center;
-      justify-content: space-between;
-      border-top-left-radius: $radius;
-      border-top-right-radius: $radius;
-      &btn {
-        position: relative;
-        top: 0;
-        right: 0;
-        i.el-icon-close {
-          color: $font-color !important;
-          font-size: 1.2em;
+      &__header {
+        background-color: $bg-color;
+        color: $font-color;
+        border-bottom-color: $bg-color;
+        height: 54px;
+        text-indent: 0;
+        padding: 0 $gutter-medium;
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        border-top-left-radius: $radius;
+        border-top-right-radius: $radius;
+        &btn {
+          position: relative;
+          top: 0;
+          right: 0;
+          i.el-icon-close {
+            color: $font-color !important;
+            font-size: 1.2em;
+          }
         }
       }
-    }
-    &__body {
-      background-color: #fff;
-    }
-    &__footer {
-      background-color: #fff;
-      border-bottom-left-radius: $radius;
-      border-bottom-right-radius: $radius;
-    }
-    .el-dialog__body {
-      padding: $gutter-medium;
-    }
-  }
-  &.no-gutter {
-    >>> .el-dialog {
+      &__body {
+        background-color: #fff;
+      }
+      &__footer {
+        background-color: #fff;
+        border-bottom-left-radius: $radius;
+        border-bottom-right-radius: $radius;
+      }
       .el-dialog__body {
-        padding: 0;
+        padding: $gutter-medium;
+      }
+    }
+    &.no-gutter {
+      >>> .el-dialog {
+        .el-dialog__body {
+          padding: 0;
+        }
       }
     }
   }
-}
 </style>

src/components/Base/Table/index.vue

@@ -1,6 +1,14 @@
 <template>
   <div :class="{ 'tf-table': true, 'tf-table--no-pagination': !pagination }">
-    <el-table ref="table" v-on="$listeners" v-bind="attrs">
+    <el-table
+      ref="table"
+      v-on="$listeners"
+      v-bind="attrs"
+      :data="data"
+      :span-method="spanMethod"
+      :cell-class-name="computedCellClassName"
+      v-if="!rerender"
+    >
       <template slot="empty">
         <img src="@/assets/icon/null.png" alt="暂无数据" />
       </template>
@@ -38,10 +46,11 @@
 </template>
 
 <script lang="ts">
-  import { Vue, Component, Prop } from 'vue-property-decorator'
+  import { Vue, Component, Prop, Watch } from 'vue-property-decorator'
   import { pageSizes } from '@/utils/constant'
   import { ElTableColumn } from 'element-ui/types/table-column'
   import { ElPagination } from 'element-ui/types/pagination'
+  import { cellCallbackParams, ElTable } from 'element-ui/types/table'
   import { camelCase } from 'lodash'
 
   interface IPagination {
@@ -57,8 +66,20 @@
   export default class Table extends Vue {
     @Prop({ type: Array, default: () => [] }) columns!: ICol[]
     @Prop({ type: Object, default: () => ({}) }) pagination!: ElPagination & IPagination
-
+    @Prop({ type: Array, default: () => [] }) data!: ElTable['data']
+    @Prop({ type: Boolean, default: false }) autoHeight!: boolean
+    @Prop({ type: [String, Function] }) cellClassName!: ElTable['cellClassName']
+    @Prop({ type: [String, Function] }) spanMethod!: (
+      param: cellCallbackParams
+    ) => [number, number] | { rowspan: number; colspan: number }
+    $refs!: { table: ElTable }
     pageSizes = pageSizes
+    rerender = false
+
+    mounted() {
+      console.log('attrs', this.$attrs)
+    }
+
     get attrs() {
       const defaultAttrs = {
         toolTipEffect: 'light',
@@ -69,6 +90,7 @@
         height: '100%'
         // highlightCurrentRow: true
       }
+      if (this.autoHeight) delete defaultAttrs.height
       return {
         ...defaultAttrs,
         ...Object.keys(this.$attrs).reduce((acc, key) => {
@@ -78,18 +100,65 @@
       }
     }
 
+    get computedCellClassName() {
+      return (param: cellCallbackParams) => {
+        let className: string[] = []
+        if (this.cellClassName) {
+          className.push(typeof this.cellClassName === 'function' ? this.cellClassName(param) : this.cellClassName)
+        }
+        if (this.spanMethod) {
+          const res = this.spanMethod(param)
+          const rowspan = !res ? 0 : Array.isArray(res) ? res[0] : res.rowspan
+          if (rowspan > 1) {
+            className.push('tf-table-merged-span')
+            const { index } = param.row as { index: number }
+            if (index !== undefined) {
+              className.push(index % 2 === 0 ? 'tf-table-merged-span-even' : 'tf-table-merged-span-odd')
+            }
+            if (this.attrs.stripe) {
+              className.push('tf-table-merged-span--striped')
+            }
+          }
+        }
+
+        return className.join(' ')
+      }
+    }
+
     onPageChange(e: any, type: 'size' | 'current') {
       this.$emit(`${type}-change`, e)
       this.$emit(`${type}Change`, e)
       this.$emit('page-change', { [type]: e })
       this.$emit('pageChange', { [type]: e })
     }
+
+    doLayout() {
+      this.$refs.table.doLayout()
+    }
+
+    @Watch('data')
+    onDataChange() {
+      this.$nextTick(() => {
+        this.doLayout()
+      })
+    }
+
+    @Watch('autoHeight')
+    onAutoHeightChange(val) {
+      if (val) {
+        this.rerender = true
+        this.$nextTick(() => {
+          this.rerender = false
+        })
+      }
+    }
   }
 </script>
 
 <style lang="scss" scoped>
   .tf-table {
     height: 100%;
+    min-height: 74px;
     display: flex;
     flex-direction: column;
     position: relative;
@@ -120,6 +189,10 @@
             td.el-table__cell {
               background-color: rgba($--color-primary, 0.06);
             }
+            > a,
+            button:not(.el-button--text) {
+              color: $--color-white;
+            }
           }
           &.current-row {
             td.el-table__cell {
@@ -136,6 +209,10 @@
             td.el-table__cell {
               background-color: rgba($--color-primary, 0.1);
               color: $--color-warning;
+              > a,
+              button {
+                color: $--color-warning;
+              }
             }
           }
           &:not(.current-row):hover {
@@ -143,6 +220,10 @@
               background-color: rgba($--color-primary, 0.1);
               color: $--color-warning;
             }
+            > a,
+            button {
+              color: $--color-warning;
+            }
           }
         }
       }
@@ -150,6 +231,10 @@
         .el-table__body tr.el-table__row {
           td.el-table__cell {
             border: 0;
+            > a,
+            button {
+              color: $--color-primary;
+            }
           }
           &:last-child {
             td.el-table__cell {
@@ -166,6 +251,18 @@
       &__fixed-right {
         box-shadow: none;
       }
+      &.el-table--striped .el-table__body tr.el-table__row {
+        td.el-table__cell.tf-table-merged-span {
+          &--striped {
+            &.tf-table-merged-span-even {
+              background-color: rgba($--color-primary, 0.06);
+            }
+            &.tf-table-merged-span-odd {
+              background-color: $--color-white;
+            }
+          }
+        }
+      }
     }
     .pagination {
       position: relative;

src/views/spectrum/health/api/common.ts

@@ -8,7 +8,34 @@ export interface IFlaw extends ICreator {
   id: number
   interfaceDescription: string
   interfaceName: string
+  interfaceCode: string
   name: string
   note: string
   type: string
+  monitorIds: string
+}
+
+export interface IInterface {
+  algorithmNote: string
+  id: number
+  interfaceCode: string
+  interfaceDescription: string
+  interfaceName: string
+  interfaceUrl: string
+}
+
+export interface IParam {
+  id: number
+  interfaceCode: string
+  paramCode: string
+  paramNotes: string
+  paramValue: string
+  unit: string
+}
+
+export interface IFlawParam {
+  defectinfo: Omit<Partial<IFlaw>, 'monitorIds'> & {
+    monitorIds?: number[]
+  }
+  defectinfoParmSet: IParam[]
 }

src/views/spectrum/health/api/flaw.ts

@@ -1,18 +1,21 @@
-import { serialize } from 'object-to-formdata'
 import { addDictionary, IOriginalDictionary, IQueryCommon, IRes, IResult } from '@/api/common'
 import axios from '@/utils/request'
-import { base, IFlaw } from './common'
+import { base, IFlaw, IFlawParam, IInterface, IParam } from './common'
 import { drainageTypeKey, drainageTypeKeyDefaultValues } from '@/utils/constant'
 import store from '@/store'
+import { IPoint } from '../../configuration/api/common'
 
 const uris = {
   base: `${base}/defectinfo`,
   page: `${base}/defectinfo/page`,
   del: `${base}/defectinfo/deleteByIds`,
-  dictionary: '/base/code/getByKeys'
+  dictionary: '/base/code/getByKeys',
+  interface: `${base}/defectinfo/interfaceList`,
+  params: `${base}/defectinfo/getParamSetByCode`,
+  points: `${base}/surveysite/list`
 }
 
-export const addFlaw = (data: Partial<IFlaw>) =>
+export const addFlaw = (data: Partial<IFlawParam>) =>
   axios.request<IRes<boolean>>({
     url: uris.base,
     method: 'post',
@@ -21,7 +24,7 @@ export const addFlaw = (data: Partial<IFlaw>) =>
 
 export const deleteFlaw = (id: string) => axios.request<IRes<boolean>>({ url: `${uris.base}/${id}`, method: 'delete' })
 
-export const updateFlaw = (data: IFlaw) =>
+export const updateFlaw = (data: IFlawParam) =>
   axios.request<IRes<boolean>>({
     url: uris.base,
     method: 'put',
@@ -56,3 +59,9 @@ export const getDictKeys = async (keys: string = drainageTypeKey.codeKey) => {
   }
   return result || {}
 }
+
+export const fetchInterfaces = () => axios.request<IResult<IInterface[]>>({ url: uris.interface, method: 'get' })
+export const fetchParams = (code: string) =>
+  axios.request<IResult<IParam[]>>({ url: `${uris.params}/${code}`, method: 'get' })
+
+export const fetchPoints = (params) => axios.request<IRes<IPoint[]>>({ url: uris.points, method: 'get', params })

src/views/spectrum/health/flaw/FlawForm.vue

@@ -1,73 +1,126 @@
 <template>
-  <tf-dialog v-bind="$attrs" v-on="listeners" @submit="onSubmit" :loading="loading" width="768px">
+  <tf-dialog
+    v-bind="$attrs"
+    v-on="listeners"
+    @submit="onSubmit"
+    :loading="loading"
+    :width="formData.defectinfo.interfaceCode ? '1280px' : '768px'"
+  >
     <el-form class="form" ref="form" v-bind="{ labelWidth: 'auto', size: 'small' }" :model="formData" :rules="rules">
-      <el-row :gutter="15">
-        <el-col :span="12">
-          <el-form-item label="排水类型" prop="type">
-            <el-select v-model="formData.type" style="wdith: 100%">
-              <el-option v-for="item of types" :key="item.codeValue" :label="item.notes" :value="item.notes" />
+      <el-row type="flex" :gutter="15">
+        <el-col :span="formData.defectinfo.interfaceCode ? 12 : 24">
+          <el-row :gutter="15">
+            <el-col :span="12">
+              <el-form-item label="排水类型" prop="defectinfo.type">
+                <el-select v-model="formData.defectinfo.type" style="wdith: 100%">
+                  <el-option v-for="item of types" :key="item.codeValue" :label="item.notes" :value="item.notes" />
+                </el-select>
+              </el-form-item>
+            </el-col>
+            <el-col :span="12">
+              <el-form-item label="缺陷名称" prop="defectinfo.name">
+                <el-input v-model="formData.defectinfo.name" placeholder="请输入缺陷名称" maxlength="51" />
+              </el-form-item>
+            </el-col>
+          </el-row>
+          <el-form-item label="缺陷描述" prop="defectinfo.description">
+            <el-input
+              v-model="formData.defectinfo.description"
+              type="textarea"
+              placeholder="请输入缺陷描述"
+              clearable
+              rows="3"
+              maxlength="1001"
+            />
+          </el-form-item>
+          <el-form-item label="分析依据" prop="defectinfo.according">
+            <el-input
+              v-model="formData.defectinfo.according"
+              type="textarea"
+              placeholder="请输入分析依据"
+              clearable
+              rows="3"
+              maxlength="1001"
+            />
+          </el-form-item>
+          <el-form-item label="监测点" prop="defectinfo.monitorIds">
+            <el-select
+              v-model="formData.defectinfo.monitorIds"
+              placeholder="请选择监测点"
+              style="width: 100%"
+              multiple
+              clearable
+              filterable
+              :collapse-tags="formData.defectinfo.monitorIds.length > 3"
+            >
+              <el-option v-for="item of points" :key="item.id" :value="item.id" :label="item.siteName" />
             </el-select>
           </el-form-item>
-        </el-col>
-        <el-col :span="12">
-          <el-form-item label="缺陷名称" prop="name">
-            <el-input v-model="formData.name" placeholder="请输入缺陷名称" maxlength="51" />
+          <el-form-item label="接口名称" prop="defectinfo.interfaceName">
+            <el-select
+              v-model="formData.defectinfo.interfaceCode"
+              placeholder="请选择接口名称"
+              @change="onInterfaceChange"
+              style="width: 100%"
+            >
+              <el-option
+                v-for="item of interfaces"
+                :key="item.id"
+                :value="item.interfaceCode"
+                :label="item.interfaceName"
+              />
+            </el-select>
+          </el-form-item>
+          <el-form-item label="接口说明" prop="defectinfo.interfaceDescription">
+            <el-input
+              v-model="formData.defectinfo.interfaceDescription"
+              type="textarea"
+              placeholder="请输入接口说明"
+              clearable
+              rows="3"
+              maxlength="1001"
+            />
+          </el-form-item>
+          <el-form-item label="算法说明" prop="defectinfo.algorithmNote">
+            <el-input
+              v-model="formData.defectinfo.algorithmNote"
+              type="textarea"
+              placeholder="请输入算法说明"
+              clearable
+              rows="3"
+              maxlength="1001"
+            />
+          </el-form-item>
+          <el-form-item label="备注" prop="defectinfo.note">
+            <el-input
+              v-model="formData.defectinfo.note"
+              type="textarea"
+              placeholder="请输入备注"
+              clearable
+              rows="3"
+              maxlength="1001"
+            />
           </el-form-item>
         </el-col>
+        <el-col :span="12" v-if="!!formData.defectinfo.interfaceCode">
+          <div>
+            <tf-title>参数设置</tf-title>
+            <tf-table
+              :columns="columns"
+              :data="formData.defectinfoParmSet"
+              v-loading="fetchingParams"
+              auto-height
+              style="padding: 0"
+            >
+              <template v-slot:paramValue="{ $index }">
+                <el-form-item :show-message="false" label-width="0" style="margin-bottom: 0" required>
+                  <el-input v-model="formData.defectinfoParmSet[$index].paramValue" class="input" />
+                </el-form-item>
+              </template>
+            </tf-table>
+          </div>
+        </el-col>
       </el-row>
-      <el-form-item label="缺陷描述" prop="description">
-        <el-input
-          v-model="formData.description"
-          type="textarea"
-          placeholder="请输入缺陷描述"
-          clearable
-          rows="3"
-          maxlength="1001"
-        />
-      </el-form-item>
-      <el-form-item label="分析依据" prop="according">
-        <el-input
-          v-model="formData.according"
-          type="textarea"
-          placeholder="请输入分析依据"
-          clearable
-          rows="3"
-          maxlength="1001"
-        />
-      </el-form-item>
-      <el-form-item label="接口名称" prop="interfaceName">
-        <el-input v-model="formData.interfaceName" placeholder="请输入接口名称" />
-      </el-form-item>
-      <el-form-item label="接口说明" prop="interfaceDescription">
-        <el-input
-          v-model="formData.interfaceDescription"
-          type="textarea"
-          placeholder="请输入接口说明"
-          clearable
-          rows="3"
-          maxlength="1001"
-        />
-      </el-form-item>
-      <el-form-item label="算法说明" prop="algorithmNote">
-        <el-input
-          v-model="formData.algorithmNote"
-          type="textarea"
-          placeholder="请输入算法说明"
-          clearable
-          rows="3"
-          maxlength="1001"
-        />
-      </el-form-item>
-      <el-form-item label="备注" prop="note">
-        <el-input
-          v-model="formData.note"
-          type="textarea"
-          placeholder="请输入备注"
-          clearable
-          rows="3"
-          maxlength="1001"
-        />
-      </el-form-item>
     </el-form>
   </tf-dialog>
 </template>
@@ -75,17 +128,14 @@
 <script lang="ts">
   import { Vue, Component, Prop, Watch } from 'vue-property-decorator'
   import { ElForm } from 'element-ui/types/form'
-  import { IFlaw } from '../api/common'
+  import { IFlaw, IFlawParam, IInterface, IParam } from '../api/common'
   import { IDictionary } from '@/api/common'
+  import { fetchParams } from '../api/flaw'
+  import { IPoint } from '../../configuration/api/common'
+  import { flawPointParamCols } from '../utils'
 
-  @Component({ name: 'TeamForm', components: {} })
-  export default class TeamForm extends Vue {
-    @Prop({ type: Object, default: () => ({}) }) data!: object
-    @Prop({ type: Boolean, default: false }) loading!: boolean
-    @Prop({ type: Array, default: () => [] }) types!: IDictionary[]
-    $refs!: { form: ElForm }
-
-    formData: Partial<IFlaw> = {
+  const getDefaultFormData = () => ({
+    defectinfo: {
       according: '',
       algorithmNote: '',
       description: '',
@@ -94,8 +144,30 @@
       interfaceName: '',
       name: '',
       note: '',
-      type: ''
-    }
+      type: '',
+      monitorIds: []
+    },
+    defectinfoParmSet: []
+  })
+
+  @Component({ name: 'TeamForm', components: {} })
+  export default class TeamForm extends Vue {
+    @Prop({ type: Object, default: () => ({}) }) data!: object
+    @Prop({ type: Boolean, default: false }) loading!: boolean
+    @Prop({ type: Array, default: () => [] }) types!: IDictionary[]
+    @Prop({ type: Array, default: () => ({}) }) interfaces!: IInterface[]
+    @Prop({ type: Array, default: () => ({}) }) points!: IPoint[]
+    $refs!: { form: ElForm }
+
+    formData: IFlawParam = getDefaultFormData()
+
+    currentInterface: Partial<IInterface> = {}
+
+    params: IParam[] = []
+
+    columns = flawPointParamCols
+
+    fetchingParams: boolean = false
 
     get listeners() {
       const { submit, ...rest } = this.$listeners
@@ -119,19 +191,79 @@
       interfaceName: [{ required: false, max: 1000, message: '接口名称不能超过1000字符', trigger: 'blur' }],
       interfaceDescription: [{ required: false, max: 1000, message: '接口说明不能超过1000字符', trigger: 'blur' }],
       algorithmNote: [{ required: false, max: 1000, message: '算法说明不能超过1000字符', trigger: 'blur' }],
-      note: [{ required: false, max: 1000, message: '备注不能超过1000字符', trigger: 'blur' }]
+      note: [{ required: false, max: 1000, message: '备注不能超过1000字符', trigger: 'blur' }],
+      monitorIds: [
+        {
+          type: 'array',
+          required: true,
+          message: '请选择监测点',
+          fields: {
+            0: { type: 'number', required: true, message: '请选择监测点' }
+          }
+        }
+      ]
+    }
+
+    onInterfaceChange(code: string) {
+      const current = this.interfaces.find((item) => item.interfaceCode === code)
+      this.currentInterface = current
+      const { interfaceName, interfaceCode, interfaceDescription, algorithmNote } = current || {}
+      this.formData = {
+        ...this.formData,
+        defectinfo: { ...this.formData.defectinfo, interfaceName, interfaceDescription, algorithmNote }
+      }
+      this.fetchParams(interfaceCode)
+    }
+
+    async fetchParams(code: string) {
+      this.fetchingParams = true
+      try {
+        const { result } = await fetchParams(code)
+        this.formData.defectinfoParmSet = result || []
+      } catch (error) {
+        console.log(error)
+      }
+      this.fetchingParams = false
     }
 
     onSubmit() {
       this.$refs.form.validate((valid) => {
         if (valid) {
-          this.$emit('submit', this.formData)
+          const {
+            defectinfo: { monitorIds, ...rest },
+            defectinfoParmSet
+          } = this.formData
+          this.$emit('submit', { defectinfo: { ...rest, monitorIds: monitorIds.join() }, defectinfoParmSet })
         }
       })
     }
+
     @Watch('data', { immediate: true })
-    setDefaultData(val) {
-      this.formData = val.id ? { ...val } : {}
+    setDefaultData(val: IFlaw) {
+      const { id, interfaceCode, monitorIds } = val || {}
+      this.formData = id
+        ? {
+            defectinfo: {
+              ...val,
+              monitorIds: String(monitorIds || '')
+                .split(',')
+                .filter((item) => !!item)
+                .map((num) => Number(num))
+            },
+            defectinfoParmSet: []
+          }
+        : getDefaultFormData()
+      this.currentInterface = {}
+      if (interfaceCode) {
+        this.onInterfaceChange(interfaceCode)
+      }
     }
   }
 </script>
+<style lang="scss" scoped>
+  .form {
+    /deep/ .input input {
+      text-align: center;
+    }
+  }
+</style>

src/views/spectrum/health/flaw/widget.vue

@@ -37,6 +37,8 @@
       @submit="onSubmit"
       :loading="loading.add || loading.update"
       :types="drainageTypes"
+      :interfaces="interfaces"
+      :points="points"
     />
   </tf-page>
 </template>
@@ -48,8 +50,17 @@
   import { getDefaultPagination } from '@/utils/constant'
   import { flawCols } from '../utils'
   import { IOriginalDictionary, IPagination } from '@/api/common'
-  import { flawPage, addFlaw, deleteFlawBatch, updateFlaw, getDictKeys } from '../api/flaw'
-  import { IFlaw } from '../api/common'
+  import {
+    flawPage,
+    addFlaw,
+    deleteFlawBatch,
+    updateFlaw,
+    getDictKeys,
+    fetchInterfaces,
+    fetchPoints
+  } from '../api/flaw'
+  import { IFlaw, IFlawParam, IInterface } from '../api/common'
+  import { IPoint } from '../../configuration/api/common'
 
   @Component({ name: 'Device', components: { QueryForm, FlawForm } })
   export default class Device extends Vue {
@@ -72,6 +83,10 @@
 
     drainageTypes: IOriginalDictionary[] = []
 
+    interfaces: IInterface[] = []
+
+    points: IPoint[] = []
+
     onQuery(query) {
       this.query = { ...query }
       this.doQuery({ current: 1 })
@@ -96,11 +111,13 @@
       this.doQuery()
     }
 
-    async onSubmit(data: IFlaw) {
-      this.loading[data.id ? 'update' : 'add'] = true
+    async onSubmit(data: IFlawParam) {
+      this.loading[data.defectinfo.id ? 'update' : 'add'] = true
       try {
-        const { result } = await (data.id ? updateFlaw({ ...data }) : addFlaw({ ...data }))
-        this.$message[result ? 'success' : 'error'](`${data.id ? '修改' : '新增'}缺陷特征${result ? '成功!' : '失败!'}`)
+        const { result } = await (data.defectinfo.id ? updateFlaw({ ...data }) : addFlaw({ ...data }))
+        this.$message[result ? 'success' : 'error'](
+          `${data.defectinfo.id ? '修改' : '新增'}缺陷特征${result ? '成功!' : '失败!'}`
+        )
         if (result) {
           this.visible = false
           this.doQuery()
@@ -108,7 +125,7 @@
       } catch (error) {
         console.log(error)
       }
-      this.loading[data.id ? 'update' : 'add'] = false
+      this.loading[data.defectinfo.id ? 'update' : 'add'] = false
     }
 
     onAdd() {
@@ -160,9 +177,23 @@
       }
     }
 
+    async fetchInterfaces() {
+      const { result } = await fetchInterfaces()
+      this.interfaces = result
+    }
+
+    async fetchPoints() {
+      const {
+        result: { records }
+      } = await fetchPoints({ current: 1, size: 9999, ...this.$store.getters['project/id'] })
+      this.points = records
+    }
+
     preparing() {
       this.doQuery()
       this.getWaterTypes()
+      this.fetchPoints()
+      this.fetchInterfaces()
     }
 
     mounted() {

src/views/spectrum/health/utils.ts

@@ -10,3 +10,11 @@ export const flawCols: ColItem[] = [
   { prop: 'according', label: '分析依据', minWidth: '150px', ...elTableAlignLeft() },
   { prop: 'interfaceName', label: '接口名称', minWidth: '150px', ...elTableAlignLeft() }
 ]
+
+export const flawPointParamCols: ColItem[] = [
+  { type: 'index', label: '序号', width: '60px' },
+  { prop: 'interfaceCode', label: '参数代码', minWidth: '80px' },
+  { prop: 'paramValue', label: '参数值', minWidth: '120px', _slot: true },
+  { prop: 'unit', label: '单位', minWidth: '80px' },
+  { prop: 'paramNotes', label: '参数说明', minWidth: '150px', ...elTableAlignLeft() }
+]

src/views/spectrum/reform/assessmentReport/widget.vue

@@ -25,6 +25,7 @@
           v-loading="loading.page"
           @page-change="onPageChange"
           style="padding-left: 0; padding-right: 0; min-height: 300px"
+          auto-height
         />
       </div>
     </div>