Merge pull request #1 from pkuphysu/AC-Formulate

Vue Formulate 制作表单以及 ESLint 配置
pkuphysu · Mar 28, 2020 · df133c6 · df133c6
2 parents 952fe6f + c83519e
commit df133c6
Show file tree

Hide file tree

Showing 22 changed files with 502 additions and 326 deletions.
diff --git a/.eslintrc.js b/.eslintrc.js
@@ -1,14 +1,26 @@
+/**
+ * Prettier is evil and unreliable, at least for vue.
+ * Do not enable prettier plugin for eslint,
+ * there will be some annoying, ugly conflicts.
+ * Only use prettier in editor in selection
+ * and then eslint the error introduced
+ */
 module.exports = {
   root: true,
   env: {
     node: true
   },
-  extends: [
-    'plugin:vue/recommended',
-    'eslint:recommended',
-    'prettier/vue'
-  ],
+  extends: ['eslint:recommended', 'plugin:vue/recommended'],
   rules: {
+    'vue/max-attributes-per-line': [
+      'warn',
+      {
+        singleline: 4
+      }
+    ],
+    'vue/script-indent': 'warn',
+    'space-infix-ops': 'warn',
+    'max-len': 'warn',
     'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off',
     'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off'
   },

diff --git a/.prettierrc b/.prettierrc
@@ -0,0 +1,8 @@
+{
+  "printWidth": 80,
+  "tabWidth": 2,
+  "semi": false,
+  "singleQuote": true,
+  "arrowParens": "avoid",
+  "endOfLine": "lf"
+}
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -8,9 +8,10 @@
     "lint": "vue-cli-service lint"
   },
   "dependencies": {
+    "@braid/vue-formulate": "^2.2.6",
     "axios": "^0.19.2",
     "babel-runtime": "^6.26.0",
-    "bootstrap-vue": "^2.7.0",
+    "bootstrap-vue": "^2.9.0",
     "bootswatch": "^4.4.1",
     "core-js": "^3.4.4",
     "vue": "^2.6.10",

diff --git a/src/App.vue b/src/App.vue
@@ -1,22 +1,26 @@
 <template>
   <div id="app">
-    <!-- <div id="nav">
-      <router-link to="/">Home</router-link>|
-      <router-link to="/about">About</router-link>
-    </div>-->
     <div>
       <b-navbar toggleable="lg" type="dark" variant="primary" right>
-        <b-navbar-brand href="#">PKU Physics</b-navbar-brand>
-        <b-navbar-toggle target="nav-collapse"></b-navbar-toggle>
+        <b-navbar-brand href="#">
+          PKU Physics
+        </b-navbar-brand>
+        <b-navbar-toggle target="nav-collapse" />
         <b-collapse id="nav-collapse" is-nav>
           <b-navbar-nav>
-            <b-nav-item to="/bookB116">主页</b-nav-item>
-            <b-nav-item @click="logout">注销</b-nav-item>
+            <b-nav-item to="/bookB116">
+              主页
+            </b-nav-item>
+            <b-nav-item @click="logout">
+              注销
+            </b-nav-item>
           </b-navbar-nav>
         </b-collapse>
       </b-navbar>
     </div>
-    <router-view />
+    <b-container>
+      <router-view />
+    </b-container>
     <div class="px-3 position-fixed fixed-bottom m-0">
       <DisAlert
         v-for="(message, i) in $store.state.alertMessages"
@@ -49,5 +53,4 @@ export default {
 }
 </script>
 
-<style>
-</style>
+<style></style>
diff --git a/src/api.js b/src/api.js
@@ -78,7 +78,9 @@ export default {
   bookingAll: async () => await requestApi('get', '/api/booking/all', true),
   book: async data => {
     let rawId = store.state.user.rawId
-    return await requestApi('post', '/api/booking/book?rawId=' + rawId, true, data)
+    return (
+      await requestApi('post', '/api/booking/book?rawId=' + rawId, true, data)
+    )
   },
   cancel: async (book_id, vercode) =>
     await requestApi('post', '/api/booking/cancel', true, { book_id, vercode }),

diff --git a/src/components/BookRecord.vue b/src/components/BookRecord.vue
@@ -6,8 +6,12 @@
         :variant="badge.variant"
         class="float-left"
         style="font-size: 0.9em"
-      >{{ badge.text }}</b-badge>
-      <h5 class="d-inline-block ml-1 mb-0">{{B116ROOMS[record.roomId]}}</h5>
+      >
+        {{ badge.text }}
+      </b-badge>
+      <h5 class="d-inline-block ml-1 mb-0">
+        {{ B116ROOMS[record.roomId] }}
+      </h5>
       <b-button
         v-if="userId == sponsorId && !record.canceled"
         variant="outline-primary"
@@ -16,51 +20,74 @@
         @click="cancel"
       >
         {{
-        countDown === null
-        ? '取消'
-        : countDown === 0
-        ? '再次获取'
-        : `稍等(${countDown})`
+          countDown === null
+            ? '取消'
+            : countDown === 0
+              ? '再次获取'
+              : `稍等(${countDown})`
         }}
       </b-button>
     </b-list-group-item>
     <b-collapse :visible="countDown !== null">
       <b-input-group>
-        <b-form-input v-model="vercode" type="number" placeholder="验证码将发至您的北大邮箱" />
+        <b-form-input
+          v-model="vercode"
+          type="number"
+          placeholder="验证码将发至您的北大邮箱"
+        />
         <b-input-group-append>
-          <b-button variant="outline-dark" @click="submit">提交</b-button>
+          <b-button variant="outline-dark" @click="submit">
+            提交
+          </b-button>
         </b-input-group-append>
       </b-input-group>
     </b-collapse>
     <b-list-group-item class="booking-detail">
       <p>预约时间：{{ formatTimeRange(record.startTime, record.endTime) }}</p>
       <p>
         发起人：{{ record.sponsor }} ({{
-        record.confirmStatus[0].rawStudentId
+          record.confirmStatus[0].rawStudentId
         }})
       </p>
       <p>发起时间：{{ formatTime(record.bookTime) }}</p>
       <p>参与人数：{{ record.studentNumber }}</p>
       <p>用途：{{ record.description }}</p>
     </b-list-group-item>
-    <b-list-group-item v-for="student in record.confirmStatus.slice(1)" :key="student.studentId">
+    <b-list-group-item
+      v-for="student in record.confirmStatus.slice(1)"
+      :key="student.studentId"
+    >
       参与人：{{ student.rawStudentId }}
       <b-button
         v-if="student.confirmed"
         variant="outline-success"
         class="float-right p-0"
         disabled
-      >已确认</b-button>
+      >
+        已确认
+      </b-button>
       <span v-else-if="!dead && !record.canceled">
         <b-button
           v-if="student.studentId == userId"
           variant="outlined-primary"
           class="float-right p-0"
           @click="confirm"
         >确认</b-button>
-        <b-button v-else variant="outline-warning" class="float-right p-0" disabled>等待确认</b-button>
+        <b-button
+          v-else
+          variant="outline-warning"
+          class="float-right p-0"
+          disabled
+        >等待确认</b-button>
       </span>
-      <b-button v-else variant="outline-danger" class="float-right p-0" disabled>未确认</b-button>
+      <b-button
+        v-else
+        variant="outline-danger"
+        class="float-right p-0"
+        disabled
+      >
+        未确认
+      </b-button>
     </b-list-group-item>
   </b-list-group>
 </template>

diff --git a/src/components/BookingForm.vue b/src/components/BookingForm.vue
diff --git a/src/components/DisAlert.vue b/src/components/DisAlert.vue
@@ -5,7 +5,9 @@
     dismissible
     @dismissed="countDown = 0"
     @dismiss-count-down="countDownChanged"
-  >{{ message.text }}</b-alert>
+  >
+    {{ message.text }}
+  </b-alert>
 </template>
 
 <script>