[TOC]
## 數據流向
組件間的數據流
* 父向子傳遞用 props
* 子向父傳遞用 vue 內置的自定義事件，即 this.$emit
* 父子雙向傳遞用 v-model 或 .sync
* 跨越傳遞用 vuex
* 緊密耦合的祖孫間傳遞也可以考慮用父組件作為中間運輸層
* 緊密耦合的兄弟間傳遞也可以考慮用父組件作為中轉運輸層
## 組件名稱
`pages `下面的文件夾代表著模塊的名字
單詞盡量保持一個（good: car order cart）（bad: carInfo carpage），超過下劃線
盡量是名詞（good: car）（bad: greet good）
以小寫開頭（good: car）（bad: Car）
業務選擇組件放在`@/pages/components/Modules`里面（vendor_select,下劃線）
## a-cart
代碼塊用`a-cart`包裹
* title名稱
* slot="extra"插入右側操作按鈕
```
<a-card class="card" title="查詢結果">
<div slot="extra">
<a-space>
<a-button icon="form" type="primary" @click="fnAdd">新增</a-button>
</a-space>
</div>
</a-card>
```
## template布局
查詢條件
```
<template>
<a-card class="card" title="查詢條件">
<a-form
class="form"
:form="form"
:label-col="global.searchItemLayout.labelCol"
:wrapper-col="global.searchItemLayout.wrapperCol"
@keydown.native.enter.prevent="handleSearch"
>
<a-row type="flex">
<!-- 條件 -->
<a-col flex="1 1 230px">
<a-row>
<a-col :md="8" :sm="24">
<a-form-item class="flex-item5" label="單據編碼">
<a-input
v-decorator="[`billCode`]"
placeholder="請輸入單據編碼"
@keyup.enter.native="handleSearch"
/>
</a-form-item>
</a-col>
<a-col :md="8" :sm="24">
<a-form-item class="flex-item5" label="單據名稱">
<a-input
v-decorator="[`billName`]"
placeholder="請輸入單據名稱"
@keyup.enter.native="handleSearch"
/>
</a-form-item>
</a-col>
<a-col :md="8" :sm="24">
<a-form-item class="flex-item5" label="單據狀態">
<a-select
v-decorator="['billStatus']"
placeholder="請選擇單據狀態"
>
<a-select-option value>請選擇</a-select-option>
<a-select-option
v-for="(v, i) in TD.billState"
:key="i"
:class="{ 'hide-select-item': !v }"
:value="i"
>{{ v }}
</a-select-option>
</a-select>
</a-form-item>
</a-col>
</a-row>
<a-row v-show="isExpand">
<a-col :md="8" :sm="24">
<a-form-item class="flex-item5" label="單據類型">
<a-select
v-decorator="['billType']"
placeholder="請選擇單據類型"
>
<a-select-option value>請選擇</a-select-option>
<a-select-option
v-for="(v, i) in TD.purchaseOrderBillType"
:key="i"
:class="{ 'hide-select-item': !v }"
:value="i"
>{{ v }}
</a-select-option>
</a-select>
</a-form-item>
</a-col>
<a-col :md="8" :sm="24">
<a-form-item class="flex-item5" label="訂單狀態">
<a-select
v-decorator="['orderStatus']"
placeholder="請選擇訂單狀態"
>
<a-select-option value>請選擇</a-select-option>
<a-select-option
v-for="(v, i) in TD.orderStatus"
:key="i"
:class="{ 'hide-select-item': !v }"
:value="i"
>{{ v }}
</a-select-option>
</a-select>
</a-form-item>
</a-col>
<a-col :md="8" :sm="24">
<a-form-item class="flex-item5" label="需求人名稱">
<a-input
v-decorator="[`demandUserName`]"
placeholder="請輸入需求人名稱"
@keyup.enter.native="handleSearch"
/>
</a-form-item>
</a-col>
</a-row>
<a-row v-show="isExpand">
<a-col :md="8" :sm="24">
<a-form-item class="flex-item5" label="供應商編碼">
<a-input
v-decorator="[`vendorCode`]"
placeholder="請輸入供應商編碼"
@keyup.enter.native="handleSearch"
/>
</a-form-item>
</a-col>
<a-col :md="8" :sm="24">
<a-form-item class="flex-item5" label="供應商名稱">
<a-input
v-decorator="[`vendorName`]"
placeholder="請輸入供應商名稱"
@keyup.enter.native="handleSearch"
/>
</a-form-item>
</a-col>
<a-col :md="8" :sm="24">
<a-form-item class="flex-item5" label="合同編號">
<a-input
v-decorator="[`contractNo`]"
placeholder="請輸入合同編號"
@keyup.enter.native="handleSearch"
/>
</a-form-item>
</a-col>
</a-row>
<a-row v-show="isExpand">
<a-col :md="8" :sm="24">
<a-form-item class="flex-item5" label="合同名稱">
<a-input
v-decorator="[`contractName`]"
placeholder="請輸入合同名稱"
@keyup.enter.native="handleSearch"
/>
</a-form-item>
</a-col>
<a-col :md="8" :sm="24"></a-col>
<a-col :md="8" :sm="24"></a-col>
</a-row>
</a-col>
<!-- 按鈕 -->
<a-col flex="0 1 230px">
<span style="float: right; margin-top: 5px;">
<a-button type="primary" @click="handleSearch">查詢</a-button>
<a-button style="margin-left: 8px" @click="handleReset"
>重置</a-button
>
<a @click="handleToggle" style="margin-left: 8px">
{{ isExpand ? "收起" : "展開" }}
<a-icon :type="isExpand ? 'up' : 'down'" />
</a>
</span>
</a-col>
</a-row>
</a-form>
</a-card>
</template>
<script>
```
基本信息
```
<a-row :gutter="24">
<a-col?:span="16">
</a-col>
<a-col?:span="8">
</a-col>
</a-row>
<a-row :gutter="24">
<a-col?:span="8">
</a-col>
<a-col?:span="8">
</a-col>
<a-col?:span="8">
</a-col>
</a-row>
<a-row :gutter="24">
<a-col?:span="24">
</a-col>
</a-row>
```
```
<a-form-item?label="合同名稱"?v-bind="global.twoItemLayout">
</a-form-item>
<a-form-item?label="創建來源"?v-bind="global.oneItemLayout">
</a-form-item>
```
