## 物料选择组件使用说明

```
该组件用于物料申请，数量调整
```

## API

### Props

|   属性名    |  类型   | 默认值 |   可选值   |          说明           |
| :---------: | :-----: | :----: | :--------: | :---------------------: |
| showChecked | Boolean | false  | true/false |     是否需要复选框      |
|    info     | Object  |   {}   |     -      | 列表数据 **格式见下文** |

### lists 格式

```json
{
  id: 1,
  name: "正泰漏保", // 名称
  code: 'NO.202006170015', // 编号
  remark: '这个空开盒子和其他的空开有什么不一样，这里可以写一下', // 描述
  quantity: 1, // 默认数量
  min: 1, // 数量最小值
  max: 100, // 数量最大值
  images: "https://vkceyugu.cdn.bspapp.com/VKCEYUGU-dc-site/460d46d0-4fcc-11eb-8ff1-d5dcf8779628.png", // 图片
  checked: false, // 是否勾选
  disabled: true // 是否禁用数量调整，如果禁用则会显示添加申请按钮
}
```

### Events

|   事件称名    |     说明     |   返回值   |
| :-----------: | :----------: | :--------: |
|  @numChange   | 数量发生改变 | 改变的数量 |
| @selectChange | 勾选发生改变 | 勾选的状态 |
| @apply | 点击添加申请 | 无 |

## 组件用法

### 基础用法

```html
<select-parts
  v-for="(item, index) in lists" 
  :key="index"
  :info="item"
  :show-checked="false"
  @numChange="numChange($event, index)"
  @selectChange="selectChange($event, index)"
  @apply="apply(index)"
></select-parts>
```

```js
import selectParts from "@/components/parts/index"
export default {
  components: {
    selectParts,
  },
  data() {
    return {
      lists: [
        {
            id: 1,
            name: "正泰漏保",
            code: 'NO.202006170015',
            remark: '这个空开盒子和其他的空开有什么不一样，这里可以写一下',
            quantity: 1,
            min: 1,
            max: 100,
            images: "https://vkceyugu.cdn.bspapp.com/VKCEYUGU-dc-site/460d46d0-4fcc-11eb-8ff1-d5dcf8779628.png",
            checked: false,
            disabled: true
          },
          {
            id: 1,
            name: "挚达广汽充电桩",
            code: 'NO.202006170014',
            remark: '这个空开盒子和其他的空开有什么不一样，这里可以写一下',
            quantity: 3,
            min: 1,
            max: 5,
            images: "https://vkceyugu.cdn.bspapp.com/VKCEYUGU-dc-site/460d46d0-4fcc-11eb-8ff1-d5dcf8779628.png",
            checked: false,
            disabled: true
          },
      ],
    }
  },
  methods: {
    apply(index) { // 添加申请
      this.$set(this.lists[index], 'disabled', false)
    },
    numChange(val, index) { // 设置数量
      this.$set(this.lists[index], 'num', val)
    },
    selectChange(val, index) { // 设置勾选状态
      this.$set(this.lists[index], 'checked', val)
    },
  },
}
```
