更新记录

1.0.0（2023-09-09） 下载此版本

简单的表单组件

平台兼容性

Form表单

使用前准备： 把代码放在 uni_modules 目录根节点下

• 目录结构

项目
    |
    |-pages
    |
    |-components
    |
    |-uni_modules 
    |       |
    |       |- zj-form
    |       |
    |       |- zj-form-item
    |       |
    |       |- 其他组件

使用示例：

<template>
  <view class="holdingListItem">
    <view class="ItemBox" v-for="(item, index) in list" :key="item.id">
      <view class="fromBox">
        <view class="title line-item-space-between-center">
          <view>{{ item.school }}</view>
        </view>
        <zj-form :values="item">
          <zj-form-item title="所学专业" name="profession" required></zj-form-item>
          <zj-form-item title="教育体系" name="learningType" type="select"
                        :pickerProps="{range:LearningTypeEnum,mode:'selector'}" required disabled></zj-form-item>
          <zj-form-item title="入学时间" name="beginDate" required></zj-form-item>
          <zj-form-item title="毕业时间" name="endDate" required></zj-form-item>
          <zj-form-item title="学历" name="education" type="select"
                        :pickerProps="{range:EducationTypeEnum,mode:'selector'}" required disabled></zj-form-item>
          <zj-form-item title="学位" name="degree" type="select"
                        :pickerProps="{range:DegreeTypeEnum,mode:'selector'}" required disabled></zj-form-item>
        </zj-form>
      </view>
    </view>

    <uni-popup ref="popup" type="bottom">
      <view class="popupBox">
        <zj-form v-model="formData" ref="form">
          <zj-form-item title="毕业院校" name="school" type="input" required></zj-form-item>
          <zj-form-item title="所学专业" name="profession" type="input" required></zj-form-item>
          <zj-form-item title="教育体系" name="learningType" type="select"
                        :pickerProps="{range:LearningTypeEnum,mode:'selector'}" required></zj-form-item>
          <zj-form-item title="入学时间" name="beginDate" type="select"
                        :pickerProps="{range:LearningTypeEnum,mode:'date'}" required></zj-form-item>
          <zj-form-item title="毕业时间" name="endDate" type="select"
                        :pickerProps="{range:LearningTypeEnum,mode:'date'}" required></zj-form-item>
          <zj-form-item title="学历" name="education" type="select"
                        :pickerProps="{range:EducationTypeEnum,mode:'selector'}" required></zj-form-item>
          <zj-form-item title="学位" name="degree" type="select"
                        :pickerProps="{range:DegreeTypeEnum,mode:'selector'}" required></zj-form-item>
        </zj-form>
        <Button class="button-primary" @click="onSubmit">保存</Button>
      </view>
    </uni-popup>

    <view class="button-fixed-view"></view>

    <view class="button-fixed-box">
      <Button class="button-primary" @click="onEdit(null)">新增</Button>
    </view>
  </view>
</template>

<script>
/**
 * @author: 1580043700@qq.com - Zhang
 */
import {educationHistoryDelete, educationHistorySaveInfo, getEduInfoByEmpId, getEnum} from '@/api/api';
import {Toast} from "@/utils";

export default {
  name: "Education",
  data() {
    return {
      list: [],
      LearningTypeEnum: [],
      EducationTypeEnum: [],
      DegreeTypeEnum: [],
      formData: {},
    };
  },
  methods: {
    onSubmit() {

      this.$refs.form.validateFields().then(values => {
        let params = {
          ...this.formData,
          ...values,
        }
        console.log('params',params)

      })
    },
    onEdit(item) {
      this.formData = {...item};
      this.$refs.popup.open();
    },
    initPageData(empId) {
      getEduInfoByEmpId(empId).then(data => {
        this.list = data || []
      })
      getEnum('com.ihr.base.enums.LearningTypeEnum').then((data) => {
        this.LearningTypeEnum = data || [];
      });
      getEnum('com.ihr.base.enums.EducationTypeEnum').then((data) => {
        this.EducationTypeEnum = data || [];
      });
      getEnum('com.ihr.base.enums.DegreeTypeEnum').then((data) => {
        this.DegreeTypeEnum = data || [];
      });
    },
  },
  created() {
  },
  mounted() {
    this.initPageData('123213')
  },
  destroyed() {
  },
};
</script>

<style lang="scss" scoped>
.holdingListItem {

  .fromBox {

    .title {
      font-size: 28rpx;
      padding: 20rpx 0;
      border-bottom: 1rpx solid #ededed;
      position: relative;

      .btn {
        font-size: 26rpx;
        margin-left: 20rpx;
      }

      .edit {
        color: #217AF9;
      }

      .del {
        color: #f32020;
      }
    }
  }

  .popupBox {
    padding: 60rpx;

    .button-primary {
      margin-top: 40rpx;
      font-size: 28rpx;
      color: white;
      background-color: var(--theme-color);
    }
  }
}
</style>