lanan-system-vue/src/views/repair/Components/ProjectChoose.vue
2024-10-12 09:34:47 +08:00

88 lines
2.6 KiB
Vue

<template>
<div>
<el-select ref="projectSelect" v-model="projectSelected" clearable filterable :filter-method="searchByName" @blur="$emit('input-blur', $event)">
<el-option v-for="project in projectList" :key="project.id" :label="project.name" :value="project.id" v-show="false"/>
<el-table v-loading="loading" :data="projectList" :stripe="true" :show-overflow-tooltip="true" @row-click="rowClick">
<el-table-column label="序号" align="center">
<template scope="scope">
<span>{{ scope.$index + 1 }}</span>
</template>
</el-table-column>
<el-table-column label="商品名称" prop="name" :show-overflow-tooltip="true" width="180" />
<!-- <el-table-column-->
<!-- width="180"-->
<!-- align="right">-->
<!-- <template slot="header" slot-scope="scope">-->
<!-- <el-input-->
<!-- v-model="queryParams.name"-->
<!-- size="mini"-->
<!-- @keyup.enter.native="listPage"-->
<!-- placeholder="输入关键字搜索"/>-->
<!-- </template>-->
<!-- <template slot-scope="scope">-->
<!-- {{scope.row.name}}-->
<!-- </template>-->
<!-- </el-table-column>-->
<el-table-column label="规格" prop="spec" :show-overflow-tooltip="true" width="180"/>
<el-table-column label="商品编码" prop="code" :show-overflow-tooltip="true" width="180"/>
</el-table>
<pagination @pagination="listPage" v-show="total > 0" :total="total" :page.sync="queryParams.pageNo" :limit.sync="queryParams.pageSize"
/>
</el-select>
</div>
</template>
<script>
import {getRepairProjectPage} from "@/api/repair/project";
export default {
name: "ProjectChoose",
data() {
return {
projectSelected: null,
projectList: [],
loading: false,
total: 0,
queryParams:{
pageNo: 1,
pageSize: 10,
name:undefined
}
}
},
mounted() {
this.queryParams={
pageNo: 1,
pageSize: 10,
name:undefined
}
this.listPage()
},
methods: {
async listPage(){
try {
this.loading = true
const res = await getRepairProjectPage(this.queryParams)
this.projectList = res.data.records
this.total = res.data.total
}finally {
this.loading = false
}
},
rowClick(row){
this.$emit("selected", row)
this.$refs.projectSelect.blur()
},
async searchByName(val){
this.queryParams.name = val
await this.listPage()
}
}
}
</script>
<style scoped lang="scss">
</style>