Urf 6 refactor all

jsconfig.json

@@ -4,6 +4,7 @@
     "target": "es5",
     "module": "esnext",
     "baseUrl": "./",
+    "strict": false,
     "moduleResolution": "bundler",
     "paths": {
       "@/*": [

src/components/basic/DatePicker.vue

@@ -0,0 +1,29 @@
+<template>
+  <v-menu 
+    v-model="menu_open" 
+    :close-on-content-click="false" 
+    transition="scale-transition" 
+    offset-y max-width="290px"
+    min-width="290px">
+    <template v-slot:activator="{ props }">
+      <v-text-field v-bind="props" label="日期" v-model="format_date"></v-text-field>
+    </template>
+    <v-date-picker v-model="date_temp" locale="zh-TW"></v-date-picker>
+  </v-menu>
+</template>
+
+<script setup>
+import { computed, ref } from 'vue';
+import { useDateFormat } from '@vueuse/core'
+
+const menu_open = ref(false)
+const date_temp = defineModel('date_temp')
+
+const format_date = computed(() => {
+  if (date_temp.value == null) return ""
+  setTimeout(() => {
+    menu_open.value = false
+  }, 120)
+  return useDateFormat(date_temp.value, 'YYYY-MM-DD').value
+})
+</script>

src/components/form/BasicInfo.vue

@@ -0,0 +1,36 @@
+<template>
+  <v-card color="grey-lighten-2">
+    <v-container>
+      <v-row>
+        <v-col class="v-col-auto">
+          <v-card title="基本資料" color="grey-lighten-1">
+          </v-card>
+        </v-col>
+      </v-row>
+      <v-row>
+        <v-col class="v-col-md-4 v-col-sm-6 v-col-12">
+          <v-text-field :rules="[rules.required]" v-model="basic_info.name" label="名字" />
+        </v-col>
+        <v-col class="v-col-md-4 v-col-sm-6 v-col-12">
+          <v-text-field :rules="[rules.required]" v-model="basic_info.org" label="申請單位" />
+        </v-col>
+        <v-col class="v-col-md-4 v-col-sm-6 v-col-12">
+          <v-text-field :rules="[rules.required]" v-model="basic_info.department" label="申請人系級" />
+        </v-col>
+        <v-col class="v-col-12">
+          <v-text-field :rules="[rules.required]" v-model="basic_info.email" label="email" />
+        </v-col>
+        <v-col class="v-col-12">
+          <v-text-field :rules="[rules.required]" v-model="basic_info.reason" label="借用理由" />
+        </v-col>
+      </v-row>
+    </v-container>
+  </v-card>
+</template>
+
+<script setup>
+const basic_info = defineModel('basic_info')
+const rules = {
+  required: value => !!value || 'Field is required',
+}
+</script>

src/components/form/ItemDisplay.vue

@@ -0,0 +1,132 @@
+<template>
+  <!-- <v-row v-if="wh.width.value >= width_rwd && item_data.length != 0">
+    <v-col class="v-col-12 pa-0 pl-1">
+      <v-container>
+        <v-row>
+          <v-col class="v-col-2 pa-1">
+            <v-card class="bg-grey-lighten-1 ">
+              <v-card-title class="justify-center text-subtitle-1 text-center px-1">
+                物品名稱
+              </v-card-title>
+            </v-card>
+          </v-col>
+          <v-col class="v-col-3 pa-1">
+            <v-card class="bg-grey-lighten-1 ">
+              <v-card-title class="justify-center text-subtitle-1 text-center">
+                歸還日期
+              </v-card-title>
+            </v-card>
+          </v-col>
+          <v-col class="v-col-3 pa-1">
+            <v-card class="bg-grey-lighten-1  ">
+              <v-card-title class="justify-center text-subtitle-1 text-center">
+                借用時間
+              </v-card-title>
+            </v-card>
+          </v-col>
+          <v-col class="v-col-2 pa-1 " >
+            <v-card class="bg-grey-lighten-1 ">
+              <v-card-title class="justify-center text-subtitle-1 text-center">
+                數量
+              </v-card-title>
+            </v-card>
+          </v-col>
+        </v-row>
+      </v-container>
+    </v-col>
+  </v-row> -->
+  <v-row v-if="wh.width.value < width_rwd && item_data.length != 0" v-for="(i, index) in item_data">
+    <v-col>
+      <v-card color="grey-lighten-3">
+        <v-container>
+          <v-row class="align-center" v-if="submit_flag">
+            <v-col class="v-col-12">
+              <span >物品名稱：</span>
+              {{ i[0] }}
+            </v-col>
+            <v-col class="v-col-12">
+              <span >借用日期：</span>
+              {{ i[1] }}
+            </v-col>
+            <v-col class="v-col-12">
+              <span >歸還日期：</span>
+              {{ i[2] }}
+            </v-col>
+            <v-col class="v-col-12">
+              <span >數　　量：</span>
+              {{ i[3] }}
+            </v-col>
+          </v-row>
+          <v-row class="align-center" v-else>
+            <v-col class="v-col-sm-2 v-col-12">
+              <span >物品名稱：</span>
+              {{ i[0] }}
+            </v-col>
+            <v-col class="v-col-sm-3 v-col-12">
+              <span >借用日期：</span>
+              {{ i[1] }}
+            </v-col>
+            <v-col class="v-col-sm-3 v-col-12">
+              <span >歸還日期：</span>
+              {{ i[2] }}
+            </v-col>
+            <v-col class="v-col-sm-2  v-col-12">
+              <span >數　　量：</span>
+              {{ i[3] }}
+            </v-col>
+            <v-col class="v-col-sm-2 v-col-12" >
+              <v-btn @click="delitem(index)" >刪除</v-btn>
+            </v-col>
+          </v-row>
+        </v-container>
+      </v-card>
+    </v-col>
+  </v-row>
+  <v-row v-if="wh.width.value > width_rwd && item_data.length != 0">
+    <v-col>
+      <v-table>
+        <thead>
+          <tr>
+            <th>物品名稱</th>
+            <th>借用日期</th>
+            <th>歸還日期</th>
+            <th>數量</th>
+            <th>  </th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr v-for="(i,index) in item_data" :key="i">
+            <td>
+              {{ i[0] }}
+            </td>
+            <td>
+              {{ i[1] }}
+            </td>
+            <td>
+              {{ i[2] }}
+            </td>
+            <td>
+              {{ i[3] }}
+            </td>
+            <td v-if="btn_flag">
+              <v-btn @click="delitem(index)" >刪除</v-btn>
+            </td>
+          </tr>
+        </tbody>
+      </v-table>
+    </v-col>
+  </v-row>
+</template>
+<script setup>
+import { useWindowSize } from '@vueuse/core'
+
+const wh = useWindowSize()
+const props = defineProps(['width_rwd','btn_flag','submit_flag'])
+const width_rwd = props.width_rwd
+const btn_flag = props.btn_flag
+const submit_flag = props.submit_flag
+const item_data = defineModel('item_data')
+const delitem = (index) => {
+  item_data.value.splice(index, 1)
+}
+</script>

src/components/form/ItemSelector.vue

@@ -0,0 +1,108 @@
+<template>
+  <v-row>
+    <v-col class="v-col-auto">
+      <v-card title="物品" color="grey-lighten-1"></v-card>
+    </v-col>
+  </v-row>
+  <v-row>
+    <v-col class="v-col-sm-3 v-col-12 ">
+      <v-select label="物品" :items="item_list[1]" v-model="item_temp"></v-select>
+    </v-col>
+    <v-col class="v-col-sm-3 v-col-12">
+      <DatePicker  v-model:date_temp="date_temp1"></DatePicker>
+    </v-col>
+    <v-col class="v-col-sm-3 v-col-12">
+      <DatePicker  v-model:date_temp="date_temp2"></DatePicker>
+    </v-col>
+    <v-col class="v-col-sm-3 v-col-12">
+      <v-text-field label="數量" type="number" v-model="quantity_temp"></v-text-field><!-- multiple -->
+    </v-col>
+    <v-col class="v-col-sm-4 v-col-12">
+      <v-btn @click="addobj()">新增</v-btn>
+    </v-col>
+  </v-row>
+  <v-row>
+    <v-col>
+      <v-alert v-if="alert" color="error" icon="$error" :title="alert_title" :text="alert_text" elevation="4">
+      </v-alert>
+    </v-col>
+  </v-row>
+</template>
+
+<script setup>
+import axios from 'axios';
+import { useDateFormat } from '@vueuse/core'
+import { ref } from 'vue';
+
+
+const props = defineProps(['item_list'])
+const item_data = defineModel('item_data')
+
+const alert_title = ref("時段無法借用")
+const alert_text = ref("可以查詢時間表，確認此時段的借用情況")
+const date_temp1 = ref()
+const date_temp2 = ref()
+const quantity_temp = ref()
+const item_temp = ref('')
+const alert = ref(false)
+
+const addobj = async () => {
+  let format_temp1 = useDateFormat(date_temp1.value, "YYYY-MM-DDTHH:mm").value
+  let format_temp2 = useDateFormat(date_temp2.value, "YYYY-MM-DDTHH:mm").value
+  /* console.log(date_format_temp1)
+  console.log(this.space_temp,this.space_date_temp.toString(),this.space_time_temp) */
+  let check = -1
+  await axios.get("http://localhost:3000/api/v1/reserve/integral_item_availability",
+    {
+      params: {
+        item_id: props.item_list[0][item_temp.value],
+        start_datetime: format_temp1,
+        end_datetime: format_temp2
+      }
+    },).then((response) => {
+      let temp = response['data']['data']
+      check = temp['available_quantity']
+      console.log(response);
+    })
+  console.log(check);
+  let alert_timer
+  if (quantity_temp.value <= 0) {
+    clearTimeout(alert_timer)
+    alert.value = true
+    alert_title.value = "物品數量不可為負數或零"
+    alert_text.value = "請確認需要的物品數量是否正確"
+    alert_timer = setTimeout(() => {
+      alert.value = false
+    }, 5000)
+    return
+  }
+  if (check < quantity_temp.value) {
+    clearTimeout(alert_timer)
+    alert.value = true
+    alert_title.value = "時段無法借用"
+    alert_text.value = "可以查詢時間表，確認次時段的借用情況"
+    alert_timer = setTimeout(() => {
+      alert.value = false
+    }, 5000)
+
+    return
+  }
+  let date1 = new Date(date_temp1.value)
+  let date2 = new Date(date_temp2.value)
+  if (date1.getTime() > date2.getTime()) {
+    clearTimeout(alert_timer)
+    alert.value = true
+    alert_title.value = "起始時間晚於結束時間"
+    alert_text.value = "請將起始時間與結束時間對調"
+    alert_timer = setTimeout(() => {
+      alert.value = false
+    }, 5000)
+    return
+  }
+  else if (item_temp.value != "" && date_temp1.value != "" && date_temp2.value != "" && quantity_temp.value != 0) {
+    item_data.value.push([item_temp.value, useDateFormat(format_temp1, "YYYY-MM-DD").value, useDateFormat(format_temp2, "YYYY-MM-DD").value, quantity_temp.value])
+    console.log(item_data)
+  }
+}
+
+</script>