[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>
```
