144 lines
3.9 KiB
Vue
144 lines
3.9 KiB
Vue
<template>
|
|
<el-select v-model="partSelected" ref="selectTable" clearable filterable :filter-method="listPart" :style="'width: ' + selectWidth" @blur="$emit('input-blur', $event)">
|
|
<el-option style="display: none" v-for="part in partList" :key="part.id" :label="part.name" :value="part.id"/>
|
|
<el-table :data="partList" style="width: 100%" v-loading="loading" @row-click="handleSelectionChange">
|
|
<el-table-column label="序号" align="center" width="80">
|
|
<template scope="scope">
|
|
<span>{{ scope.$index + 1 }}</span>
|
|
</template>
|
|
</el-table-column>
|
|
<!-- <el-table-column label="商品名称" prop="name" width="120"/>-->
|
|
<!-- <el-table-column-->
|
|
<!-- width="180"-->
|
|
<!-- align="right">-->
|
|
<!-- <template slot="header" slot-scope="scope">-->
|
|
<!-- <el-input-->
|
|
<!-- v-model="queryParams.name"-->
|
|
<!-- size="mini"-->
|
|
<!-- @keyup.enter.native="listPart"-->
|
|
<!-- placeholder="输入关键字搜索"/>-->
|
|
<!-- </template>-->
|
|
<!-- <template slot-scope="scope">-->
|
|
<!-- {{scope.row.name}}-->
|
|
<!-- </template>-->
|
|
<!-- </el-table-column>-->
|
|
<el-table-column label="商品名称" prop="name" width="180" />
|
|
<el-table-column label="规格" prop="model" width="120"/>
|
|
<el-table-column label="商品编码" prop="code" width="120"/>
|
|
<el-table-column label="可用库存" prop="stock" width="80"/>
|
|
<el-table-column label="成本" prop="price" width="80"/>
|
|
</el-table>
|
|
<pagination @pagination="listPart" v-show="total > 0" :total="total" :page.sync="queryParams.pageNo" :limit.sync="queryParams.pageSize"
|
|
/>
|
|
</el-select>
|
|
</template>
|
|
|
|
<script>
|
|
|
|
import {getWaresPage} from "@/api/repair/wares";
|
|
|
|
export default {
|
|
name: "PartChoose",
|
|
props: {
|
|
selectWidth: {
|
|
type: String,
|
|
default: "45rem"
|
|
}
|
|
},
|
|
data() {
|
|
return {
|
|
partSelected: null,
|
|
partList: [
|
|
{
|
|
id: 1,
|
|
tenantId: 1,
|
|
barCode: "12344564632463",
|
|
code: "12312312",
|
|
name: "测试1",
|
|
model: "12321",
|
|
price: "100",
|
|
type: "不知道",
|
|
unit: "双",
|
|
warehouse: "6335b519fde3cabf298e763bc1c38df1",
|
|
miniStock: 100,
|
|
maxStock: 100,
|
|
stock: 20,
|
|
img: '',
|
|
attribute: "123213123",
|
|
corpId: 1,
|
|
coverImage: '',
|
|
carModel: "大车",
|
|
remark: "没有",
|
|
},
|
|
{
|
|
id: 2,
|
|
tenantId: 1,
|
|
barCode: "12344564632463",
|
|
code: "12312312",
|
|
name: "测试2",
|
|
model: "12321",
|
|
price: "10",
|
|
type: "不知道",
|
|
unit: "个",
|
|
warehouse: "6335b519fde3cabf298e763bc1c38df1",
|
|
miniStock: 10,
|
|
maxStock: 10,
|
|
stock: 5,
|
|
img: '',
|
|
attribute: "123213123",
|
|
corpId: 1,
|
|
coverImage: '',
|
|
carModel: "大车",
|
|
remark: "没有",
|
|
}
|
|
],
|
|
queryParams: {
|
|
pageNo: 1,
|
|
pageSize: 10,
|
|
name:undefined
|
|
},
|
|
total: 2,
|
|
loading: true
|
|
}
|
|
},
|
|
mounted() {
|
|
this.queryParams={
|
|
pageNo: 1,
|
|
pageSize: 10,
|
|
name:undefined
|
|
}
|
|
this.listPart()
|
|
},
|
|
methods: {
|
|
// TODO 获取商品信息
|
|
async listPart(val) {
|
|
this.queryParams.name = val
|
|
try{
|
|
this.loading = true
|
|
const res = await getWaresPage(this.queryParams)
|
|
this.partList = res.data.records
|
|
this.total = res.data.total
|
|
}finally {
|
|
this.loading = false
|
|
}
|
|
},
|
|
handleSelectionChange(data) {
|
|
data = {
|
|
...data,
|
|
wareId: data.warehouse
|
|
}
|
|
this.$emit("input", data)
|
|
this.$emit("selected", data)
|
|
this.$refs.selectTable.blur()
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
.pagination-container {
|
|
margin: 0 auto !important;
|
|
padding: 0 !important;
|
|
}
|
|
</style>
|