vue+vant动态生产根据后端传的数据动态生成表单

最新推荐文章于 2023-04-21 13:24:06 发布

碑无名

最新推荐文章于 2023-04-21 13:24:06 发布

阅读量1.8k

点赞数 1

分类专栏： vue 文章标签： javascript vue.js 前端

本文链接：https://blog.csdn.net/deep_zhuheihei/article/details/121616223

版权

vue 专栏收录该内容

22 篇文章 2 订阅

订阅专栏

这是一个基于Vue.js的工单提交组件实现，包括单行输入、多行文本、计数器、单选按钮、复选框、开关、日期选择和时间选择等元素。代码中展示了如何根据不同的显示类型动态渲染组件，并处理用户输入的数据，如日期和时间的选择。最后，有一个提交按钮用于将填写的内容发送到服务器。

摘要由CSDN通过智能技术生成

<template>
  <div class="addorderrecord_wrapper">
    <NavBar :headerbar="title"></NavBar>
    <div class="addorderrecord_content">
      <van-form>
        <div v-for="(item, index) in content" :key="index">
          <div v-if="item.displayType === 'singLindTest'&& item.visible">
            <van-field
              colon
              :disabled="item.optionEditingClass"
              :required="item.required"
              :maxlength="8"
              v-model="contentObj[item.key]"
              :label="item.name"
            />
          </div>
          <div v-if="item.displayType === 'multilineTest' && item.visible">
            <van-field
              colon
              :disabled="item.optionEditingClass"
              :required="item.required"
              autosize
              maxlength="50"
              :label="item.name"
              type="textarea"
              v-model="contentObj[item.key]"
            />
          </div>
          <div v-if="item.displayType === 'counter' && item.visible">
            <van-field
              colon
              :label="item.name"
              :disabled="item.optionEditingClass"
              :required="item.required"
            >
              <template #input>
                <van-stepper v-model="contentObj[item.key]" />
              </template>
            </van-field>
          </div>
          <div v-if="item.displayType === 'radio' && item.visible">
            <van-field
              colon
              :disabled="item.optionEditingClass"
              :label="item.name"
              :required="item.required"
            >
              <template #input>
                <van-radio-group v-model="contentObj[item.key]" direction="horizontal">
                  <div
                    v-for="(item1, index1) in item.optionEditing"
                    :key="index1"
                  >
                    <van-radio :name="index1">{{ item1.name }}</van-radio>
                  </div>
                </van-radio-group>
              </template>
            </van-field>
          </div>
          <div v-if="item.displayType === 'checkbox' && item.visible">
            <van-field
              :disabled="item.optionEditingClass"
              colon
              :label="item.name"
              :required="item.required"
            >
              <template #input>
                <van-checkbox-group
                  v-model="contentObj[item.key]"
                  direction="horizontal"
                >
                  <div
                    v-for="(item1, index1) in item.optionEditing"
                    :key="index1"
                  >
                    <van-checkbox :name="index1">{{ item1.name }}</van-checkbox>
                  </div>
                </van-checkbox-group>
              </template>
            </van-field>
          </div>
          <div v-if="item.displayType === 'switch' && item.visible">
            <van-field
              :disabled="item.optionEditingClass"
              colon
              :label="item.name"
              :required="item.required"
            >
              <template #input>
                <van-switch v-model="contentObj[item.key]" />
              </template>
            </van-field>
          </div>
          <div v-if="item.displayType === 'dateSelect' && item.visible">
            <van-field
              colon
              readonly
              :disabled="item.optionEditingClass"
              :label="item.name"
              :value="contentObj[item.key]"
              :required="item.required"
              placeholder="点击选择时间"
              @click="dateSelect(item)"
            >
            </van-field>
            <van-popup v-model="dateObj[item.isShow]" position="bottom">
              <van-datetime-picker
                type="date"
                @confirm="(date) => onConfirmDate(date, item)"
                @cancel="dateSelect(item)"
                v-model="currentDate"
                title="选择年月日"
                :min-date="minDate"
                :max-date="maxDate"
              />
            </van-popup>
            <!-- <van-datetime-picker
              @confirm="(date) => onConfirmTime(date, item)"
              v-if="dateObj[item.index]"
              v-model="currentDate"
              type="date"
              title="选择年月日"
              :min-date="minDate"
              :max-date="maxDate"
            /> -->
          </div>
          <div v-if="item.displayType === 'timeSelect' && item.visible">
            <van-field
              colon
              readonly
              :disabled="item.optionEditingClass"
              :label="item.name"
              :value="contentObj[item.key]"
              :required="item.required"
              placeholder="点击选择时间"
              @click="timeSelect(item)"
            >
            </van-field>
            <van-popup v-model="dateObj[item.isShow]" position="bottom">
              <van-datetime-picker
                type="time"
                @confirm="(date) => onConfirmTime(date, item)"
                @cancel="dateSelect(item)"
                title="选择时间"
              />
            </van-popup>
          </div>
          <div v-if="item.displayType === 'dropDownSelection' && item.visible">
            <van-field
              :disabled="item.optionEditingClass"
              colon
              :label="item.name"
              :required="item.required"
            >
              <template #input>
                <van-dropdown-menu>
                  <van-dropdown-item
                    v-model="contentObj[item.key]"
                    :options="item.optionEditing"
                  />
                </van-dropdown-menu>
              </template>
            </van-field>
          </div>
        </div>
      </van-form>
      <van-button round type="primary" @click="sub">提交</van-button>
    </div>
    <TabBar></TabBar>
  </div>
</template>

<script>
import TabBar from "../../components/TabBar.vue";
import NavBar from "../../components/NavBar.vue";
import { suOrder,orderTemplateDetail } from "../../api/api";
export default {
  data() {
    return {
      title: "提交工单",
      // 接口获取的数据,
      workNumber: "",
      workOrderName: "",
      content: [],
      contentObj: {},
      dateObj: {},
      minDate: new Date(2020, 0, 1),
      maxDate: new Date(2025, 10, 1),
      currentDate: new Date(2021, 0, 17),
      option1: 1,
      workOrderName:null,
      templateId:null
    };
  },
  components: {
    TabBar,
    NavBar,
  },
  mounted() {   
    this.initdata();
  },
  methods: {
    // 初始化数据
    async initdata() {
      await this.workerOrder_Detail();
    },
    // api-----获取工单详情
    workerOrder_Detail() {
      let id = this.$route.query.content;
      this.templateId=this.$route.query.content;
        this.workOrderName=this.$store.state.myordername;
      orderTemplateDetail(id).then((res) => {
        console.log("res===>>>",res);
        this.workOrderName = res.data.workOrderName;
        this.workNumber = res.data.workNumber;
        this.content = JSON.parse(res.data.workField);
        for (let i = 0; i < this.content.length; i++) {
          let item = this.content[i];
          if (item.displayType === "checkbox") {
            this.$set(this.contentObj, item.key, []);
          } else if (
            item.displayType === "dateSelect" ||
            item.displayType === "timeSelect"
          ) {
            item.isShow = `${"displayType" + i}`;
            this.$set(this.dateObj, item.isShow, false);
            this.$set(this.contentObj, item.key, null);
          } else {
            this.$set(this.contentObj, item.key, null);
          }
        }
      });
    },
    // 日期显示隐藏
    dateSelect(item) {
      if (!item.optionEditingClass) {
        this.dateObj[item.isShow] = !this.dateObj[item.isShow];
      }
    },
    // 时间显示隐藏
    timeSelect(item) {
      if (!item.optionEditingClass) {
        this.dateObj[item.isShow] = !this.dateObj[item.isShow];
      }
    },
    // 日期选择
    onConfirmDate(date, item) {
      let dateSelect = this.confirmdate(date);
      this.contentObj[item.key] = dateSelect;
      // 确认后隐藏
      this.dateObj[item.isShow] = !this.dateObj[item.isShow];
    },
    // 时间选择
    onConfirmTime(date, item) {
      this.contentObj[item.key] = date;
      // 确认后隐藏
      this.dateObj[item.isShow] = !this.dateObj[item.isShow];
      console.log(date);
    },
    // 日期确定值
    confirmdate(date) {
      console.log(date);
      let year = date.getFullYear();
      let month = date.getMonth() + 1;
      let day = date.getDate();
      if (month < 10) {
        month = "0" + month;
      }
      if (day < 10) {
        day = "0" + day;
      }
      console.log();
      return `${year}-${month}-${day}`;
    },
    // 提交数据
    sub(){
      // console.log("this.contentObj",this.contentObj);
      let conten1=JSON.stringify(this.contentObj);
          let data={
            content:conten1,
            templateId:parseInt(this.templateId),
            workOrderName:this.$store.state.myordername
            // this.$store.state.myordername
          }  
          console.log("contentObj=>>>",conten1);
        //  suOrder(data).then((res)=>{
        //    console.log("res",res.code);
        //    if(res.code==200){
        //      this.$toast("提交成功");
        //    }else{
        //      this.$toast("提交失败");
        //    }
        //  })
    }
    //
  },
};
</script>

<style lang="less" scoped>
.addorderrecord_wrapper {
  width: 375px;
  padding-bottom: 164px;
  background: #f5f5f5;
  .addorderrecord_content {
    margin-top: 10px;
    width: 100%;
    background-color: #fff;
    /deep/ .van-cell {
      height: 60px;
      border-bottom: 1px solid #e5e5e5;
      .van-field__label {
        margin: 10px 0;
        font-size: 14px;
        font-family: PingFangSC-Medium, PingFang SC;
        font-weight: 500;
        line-height: 20px;
      }
      .van-cell__value {
        margin: auto 0;
        font-size: 14px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;

        .van-field__control {
          color: black;
        }
        line-height: 20px;
      }
    }
    .van-button {
      width: 335px;
      height: 45px;
      position: absolute;
      margin: 0px 10px;
      margin-top: 25px;
    }
  }
}
</style>