yclw/src/views/groupPageDataManagement/IndexManagement/IndexForm.vue

<template>
  <tf-dialog v-bind="$attrs" v-on="listeners" @submit="onSubmit" width="676px" top="7vh" v-if="$attrs.visible">
    <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="{ width: '50%', float: 'left' }"
            :key="name"
            :required="required"
            :label="label"
            :prop="name"
          >
            <el-date-picker
              v-if="type === 'date'"
              v-model="formData[name]"
              value-format="yyyy-MM-dd HH:mm:ss"
              format="yyyy-MM-dd"
              :disabled="disabled"
              :placeholder="`请选择${label}`"
              clearable
              size="medium"
              v-bind="rest"
            />
            <el-select
              v-else-if="type === 'select'"
              v-model="formData[name]"
              filterable
              :placeholder="`请选择${label}`"
              size="medium"
              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-row style="display: inline-block; width: 100%">
            <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-row>
          <el-row>
            <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-row>
        </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 { IIndex } from '../commonAPI/common'

const getDefaultValue = (): Partial<IIndex> => ({
  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
  $refs!: { form: ElForm }
  formData: Partial<IIndex> = {
    ...getDefaultValue()
  }

  get listeners() {
    const { submit, ...rest } = this.$listeners
    return rest
  }

  get formItems() {
    return [
      { label: '分组', name: 'dataGroup' },
      { label: '统计日期', name: 'stsDate', type: 'date', required: true },
      { label: '项目编码', name: 'projectCode' },
      { label: '项目名称', name: 'projectName' },
      { label: '管理领域', name: 'mangeField' },
      { label: '指标分类', name: 'indexType' },
      { label: '指标代码', name: 'indexCode', required: true },
      { label: '指标名称', name: 'indexName', required: 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: '请输入指标值' }]
  }

  onSubmit() {
    this.$refs.form.validate((valid) => {
      if (valid) {
        const { ...rest } = this.formData
        this.$emit('submit', { ...rest })
      }
    })
  }

  @Watch('data', { immediate: true })
  setDefaultData(val: IIndex) {
    for (const key in val) {
      if (val[key] == '/') {
        val[key] = ''
      }
    }
    this.formData = val.id ? { ...val } : { ...getDefaultValue() }
  }
}
</script>
<style lang="scss" scoped>
</style>