add functions

2018-09-10 15:15:11 +08:00 · 2018-09-10 15:15:11 +08:00 · 0928a955ad
commit 0928a955ad
parent 61792a33b1
6 changed files with 142 additions and 94 deletions
--- a/src/assets/data.js
+++ b/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: []
      }
--- a/src/components/Bancai.vue
+++ b/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 of filtered" :title='bancai.id'>
+      <van-cell v-for="(bancai,index) of filtered" :title='bancai.id' :key='index'>
        <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: null,
-      selectAllBancai: false,
-      showDialog: false,
-      doubleChecked: false,
-      isConfirmButton: false,
-      isCancelButton: false
+      value: valueFormat,
+      selectAllBancai: selectAllBancaiFormat,
+      showDialog: showDialogFormat,
+      doubleChecked: doubleCheckedFormat,
+      isConfirmButton: isConfirmButtonFormat,
+      isCancelButton: isCancelButtonFormat
    };
  },
  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("全部加工（取消）");
-        });
-        */
--- a/src/components/Gongxu.vue
+++ b/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 " 
-      :title="content.proccessing "is-link clickable  
-      :to="'工序/'+content.proccessing "/>
+      <van-cell v-for="(content,index) of contents " :title="content.proccessing " is-link clickable :to="urlName+'/'+content.urlName " :key='index' />

    </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;
    }
--- a/src/components/Login.vue
+++ b/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: "",
-      password: ""
+      username: username,
+      password: password
    };
  },
  methods: {
-    logIn: function() {
-      this.$router.push({name:'工序' });
+    logIn: function(): void {
+      this.$router.push({ name: "gongxu" });
    }
  }
 });
--- a/src/components/Orders.vue
+++ b/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-search placeholder="请输入搜索订单号 " v-model="query " />
-
-    <van-collapse v-model="activeNames" accordion>
-      <van-collapse-item v-for="order in filtered " :title="order.orderNo ">
+    <van-nav-bar :left-text="leftText" left-arrow @click-left="onClickLeft " :title=" title" />
+    <div class='searchBar'>
+      <select v-model="selected">
+        <option value='orderNo'>订单号</option>
+        <option value='clientName'>客户</option>
+      </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: [],
-      query: null,
-      activeNames: ["0"]
+      orders: ordersFormat,
+      query: queryFormat,
+      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() {
-      this.$router.push({ path: "/工序" });
+    onClickLeft: function(): void {
+      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>
--- a/src/router.ts
+++ b/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:'工序',
-   
-      
-    }, {
-          path: '/工序/:id',
+      name: "gongxu"
+    },
+    {
+      path: "/gongxu/:id",
      component: Orders
    }
-    
  ]
 });