前端服务-请假表单

1. 创建工程pai-hello-ui

使用pai命令创建后端工程,并关联套件 pai create front -n pai-hello-ui

2. 把表单建模生成的代码放入工程中

2.1 创建表单form-leave表单

在/static/form 下创建form-leave/web，并把代码copy到/static/form/form-leave/web/index.vue 文件

2.2 创建meta.json

在/static/form 下创建form-leave/meta.json

{
  "info": {
    "desc": "hello-请假表单",
    "formId": "## 从表单建模复制下来的id，例如：1542421450337710080"
  }
}

3. 调整代码

生成的代码需要对接相应的后端代码

3.1. pc 表单前端代码

文件：static/form/form-leave/web/index.vue

submit 方法里有一段注释的代码

调整后的代码：

// 提交表单
    submit(cmd) {
      this.$refs["form"].validate((valid) => {
        if (!valid) {
          return
        }
        this.loading = true
        this.$REQUEST({
          url: !this.data.id
            ? `/hello-api/tbLeave`
            : `/hello-api/tbLeave`,
          method: !this.data.id ? "POST" : "PUT",
          data: this.form,
        }).then((res) => {
          // 保存成功，返回业务主键ID
          this.form.id = res.data.id
          // TODO ...
          // 然后通知审批中心可以进行下一步
          this.$emit("next", this.form)
          this.loading = false
        })
        // this.loading = false
        // Demo 接口返回数据
        // this.form.id = "123456789"
        // this.$emit("next", this.form)
      })
    },

// 加载表单数据
    getFormData() {
      if (!this.data.id) {
        return
      }
      this.loading = true
      this.$REQUEST({
        url: `/hello-api/tbLeave`,
        method: "GET",
        params: {
          id: this.data.id,
        },
      }).then((res) => {
        // TODO:填充表单数据
        this.form = res.data
        // 返回数据给流程中心
        this.$emit("form", this.form)
        this.loading = false
      })
      // this.loading = false
      // // Demo 填充表单数据
      // this.form = {
      //   id: "123456789",
      // }
      // 返回数据给流程中心
      // this.$emit("form", this.form)
    },

注意：

1、要在这两个位置关闭loading（红色框）
2、此处要修改为后端工程的接口地址（蓝色框）

3.2. app表单前端代码

文件地址：static/form/form-leave/app/index.vue

<template>
  <div class="container">
    <van-form ref="form">
      <van-field v-model="form.name" label="姓名" name="name"  />
      <van-field
        required
        readonly
        clickable
        name="startTime"
        :value="form.startTime"
        label="开始时间"
        placeholder="点击选择开始日期"
        :rules="rules.startTime"
        @click="onClickDate(true)"
      />
      <van-field
        required
        readonly
        clickable
        name="entTime"
        :value="form.entTime"
        label="结束时间"
        placeholder="点击选择结束日期"
        :rules="rules.entTime"
        @click="onClickDate(false)"
      />
      <van-field
        v-model="form.days"
        required
        name="days"
        label="请假天数"
        placeholder="请输入请假天数"
        :rules="rules.days"
        :disabled="state == 'view'"
      />
      <van-field
        v-model="form.reason"
        rows="2"
        autosize
        required
        name="reason"
        label="请假事由"
        type="textarea"
        maxlength="120"
        placeholder="请输请假事由"
        show-word-limit
        :rules="rules.reason"
        :disabled="state == 'view'"
      />
      <van-popup v-model="leavePicker" round position="bottom">
        <van-picker show-toolbar :columns="leaves" @cancel="leavePicker = false" @confirm="onLeaveConfirm" />
      </van-popup>
      <van-popup v-model="datePicker" round position="bottom">
        <van-datetime-picker v-model="curDateTime" type="datetime" title="选择完整时间" :min-date="minDate" @confirm="onDateConfirm" />
      </van-popup>
      <!-- <van-calendar v-model="datePicker" @confirm="onDateConfirm" /> -->
    </van-form>
  </div>
</template>
<script>
export default {
  props: {
    data: {
      default() {
        return {}
      },
    },
    state: {
      default() {
        return 'add'
      },
    },
  },
  data() {
    return {
      rules: {
        days: [
          {
            name: 'days',
            required: true,
            message: '请填写请假天数',
            trigger: 'blur',
          },
        ],
        startTime: [
          {
            name: 'startTime',
            required: true,
            message: '请选择请假开始时间',
            trigger: 'blur',
          },
        ],
        entTime: [
          {
            name: 'entTime',
            required: true,
            message: '请选择请假结束时间',
            trigger: 'blur',
          },
        ],
        reason: [
          {
            name: 'reason',
            required: true,
            message: '请填写请假原因',
            trigger: 'blur',
          },
        ],
      },
      leaves: ['事假1', '调休', '婚假', '产假'],
      fileList: [],
      form: {
        days: '',
        startTime: '',
        entTime: '',
        reason: '',
      },
      leavePicker: false,
      datePicker: false,
      isStartDate: false,
      minDate: new Date(),
      curDateTime: new Date(),
      startDate: new Date(),
      entDate: {},
    }
  },
  created() {
    if (this.data.id) {
      this.getFormData()
    } else {
      try {
        this.$set(this.form, 'name', this.$store.state.user_info.staffName)
      } catch (e) {
        console.error(e)
      }
    }
  },
  methods: {
    onLeaveConfirm(data) {
      this.form.leaveType = data
      this.leavePicker = false
    },
    onClickDate(isStart) {
      if (this.state == 'view') {
        return
      }
      this.datePicker = true
      this.isStartDate = isStart
      if (this.isStartDate) {
        this.curDateTime = this.startDate
      } else {
        this.minDate = this.startDate
        this.curDateTime = this.entDate == null ? this.startDate : this.entDate
      }
    },
    onDateConfirm(date) {
      this.datePicker = false
      if (this.isStartDate) {
        this.startDate = date
        this.form.startTime = this.formatDate(date)
      } else {
        this.entDate = date
        this.form.entTime = this.formatDate(date)
      }
    },
    format(n) {
      return n < 10 ? '0' + n : n
    },
    formatDate(date) {
      return `${date.getFullYear()}-${this.format(date.getMonth() + 1)}-${this.format(date.getDate())} ${this.format(
        date.getHours()
      )}:${this.format(date.getMinutes())}:${this.format(date.getSeconds())}`
    },
    // 执行提交
    submit(cmd) {
      this.$refs.form
        .validate()
        .then((value, rule) => {
          this.$REQUEST({
            url: `${this.$BASE_URL}/hello-api/tbLeave`,
            method: !this.form.id ? 'POST' : 'PUT',
            data: this.form,
          }).then((res) => {
            this.form.id = res.data.id
            console.log('保存成功')
            // 保存成功
            console.log('-->>>this.form:', this.form)
            console.log('-->>>this.res.data:', res.data)
            this.$emit('next', true, this.form)
          })
        })
        .catch((err) => {
          console.log('error submit!!')
        })
    },
    // 获取数据
    getFormData() {
      console.log('获取数据')
      this.$REQUEST({
        url: `${this.$BASE_URL}/hello-api/tbLeave`,
        method: 'GET',
        params: {
          id: this.data.id,
        },
      }).then((res) => {
        this.form = res.data
        this.$emit('form', this.form)
      })
    },
  },
}
</script>

<style lang="less" scoped>
.container {
  background-color: #f7f8f9;

  .van-field {
    margin-top: 8px;
    margin-bottom: 8px;
  }

  .attach-layout {
    font-size: 14px;
    color: #323233;
    line-height: 34px;
    padding: 10px 16px;
    background-color: #ffffff;

    align-content: center;
  }
}
</style>

4.部署表单

先使用npm run build 把.vue 文件打包，并使用pai-cli 把表单打包并部署，通过meta.json 中的表单id与开发者创建的表单进行关联 npm build:form pai form deploy -n form-leave

 # 只编译 web 表单
 npm run build:form-web
 # 只编译 app 表单
 npm run build:form-app
 # 同时编译 web 和 app 表单
 npm run build:form

出现以下结果即成功：

使用部署命令

# 只发布 web 表单
pai form deploy web -n form-leave
# 只发布 app 表单
pai form deploy app -n form-leave
# 同时发布 web 和 app 表单（如果其中一个没有会报错）
pai form deploy  -n form-leave

运行结果：

web表单form-leave发布成功

5. 本地调试

npm run dev

访问 http://localhost:1024/hello/preview

暂存和送办功能能正常使用即可发布