devicesmgt/sgzb-ui/src/components/HoldingpoleDialog/index.vue

98 lines
3.5 KiB
Vue

<!-- HoldingpoleDialog.vue -->
<template>
<el-dialog title="明细" :visible.sync="dialogVisible" :close-on-click-modal="false" @close="handleClose"
@open="handleOpen" append-to-body>
<!-- 自定义弹窗内容 -->
<div class="dialog-content">
<el-form :model="queryParams" ref="queryForm" size="small" :inline="true" label-width="80px">
<el-form-item label="关键字" prop="keyWord">
<el-input v-model="queryParams.keyWord" placeholder="请输入关键字" clearable maxlength="50"
style="width: 240px" @keyup.enter.native.prevent="handleQuery" />
</el-form-item>
<el-form-item>
<el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
<el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
</el-form-item>
</el-form>
<el-table :data="maTypeDetails" style="width: 100%">
<el-table-column label="序号" align="center" type="index" />
<el-table-column label="类型名称" align="center" prop="typeName" :show-overflow-tooltip="true" />
<el-table-column label="规格型号" align="center" prop="typeModelName" :show-overflow-tooltip="true" />
<el-table-column label="单位" align="center" prop="unitName" :show-overflow-tooltip="true" />
<el-table-column label="预领数量" align="center" prop="partNum" :show-overflow-tooltip="true" />
</el-table>
<pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum"
:limit.sync="queryParams.pageSize" @pagination="getList" />
</div>
</el-dialog>
</template>
<script>
import { getWholeSetDetails } from '@/api/store/newBuy'
export default {
props: {
// 接收外部传入的参数
holdingpoleData: {
type: Object,
required: true
},
initialVisible: Boolean
},
data() {
return {
dialogVisible: this.initialVisible, // 控制弹窗显隐状态
maTypeDetails: [],
total: 0,
queryParams: {
pageNum: 1,
pageSize: 10,
typeId: undefined,
keyWord: '',
purchaseNum: undefined,
},
};
},
watch: {
// 监听 initialVisible 属性的变化
initialVisible(newVal) {
this.dialogVisible = newVal;
}
},
methods: {
getList() {
getWholeSetDetails(this.queryParams).then(res => {
this.maTypeDetails = res.rows
this.total = res.total
})
},
handleClose() {
this.$emit('close');
this.maTypeDetails.splice(0, this.maTypeDetails.length);
},
handleOpen() {
this.queryParams.typeId = this.holdingpoleData.typeId
this.queryParams.purchaseNum = this.holdingpoleData.purchaseNum
this.getList()
},
/** 搜索按钮操作 */
handleQuery() {
this.queryParams.pageNum = 1
this.getList()
},
/** 重置按钮操作 */
resetQuery() {
this.resetForm('queryForm')
this.handleQuery()
},
}
};
</script>
<style scoped>
/* 添加自定义样式 */
.dialog-content {
/* ... */
}
</style>