113 lines
5.2 KiB
Vue
113 lines
5.2 KiB
Vue
<template>
|
|
<el-container>
|
|
<el-header>
|
|
<div class="left-panel"></div>
|
|
<div class="right-panel">
|
|
<el-select v-model="query.warehouse" placeholder="仓库" clearable style="width: 150px; margin-right: 10px;" @change="handleQuery">
|
|
<el-option v-for="w in warehouseOptions" :key="w.id" :label="w.name" :value="w.id"></el-option>
|
|
</el-select>
|
|
<el-select v-model="query.entry_type" placeholder="入库类型" clearable style="width: 150px; margin-right: 10px;" @change="handleQuery">
|
|
<el-option label="原材料正常入库" value="raw_normal"></el-option>
|
|
<el-option label="原材料暂估入库" value="raw_estimated"></el-option>
|
|
<el-option label="产品入库" value="product"></el-option>
|
|
<el-option label="其他" value="other"></el-option>
|
|
</el-select>
|
|
<el-select v-model="query.status" placeholder="物料状态" clearable style="width: 120px; margin-right: 10px;" @change="handleQuery">
|
|
<el-option label="闲置" value="idle"></el-option>
|
|
<el-option label="领用中" value="in_requisition"></el-option>
|
|
<el-option label="已领用" value="requisitioned"></el-option>
|
|
</el-select>
|
|
<el-select v-model="query.invoice_received" placeholder="账单状态" clearable style="width: 120px; margin-right: 10px;" @change="handleQuery">
|
|
<el-option label="已收到" :value="true"></el-option>
|
|
<el-option label="未收到" :value="false"></el-option>
|
|
</el-select>
|
|
<el-date-picker
|
|
v-model="dateRange"
|
|
type="daterange"
|
|
range-separator="至"
|
|
start-placeholder="开始日期"
|
|
end-placeholder="结束日期"
|
|
value-format="YYYY-MM-DD"
|
|
style="width: 260px; margin-right: 10px;"
|
|
@change="handleDateChange"
|
|
></el-date-picker>
|
|
<el-input v-model="query.search" placeholder="名称/规格/供应商/单号" clearable style="width: 220px;" @keyup.enter="handleQuery"></el-input>
|
|
<el-button type="primary" icon="el-icon-search" @click="handleQuery"></el-button>
|
|
</div>
|
|
</el-header>
|
|
<el-main class="nopadding">
|
|
<scTable
|
|
ref="table"
|
|
:apiObj="$API.mpr.warehouseStock.list"
|
|
row-key="id"
|
|
stripe
|
|
:query="query"
|
|
>
|
|
<el-table-column type="index" width="50" />
|
|
<el-table-column label="仓库" prop="warehouse_name" width="120" show-overflow-tooltip></el-table-column>
|
|
<el-table-column label="入库单号" prop="entry_number" width="200" show-overflow-tooltip></el-table-column>
|
|
<el-table-column label="入库日期" prop="entry_date" width="110" sortable show-overflow-tooltip></el-table-column>
|
|
<el-table-column label="入库类型" prop="entry_type_display" width="140" show-overflow-tooltip></el-table-column>
|
|
<el-table-column label="入库方式" prop="entry_method_display" width="100" show-overflow-tooltip></el-table-column>
|
|
<el-table-column label="名称" prop="name" min-width="120" show-overflow-tooltip></el-table-column>
|
|
<el-table-column label="规格" prop="spec" width="120" show-overflow-tooltip></el-table-column>
|
|
<el-table-column label="单位" prop="unit" width="70" show-overflow-tooltip></el-table-column>
|
|
<el-table-column label="数量" prop="quantity" width="100" sortable show-overflow-tooltip></el-table-column>
|
|
<el-table-column label="单价" prop="unit_price" width="100" show-overflow-tooltip></el-table-column>
|
|
<el-table-column label="金额" prop="amount" width="110" sortable show-overflow-tooltip>
|
|
<template #default="scope">
|
|
<span style="font-weight: bold;">{{ scope.row.amount }}</span>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column label="状态" width="100" align="center">
|
|
<template #default="scope">
|
|
<el-tag v-if="Number(scope.row.quantity) <= 0" type="info" size="small">已领完</el-tag>
|
|
<el-tag v-else-if="scope.row.status === 'idle'" type="success" size="small">闲置</el-tag>
|
|
<el-tag v-else-if="scope.row.status === 'in_requisition'" type="warning" size="small">领用中</el-tag>
|
|
<el-tag v-else-if="scope.row.status === 'requisitioned'" type="danger" size="small">已领用</el-tag>
|
|
<el-tag v-else type="info" size="small">{{ scope.row.status_display }}</el-tag>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column label="供应商" prop="supplier_name" width="140" show-overflow-tooltip></el-table-column>
|
|
<el-table-column label="账单" width="90" align="center">
|
|
<template #default="scope">
|
|
<el-tag :type="scope.row.invoice_received ? 'success' : 'danger'" size="small">
|
|
{{ scope.row.invoice_received ? '已收到' : '未收到' }}
|
|
</el-tag>
|
|
</template>
|
|
</el-table-column>
|
|
</scTable>
|
|
</el-main>
|
|
</el-container>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { ref, onMounted } from 'vue'
|
|
import API from '@/api'
|
|
|
|
const table = ref(null)
|
|
const query = ref({})
|
|
const dateRange = ref(null)
|
|
const warehouseOptions = ref([])
|
|
|
|
onMounted(async () => {
|
|
let res = await API.inm.warehouse.list.req({ page: 0 })
|
|
warehouseOptions.value = res
|
|
})
|
|
|
|
const handleQuery = () => {
|
|
table.value.refresh()
|
|
}
|
|
|
|
const handleDateChange = (val) => {
|
|
if (val) {
|
|
query.value.entry_date_after = val[0]
|
|
query.value.entry_date_before = val[1]
|
|
} else {
|
|
delete query.value.entry_date_after
|
|
delete query.value.entry_date_before
|
|
}
|
|
handleQuery()
|
|
}
|
|
</script>
|