nw-cqdevicemgt-ui/src/views/claimAndRefund/secondStore/second-manage/components/home-pages.vue

336 lines
11 KiB
Vue

<template>
<div>
<el-radio-group
size="small"
v-model="queryParams.unitId"
style="margin-bottom: 8px"
@change="onChangeRadio"
>
<el-radio-button
:key="item.id"
:label="item.unitId"
v-for="item in secondList"
>
{{ item.name }}
</el-radio-button>
<!-- <el-radio-button label="机具二级库">机具二级库</el-radio-button>
<el-radio-button label="输电二级库">输电二级库</el-radio-button>
<el-radio-button label="揽电二级库">揽电二级库</el-radio-button> -->
</el-radio-group>
<el-form
ref="queryForm"
size="small"
:inline="true"
:model="queryParams"
>
<el-row>
<el-col :span="4">
<el-form-item prop="keyword">
<el-input
v-model="queryParams.keyword"
placeholder="请输入关键字"
clearable
@keyup.enter.native="handleQuery"
/>
</el-form-item>
</el-col>
<!-- <el-col :span="4">
<el-form-item prop="unitId">
<el-select
v-model="queryParams.unitId"
placeholder="请选择单位名称"
clearable
>
<el-option
v-for="item in unitList"
filterable
:key="item.id"
:label="item.name"
:value="item.id"
/>
</el-select>
</el-form-item>
</el-col>
<el-col :span="4">
<el-form-item prop="proId">
<el-select
v-model="queryParams.proId"
placeholder="请选择工程名称"
clearable
>
<el-option
v-for="item in proList"
filterable
:key="item.id"
:label="item.name"
:value="item.id"
/>
</el-select>
</el-form-item>
</el-col> -->
<el-col :span="4">
<el-form-item prop="typeId">
<el-select
v-model="queryParams.typeId"
placeholder="请选择机具名称"
clearable
filterable
>
<el-option
v-for="typeItem in typeList"
:key="typeItem.typeId"
:label="typeItem.typeName"
:value="typeItem.typeId"
/>
</el-select>
</el-form-item>
</el-col>
<el-col :span="4">
<el-form-item prop="modelId">
<treeselect
v-model="queryParams.modelId"
default-expand-all
:options="equipmentTypeList"
placeholder="请选择规格型号"
:disable-branch-nodes="true"
noChildrenText="没有数据了"
noOptionsText="没有数据"
noResultsText="没有搜索结果"
/>
</el-form-item>
</el-col>
<el-col :span="4">
<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-col>
</el-row>
</el-form>
<el-row :gutter="8" class="mb8">
<el-col
:span="1.5"
:key="index"
v-for="(item, index) in handleBtnList"
>
<el-button
plain
size="mini"
type="primary"
@click="onClickSecond(item.btn_type)"
>
{{ item.btn_title }}
</el-button>
</el-col>
</el-row>
<el-table v-loading="loading" :data="deviceList" border>
<el-table-column
align="center"
key="1"
label="序号"
type="index"
:index="
indexContinuation(queryParams.pageNum, queryParams.pageSize)
"
/>
<el-table-column
label="机具名称"
align="center"
key="4"
prop="typeName"
show-overflow-tooltip
/>
<el-table-column
label="规格型号"
align="center"
key="5"
prop="modelName"
show-overflow-tooltip
/>
<el-table-column
label="计量单位"
align="center"
key="6"
prop="nuitName"
show-overflow-tooltip
/>
<el-table-column
label="库存总量"
align="center"
key="7"
prop="num"
show-overflow-tooltip
/>
<el-table-column
label="库存剩余量"
align="center"
key="8"
prop="stockNum"
show-overflow-tooltip
/>
<el-table-column
label="已领用数量"
align="center"
key="9"
prop="receiveNum"
show-overflow-tooltip
/>
</el-table>
<pagination
:total="total"
:page.sync="queryParams.pageNum"
:limit.sync="queryParams.pageSize"
@pagination="getList()"
/>
</div>
</template>
<script>
import { getUnitData, getProData } from '@/api/claimAndRefund/receive.js'
import { secondaryWarehouseList } from '@/api/claimAndRefund/secondStore'
import { getTypeList } from '@/api/store/warehousing'
import { equipmentTypeTree } from '@/api/store/tools'
import { getConfigListApi } from '@/api/claimAndRefund/config-pages.js'
import Treeselect from '@riophae/vue-treeselect'
import '@riophae/vue-treeselect/dist/vue-treeselect.css'
export default {
components: { Treeselect },
data() {
return {
total: 0,
loading: false,
types: '',
unitList: [],
proList: [],
typeList: [],
equipmentTypeList: [],
secondList: [],
deviceList: [],
handleBtnList: [
{ btn_title: '班组出库', btn_type: 1 },
{ btn_title: '班组退库', btn_type: 2 },
{ btn_title: '二级库归还', btn_type: 3 },
],
queryParams: {
pageNum: 1,
pageSize: 10,
keyword: '',
unitId: undefined,
modelId: undefined,
typeId: undefined,
},
}
},
methods: {
getList() {
this.loading = true
secondaryWarehouseList(this.queryParams).then((res) => {
this.deviceList = res.rows
this.total = res.total
this.loading = false
})
},
async getSecondList() {
const { data: res } = await getConfigListApi({
pageNum: 1,
pageSize: 999,
})
this.secondList = res.rows
},
onChangeRadio() {
this.getList()
},
handleQuery() {},
resetQuery() {
this.resetForm('queryForm')
this.queryParams.unitId = ''
this.getList()
},
//获取单位
getUnitList() {
getUnitData().then((res) => {
this.unitList = res.data
})
},
//获取工程
getProList() {
getProData().then((response) => {
this.proList = response.data
})
},
// 机具类型
getTypeList() {
getTypeList({ level: '3' }).then((response) => {
this.typeList = response.data
})
},
//规格型号
equipmentType() {
equipmentTypeTree().then((response) => {
this.equipmentTypeList = response.data
this.equipmentTypeList.forEach((item, index) => {
if (item.children && item.children.length > 0) {
item.children.forEach((item2, index2) => {
if (item2.children && item2.children.length > 0) {
item2.children.forEach((item3) => {
if (
item3.children &&
item3.children.length > 0
) {
item3.children.forEach((item4) => {
item4.machineTypeName =
item3.typeName
item4.specificationType =
item4.typeName
this.$set(item4, 'purchasePrice', 0)
this.$set(item4, 'purchaseNum', 1)
})
}
})
}
})
}
})
})
},
// 操作按钮
onClickSecond(type) {
if (!this.queryParams.unitId) {
this.$modal.msgError('请先选择需要操作的二级库!')
return
}
this.$emit('onClickSecond', type)
},
},
created() {
this.getList()
this.getSecondList()
this.getUnitList()
this.getProList()
this.getTypeList()
this.equipmentType()
},
}
</script>
<style></style>