2023-08-09 DXS 领用新增表单

src/views/teacher/schoolProperty/useAdd.vue

 <template>
 <template>
   <van-nav-bar title="新增物品领用" left-text="返回" left-arrow @click-left="goback"></van-nav-bar>
   <van-nav-bar title="新增物品领用" left-text="返回" left-arrow @click-left="goback"></van-nav-bar>
+  <van-form @submit="onSubmit" class="formBlock" label-align="right" label-width="80px">
+    <van-cell-group inset>
+      <van-field v-model="code" label="自编码" placeholder="请输入自编码"/>
+      <van-field v-model="code" label="设备名称" placeholder="请输入设备名称"/>
+      <van-field v-model="code" label="型号" placeholder="请输入型号"/>
+      <van-field is-link readonly v-model="dateChoose" label="领用日期" @click="showPicker = true"
+                 placeholder="请选择领用日期"/>
+      <van-calendar v-model:show="showPicker" @confirm="onConfirm" />
+      <van-field v-model="code" label="领用人" placeholder="请输入领用人"/>
+    </van-cell-group>
+    <div>
+      <van-button class="sureBtn" round block type="primary" native-type="submit">确 定</van-button>
+    </div>
+  </van-form>
 </template>
 </template>
 
 
 <script setup>
 <script setup>
   import { useRouter } from "vue-router";
   import { useRouter } from "vue-router";
+  import { ref } from "vue";
   const router = useRouter();
   const router = useRouter();
+
+  const code = ref('')
+  const dateChoose = ref('')
+  let showPicker = ref(false) //是否显示日历选择
+  const onConfirm = (date) => {
+    dateChoose.value  = `${date.getFullYear()}-${date.getMonth() + 1}-${date.getDate()}`
+    showPicker.value = false;
+  };
+
   //返回上一页
   //返回上一页
   const goback = () => {
   const goback = () => {
     router.back();
     router.back();
   };
   };
+
+  //表单提交
+  const onSubmit = ()=>{}
 </script>
 </script>
 
 
 <style scoped>
 <style scoped>
+.sureBtn {
+  margin: 30px auto;
+  width: 80%;
+}
+.van-cell-group--inset {
+  margin: 0px;
+}
 
 
 </style>
 </style>