add functions

src/assets/data.js

@@ -1,12 +1,15 @@
 var infos = [
   {
+    urlName: "gongxu",
     name: "工序",
     categories: [
       {
+        urlName: "kailiao",
         proccessing: "开料",
         orders: [
           {
             orderNo: "开料订单1",
+            clientName: "张三",
             bancai: [
               { id: "开料订单板材A123", completed: true },
               { id: "开料订单板材A456", completed: false },
@@ -16,6 +19,7 @@ var infos = [
           },
           {
             orderNo: "开料订单2",
+            clientName: "李四",
             bancai: [
               { id: "开料订单板材B123", completed: false },
               { id: "开料订单板材B456", completed: false },
@@ -25,6 +29,7 @@ var infos = [
           },
           {
             orderNo: "开料订单3",
+            clientName: "王五",
             bancai: [
               { id: "开料订单板材C123", completed: false },
               { id: "开料订单板材C456", completed: false },
@@ -35,10 +40,13 @@ var infos = [
         ]
       },
       {
+        urlName: "fengbian",
         proccessing: "封边",
         orders: [
           {
             orderNo: "封边订单1",
+            clientName: "张a",
+
             bancai: [
               { id: "A123", completed: false },
               { id: "A456", completed: false },
@@ -48,10 +56,14 @@ var infos = [
           },
           {
             orderNo: "封边订单2",
+            clientName: "李b",
+
             bancai: []
           },
           {
             orderNo: "封边订单3",
+            clientName: "王c",
+
             bancai: [
               { id: "C123" },
               { id: "C456" },
@@ -62,14 +74,17 @@ var infos = [
         ]
       },
       {
+        urlName: "cekong",
         proccessing: "侧孔",
         orders: []
       },
       {
+        urlName: "wumianzuan",
         proccessing: "五面钻",
         orders: []
       },
       {
+        urlName: "zujianjiagong",
         proccessing: "组件加工",
         orders: []
       }

src/components/Bancai.vue

@@ -1,21 +1,16 @@
 <template>
   <div class='bancai'>
-
     <van-cell-group v-if="filtered.length!=0">
-
       <van-cell title="板材加工">
         <van-button size="medium" type="primary" @click="allGoProccessing">全部加工</van-button>
       </van-cell>
     </van-cell-group>
     <van-cell-group v-else>
-
       <van-cell title="没有需要加工的板材">
       </van-cell>
     </van-cell-group>
-
     <van-cell-group>
-
+      <van-cell v-for="(bancai,index) of filtered" :title='bancai.id' :key='index'>
-      <van-cell v-for="bancai of filtered" :title='bancai.id'>
         <van-button size="small" @click="show">查看</van-button>
         <van-button size="small" type="primary" @click="goProccessing(bancai)">加工</van-button>
       </van-cell>
@@ -38,33 +33,44 @@ import Data from "../assets/data.js";
 import { ImagePreview } from "vant";
 import { Dialog } from "vant";
 
+var valueFormat: string;
+var selectAllBancaiFormat: boolean;
+var showDialogFormat: false;
+var doubleCheckedFormat: false;
+var isConfirmButtonFormat: false;
+var isCancelButtonFormat: false;
+
 export default Vue.extend({
-  props: ["orders"],
+  props: {
+    orders: Object
+  },
   data() {
     return {
-      allBancai: [],
+      value: valueFormat,
-      value: null,
+      selectAllBancai: selectAllBancaiFormat,
-      selectAllBancai: false,
+      showDialog: showDialogFormat,
-      showDialog: false,
+      doubleChecked: doubleCheckedFormat,
-      doubleChecked: false,
+      isConfirmButton: isConfirmButtonFormat,
-      isConfirmButton: false,
+      isCancelButton: isCancelButtonFormat
-      isCancelButton: false
     };
   },
   computed: {
-    filtered: function() {
+    filtered: function(): Array<{ id: string; completed: boolean }> {
       if (this.value == null) {
-        return this.orders.bancai.filter(each => each.completed == false);
+        console.log(this.orders);
+        return this.orders.bancai.filter(
+          (each: { completed: boolean; id: String }) => each.completed == false
+        );
       }
       return this.orders.bancai.filter(
-        bancai =>
+        (bancai: { completed: boolean; id: String }) =>
           bancai.id.indexOf(this.value.trim()) != -1 &&
           bancai.completed == false
       );
     }
   },
   watch: {
-    doubleChecked: function() {
+    doubleChecked: function(): void {
       this.isConfirmButton = this.doubleChecked;
       this.isCancelButton = this.doubleChecked;
     },
@@ -73,7 +79,7 @@ export default Vue.extend({
     }
   },
   methods: {
-    show: function() {
+    show: function(): void {
       ImagePreview([
         "http://podularity.com/wp-content/plugins/digital-and-analog-clock-widget/images/cats/small_cat.jpg",
         "https://tse3.mm.bing.net/th?id=OIP.5dBxMtn5eChfbWxkEdve2gHaE8&pid=Api"
@@ -82,7 +88,7 @@ export default Vue.extend({
     onClickLeft: function() {
       this.$router.push({ path: "/" + this.$route.params.id });
     },
-    goProccessing: function(bancai) {
+    goProccessing: function(bancai: { id: string; completed: boolean }): void {
       Dialog.confirm({
         title: "提示",
         message: "确认加工吗?"
@@ -94,16 +100,15 @@ export default Vue.extend({
           console.log("板材:" + bancai.completed);
         });
     },
-    allGoProccessing: function() {
+    allGoProccessing: function(): void {
       this.showDialog = true;
-      this.doubleChecked = false;
     },
-    beforeClose: function(action, done) {
+    beforeClose: function(action: string, done: () => void) {
       if (action == "confirm") {
         this.filtered.filter(each => (each.completed = true));
-
         setTimeout(done, 0);
       } else {
+        this.doubleChecked = false;
         done();
       }
     }
@@ -113,15 +118,3 @@ export default Vue.extend({
 
 <style scoped lang="scss">
 </style>
-/*
-Dialog.confirm({
-        title: "提示",
-        message: "确定要全部加工【" + this.orders.orderNo + "】吗?"
-      })
-        .then(() => {
-          this.filtered.filter(each => (each.completed = true));
-        })
-        .catch(() => {
-          console.log("全部加工（取消）");
-        });
-        */

src/components/Gongxu.vue

@@ -1,28 +1,30 @@
 <template>
   <div id="app">
-    <van-nav-bar title="工序" />
+    <van-nav-bar :title='title' />
 
     <van-cell-group>
-      <van-cell v-for="content of contents " 
+      <van-cell v-for="(content,index) of contents " :title="content.proccessing " is-link clickable :to="urlName+'/'+content.urlName " :key='index' />
-      :title="content.proccessing "is-link clickable  
-      :to="'工序/'+content.proccessing "/>
 
     </van-cell-group>
-  
   </div>
 </template>
 
 <script lang="ts">
 import Vue from "vue";
 import Data from "../assets/data.js";
+var title: String = Data[0].name;
+var urlName: String = Data[0].urlName;
+var contents: Array<object>;
 
 export default Vue.extend({
   data: function() {
     return {
-      contents: []
+      contents: contents,
+      title: title,
+      urlName: urlName
     };
   },
-  mounted: function() {  
+  mounted: function(): void {
     for (var gongxu of Data) {
       this.contents = gongxu.categories;
     }

src/components/Login.vue

@@ -1,6 +1,5 @@
 <template>
   <div class='login'>
-
     <div class='logo'>
       <div class='gap'></div>
       <img src="../assets/logo.png" alt="">
@@ -9,11 +8,9 @@
       <van-col span='20' offset='2'>
         <van-cell-group>
           <van-field v-model="username" required clearable label="用户名" icon="question" placeholder="请输入用户名" @click-icon="$toast('question')" />
-
           <van-field v-model="password" type="password" label="密码" placeholder="请输入密码" required />
           <van-button size="large" type="primary" @click="logIn">登入</van-button>
         </van-cell-group>
-
       </van-col>
     </van-row>
   </div>
@@ -21,16 +18,18 @@
 
 <script lang="ts">
 import Vue from "vue";
+var username: string = "";
+var password: string = "";
 export default Vue.extend({
   data: function() {
     return {
-      username: "",
+      username: username,
-      password: ""
+      password: password
     };
   },
   methods: {
-    logIn: function() {
+    logIn: function(): void {
-      this.$router.push({name:'工序' });
+      this.$router.push({ name: "gongxu" });
     }
   }
 });

src/components/Orders.vue

@@ -1,15 +1,21 @@
 <template>
   <div>
-    <van-nav-bar left-text="工序" left-arrow @click-left="onClickLeft " :title=" this.$route.params.id" />
+    <van-nav-bar :left-text="leftText" left-arrow @click-left="onClickLeft " :title=" title" />
-
+    <div class='searchBar'>
-    <van-search placeholder="请输入搜索订单号 " v-model="query " />
+      <select v-model="selected">
-
+        <option value='orderNo'>订单号</option>
-    <van-collapse v-model="activeNames" accordion>
+        <option value='clientName'>客户</option>
-      <van-collapse-item v-for="order in filtered " :title="order.orderNo ">
+      </select>
+      <van-search class='searchInput' :placeholder="'搜索' " v-model="query " />
+    </div>
+    <van-collapse v-model="activeNames" accordion v-if="filtered.length">
+      <van-collapse-item class='helloooooo' v-for="(order,index) in filtered " :title="order.orderNo+'--'+order.clientName " :key='index'>
         <bancai :orders='order'></bancai>
       </van-collapse-item>
-
     </van-collapse>
+    <van-cell-group v-else>
+      <van-cell title="无此订单信息" />
+    </van-cell-group>
   </div>
 
 </template>
@@ -18,35 +24,58 @@
 import Vue from "vue";
 import Data from "../assets/data.js";
 import Bancai from "./Bancai.vue";
+
+var ordersFormat: Array<{
+  clientName: string;
+  orderNo: string;
+  bancai: Array<object>;
+}>;
+var queryFormat: string;
+var activeNamesFormat: Array<string> = ["0"];
+var leftTextFormat: string = Data[0].name;
+var titleFormat: string;
+var selectedFormat: string = "orderNo";
+
 export default Vue.extend({
   components: { Bancai },
-  props: ["infos"],
+
   data() {
     return {
-      orders: [],
+      orders: ordersFormat,
-      query: null,
+      query: queryFormat,
-      activeNames: ["0"]
+      activeNames: activeNamesFormat,
+      leftText: leftTextFormat,
+      title: titleFormat,
+      selected: selectedFormat
     };
   },
   computed: {
     filtered: function() {
-      if (this.value == null) {
+      if (this.query == null) {
+        console.log(this.orders);
         return this.orders;
       }
+      if (this.selected == "orderNo") {
         return this.orders.filter(
-        order => order.orderNo.indexOf(this.value.trim()) != -1
+          order => order.orderNo.indexOf(this.query.trim()) != -1
         );
+      } else if (this.selected == "clientName") {
+        return this.orders.filter(
+          order => order.clientName.indexOf(this.query.trim()) != -1
+        );
+      }
     }
   },
   methods: {
-    onClickLeft: function() {
+    onClickLeft: function(): void {
-      this.$router.push({ path: "/工序" });
+      this.$router.push({ path: "/gongxu" });
     }
   },
-  mounted: function() {
+  beforeMount: function(): void {
     for (var gongxu of Data) {
       for (var each of gongxu.categories) {
-        if (each.proccessing == this.$route.params.id) {
+        if (each.urlName == this.$route.params.id) {
+          this.title = each.proccessing;
           this.orders = each.orders;
         }
       }
@@ -55,5 +84,16 @@ export default Vue.extend({
 });
 </script>
 
-<style scoped lang="scss">
+<style lang="scss">
+.searchBar {
+  display: flex;
+  .searchInput {
+    width: 100%;
+  }
+}
+.helloooooo {
+  .van-collapse-item__content {
+    padding: 0px;
+  }
+}
 </style>

src/router.ts

@@ -14,18 +14,17 @@ export default new Router({
     },
     {
       path: "/login",
-      component: Login
+      component: Login,
+      name: "login"
     },
     {
-      path: "/工序",
+      path: "/gongxu",
       component: Gongxu,
-      name:'工序',
+      name: "gongxu"
-   
+    },
-      
+    {
-    }, {
+      path: "/gongxu/:id",
-          path: '/工序/:id',
       component: Orders
     }
-    
   ]
 });