update

src/views/groupPageDataManagement/IndexManagement/IndexForm.vue

@@ -0,0 +1,178 @@
+<template>
+  <tf-dialog v-bind="$attrs" v-on="listeners" @submit="onSubmit" width="676px" top="7vh">
+    <el-row :gutter="15">
+      <el-col>
+        <el-form
+          class="form"
+          ref="form"
+          v-bind="{ labelWidth: 'auto', size: 'medium' }"
+          :model="formData"
+          :rules="rules"
+        >
+          <el-form-item
+            v-for="{ name, label, type, required, options, onChange, disabled, ...rest } of formItems"
+            :style="setStyle(type)"
+            :key="name"
+            :required="required"
+            :label="label"
+            :prop="name"
+          >
+            <el-date-picker
+              v-if="type === 'date'"
+              v-model="formData[name]"
+              value-format="yyyy-MM-dd"
+              format="yyyy-MM-dd"
+              :disabled="disabled"
+              :placeholder="`请选择${label}`"
+              clearable
+              size="small"
+              v-bind="rest"
+            />
+            <el-select
+              v-else-if="type === 'select'"
+              v-model="formData[name]"
+              filterable
+              :placeholder="`请选择${label}`"
+              size="small"
+              clearable
+              v-bind="rest"
+              @change="onChange"
+              style="width: 100%"
+            >
+              <el-option v-for="item in options" :key="item.id" :label="item.deviceTypeName" :value="item.id" />
+            </el-select>
+            <el-input
+              v-else
+              v-model="formData[name]"
+              :type="type || 'text'"
+              :disabled="disabled"
+              :placeholder="name === 'no' ? '系统自动添加' : `请输入${label}`"
+              size="medium"
+              clearable
+              v-bind="rest"
+            />
+          </el-form-item>
+          <el-col :span="24" style="padding-right: 0">
+            <el-form-item :key="'floatTips'" :label="'提示信息'" :prop="'floatTips'">
+              <el-input
+                v-model="formData['floatTips']"
+                :type="'textarea'"
+                :placeholder="`请输入提示信息`"
+                size="medium"
+                clearable
+                :rows="1"
+              />
+            </el-form-item>
+          </el-col>
+          <el-col :span="24" style="padding-right: 0">
+            <el-form-item :key="'note'" :label="'指标说明'" :prop="'note'">
+              <el-input
+                v-model="formData['note']"
+                :type="'textarea'"
+                :placeholder="`请输入指标说明`"
+                size="medium"
+                clearable
+                :rows="3"
+              />
+            </el-form-item>
+          </el-col>
+        </el-form>
+      </el-col>
+    </el-row>
+  </tf-dialog>
+</template>
+
+<script lang="ts">
+import { Vue, Component, Prop, Watch } from 'vue-property-decorator'
+import { ElForm } from 'element-ui/types/form'
+import { telAndMobileReg } from '@/utils/constant'
+
+const getDefaultValue = () => ({
+  dataGroup: undefined,
+  stsDate: undefined,
+  projectCode: undefined,
+  projectName: undefined,
+  mangeField: undefined,
+  indexType: undefined,
+  indexCode: undefined,
+  indexName: undefined,
+  indexValue: undefined,
+  unit: undefined,
+  floatTips: undefined,
+  note: undefined
+})
+
+@Component({ name: 'IndexForm' })
+export default class IndexForm extends Vue {
+  @Prop({ type: Object, default: () => ({}) }) data!: object
+  @Prop({ type: Array, default: () => [] }) types!: []
+  $refs!: { form: ElForm }
+  formData = {
+    ...getDefaultValue()
+  }
+
+  get listeners() {
+    const { submit, ...rest } = this.$listeners
+    return rest
+  }
+
+  get formItems() {
+    return [
+      { label: '分组', name: 'dataGroup' },
+      { label: '统计日期', name: 'stsDate', required: true },
+      { label: '项目编码', name: 'projectCode' },
+      { label: '项目名称', name: 'projectName' },
+      { label: '管理领域', name: 'mangeField' },
+      { label: '指标分类', name: 'indexType' },
+      { label: '指标代码', name: 'indexCode', required: true, disabled: true },
+      { label: '指标名称', name: 'indexName', required: true, disabled: true },
+      { label: '指标值', name: 'indexValue', required: true },
+      { label: '指标单位', name: 'unit' }
+    ]
+  }
+
+  rules = {
+    stsDate: [{ required: true, message: '请选择统计日期' }],
+    indexCode: [{ required: true, message: '请输入指标代码' }],
+    indexName: [{ required: true, message: '请输入指标名称' }],
+    indexValue: [{ required: true, message: '请输入指标值' }]
+  }
+  /** 没有查询全部类型参数的接口, 暂用分页接口 */
+  async getAllTypeParams(typeId: number) {
+    try {
+      //   const {
+      //     result: { records }
+      //   } = await deviceTypeParamPage({ typeId, current: 1, size: 9999 })
+      //   this.formData = {
+      //     ...this.formData,
+      //     param: records.length ? records.map((item) => item.targetName).join(', ') : '无'
+      //   }
+    } catch (error) {
+      console.log(error)
+    }
+  }
+  setStyle(type) {
+    return { width: '50%', float: 'left' }
+  }
+  onSubmit() {
+    this.$refs.form.validate((valid) => {
+      if (valid) {
+        const { ...rest } = this.formData
+        this.$emit('submit', { ...rest })
+      }
+    })
+  }
+
+  @Watch('data', { immediate: true })
+  setDefaultData(val) {
+    this.formData = val.id
+      ? {
+          ...val
+        }
+      : { ...getDefaultValue() }
+    if (val.deviceType) this.getAllTypeParams(val.deviceType)
+  }
+}
+</script>
+<style lang="scss" scoped>
+</style>

src/views/groupPageDataManagement/IndexManagement/widget.vue

@@ -1,7 +1,13 @@
 <template>
   <tf-page>
     <template v-slot:action>
-      <ActionHeader :kplaceholder="'支持指标名称搜索'" @search="onSearch" :actived="isActive" :loading="loading" />
+      <ActionHeader
+        :kplaceholder="'支持指标名称搜索'"
+        @search="onSearch"
+        :actived="isActive"
+        :loading="loading"
+        @add="onAdd"
+      />
     </template>
     <tf-table :columns="tableCols" :data="tableData" v-loading="loading.search">
       <template v-slot:operation="{ row }">
@@ -9,6 +15,14 @@
         <el-button type="text" style="padding: 0" @click="remove(row)">删除</el-button>
       </template>
     </tf-table>
+    <IndexForm
+      v-if="visible"
+      :visible.sync="visible"
+      @submit="onSubmit"
+      :loading="loading.add || loading.update"
+      :data="current"
+      :title="`${current.id ? '修改' : '新增'}设备档案`"
+    />
   </tf-page>
 </template>
 
@@ -18,12 +32,15 @@ import { getRequestResult } from '../commonAPI/request'
 import ActionHeader from '../components/ActionHeader.vue'
 import { IMTableColumns } from '../commonAPI/settings'
 import { ILoading } from '../commonAPI/common'
+import IndexForm from './IndexForm.vue'
 //指标管理
 @Component({
   name: 'IndexManagement',
-  components: { ActionHeader }
+  components: { ActionHeader, IndexForm }
 })
 export default class IndexManagement extends Vue {
+  visible: boolean = false
+
   isActive: boolean = false
 
   loading: ILoading = { search: false, add: false, update: false, delete: false, import: false, export: false }
@@ -31,6 +48,7 @@ export default class IndexManagement extends Vue {
   tableCols = IMTableColumns
 
   tableData: any = []
+  current: any = {}
   mounted() {
     this.isActive = true
   }
@@ -44,8 +62,16 @@ export default class IndexManagement extends Vue {
       this.loading.search = false
     })
   }
-  editor(row) {}
+  onAdd() {
+    this.current = {}
+    this.visible = true
+  }
+  editor(row) {
+    this.current = { ...row }
+    this.visible = true
+  }
   remove(row) {}
+  onSubmit() {}
 }
 </script>