You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

888 lines
32 KiB

This file contains ambiguous Unicode characters!

This file contains ambiguous Unicode characters that may be confused with others in your current locale. If your use case is intentional and legitimate, you can safely ignore this warning. Use the Escape button to highlight these characters.

<template>
<div>
<div ref="lxHeader">
<lx-header icon="md-apps" :text="$route.meta.title" style="margin-bottom: 10px; border: 0px; margin-top: 15px">
<slot>
<div style="display: flex;justify-content: flex-start;flex-wrap: wrap;">
<!-- <div class="selector-item">
<span class="selector-item__label">种类编码</span>
<el-input v-model="select.wzbm" style="width: 120px;margin-right: 10px;" placeholder="种类编码搜索" />
</div> -->
<div class="selector-item">
<el-input v-model="select.keyword" style="width: 120px;margin-right: 10px;" placeholder="物资名称搜索" />
</div>
<div class="selector-item">
<el-cascader v-model="select.fenlei" placeholder="请选择所属种类" ref="cascaders" clearable popper-class="select_popper"
style="margin-right: 10px;flex-basis: 20%;" :options="fenleiList" :props="{label:'name',value:'id'}"
@change="(e)=>{changeFenlei(e)}" />
</div>
<div class="selector-item">
<el-select clearable v-model="select.suozaicangku" style="width:100%" placeholder="请选择所在仓库">
<el-option v-for="item in cangkuList" :key="item.id" :label="item.cangkumingcheng" :value="item.id" />
</el-select>
</div>
<div class="selector-item">
<el-date-picker type="daterange"
range-separator="至"
start-placeholder="入库日期开始"
end-placeholder="入库日期结束"
format="yyyy-MM-dd" value-format="yyyy-MM-dd" v-model="select.rukuriqi"></el-date-picker>
</div>
<div class="selector-item">
<el-date-picker format="yyyy-MM-dd"
type="daterange"
range-separator="至"
start-placeholder="生产日期开始"
end-placeholder="生产日期结束"
value-format="yyyy-MM-dd" v-model="select.shengchanriqi"></el-date-picker>
</div>
<div class="selector-item">
<el-select clearable v-model="select.wuzizhuangtai" style="width:100%" placeholder="请选择物资状态">
<el-option v-for="item in paraOptions.materials_status" :key="item.id" :label="item.value"
:value="item.id" />
</el-select>
</div>
<div class="selector-item">
<el-select clearable v-model="select.chanquanxinxi" style="width:100%" placeholder="请选择产权信息">
<el-option v-for="item in paraOptions.materials_property" :key="item.id" :label="item.value"
:value="item.id" />
</el-select>
</div>
<div class="selector-item">
<el-select clearable v-model="select.chubeifangshi" style="width:100%" placeholder="请选择储备方式">
<el-option v-for="item in paraOptions.material_reserve" :key="item.id" :label="item.value"
:value="item.id" />
</el-select>
</div>
<div class="selector-item">
<el-select clearable v-model="select.dengjifenlei" style="width:100%" placeholder="请选择等级分类">
<el-option v-for="item in paraOptions.materials_level" :key="item.id" :label="item.value"
:value="item.id" />
</el-select>
</div>
<!-- <div class="selector-item">
<span class="selector-item__label">入库数量:</span>
<Input v-model="select.rmin" clearable style="width: 60px;margin:0 3px" placeholder="" />
<span class="selector-item__label"></span>
<Input v-model="select.rmax" clearable style="width: 60px;margin:0 3px" placeholder="" />
</div>
<div class="selector-item">
<span class="selector-item__label">在库数量:</span>
<Input v-model="select.min" clearable style="width: 60px;margin:0 3px" placeholder="" />
<span class="selector-item__label"></span>
<Input v-model="select.max" clearable style="width: 60px;margin:0 3px" placeholder="" />
</div> -->
<div>
<el-button type="primary" style="margin-left: 10px;" @click="getindex">查询</el-button>
<el-button type="primary" style="margin-left: 10px;" @click="toprint">打印</el-button>
<el-button type="primary" style="margin-left: 10px;"
@click="exportExcel(new Date().getTime().toString())">导出</el-button>
</div>
</div>
</slot>
</lx-header>
</div>
<xy-table v-loading="loading" :pageSize="select.pageSize" :pageIndex="select.pageIndex" :span-method="objectSpanMethod" :list="list" :total="total" :table-item="table"
:auths="[]" @selection-change="selectionChange" @pageSizeChange="pageSizeChange" @pageIndexChange="pageChange">
<!-- <template v-slot:caigouhetong>
<el-table-column align="left" label="采购合同" width="240" header-align="center">
<template slot-scope="scope">
<template v-if="scope.row.stocks && scope.row.stocks.length>0">
<div v-for="item in scope.row.stocks">{{item.caigouhetong}}</div>
</template>
</template>
</el-table-column>
</template> -->
<template v-slot:btns>
<!-- <div></div> isPandian==='pandian' && -->
<el-table-column v-if="(isCkName=='仓库管理员'||roleName=='系统管理员')" fixed="right"
align="center" label="操作" width="120" header-align="center">
<template slot-scope="scope">
<!-- <Button type="primary" size="small" @click="editorIn(scope.row.id,'editor')">盘点</Button> -->
<Button type="primary" size="small" @click="editorStocks(scope.row.id)">编辑明细</Button>
<!-- -->
<!-- <Poptip transfer confirm title="确认要删除吗?" @on-ok="deleteIn(scope.row)">
<Button type="primary" style="margin-left: 10px;" size="small" ghost>删除</Button>
</Poptip> -->
</template>
</el-table-column>
<div v-else />
</template>
</xy-table>
<addInventorys ref="addInventorys" @refresh="getindex" />
<div v-if="showcode" class="code" @click="closeCode">
<div id="qrCode" ref="qrCodeDiv" />
</div>
<editStockItem ref="editStockItem" @refresh="getindex"></editStockItem>
<imports ref="imports" :table-name="customForm.tableName" :form-info="form" @refresh="getindex" />
</div>
</template>
<script>
import {
index,
destroy,
save
} from '@/api/inventory.js'
import {
index as getFenleilist
} from '@/api/fenlei.js'
import {
index as baseFormIndex
} from '@/api/system/baseForm.js'
import {
getInfo
} from '@/api/user.js'
import addInventorys from './components/addInventorys.vue'
import editStockItem from './components/editStockItem.vue'
import QRCode from 'qrcodejs2'
import {
Message
} from 'element-ui'
import imports from '@/views/component/imports.vue'
import {
index as fieldIndex
} from '@/api/system/customFormField'
import {
getparameter
} from '@/api/system/dictionary'
import * as XLSX from 'xlsx'
import {
saveAs
} from 'file-saver'
import Cookies from 'js-cookie'
import {
getparameteritemMore
} from '@/api/system/dictionary.js'
import {
download
} from "@/utils/downloadRequest";
export default {
components: {
imports,
addInventorys,
editStockItem
},
data() {
return {
loading: false,
userName: '',
authName: '',
roleName: '',
isCkName: '',
isPandian: '',
fenleiList:[],
cangkuList:[],
paraOptions: {
'materials_status': [],
'material_reserve': [],
'materials_property': [],
'materials_level': []
// 'materials_fenlei':[],
},
select: {
pageSize: 40,
pageIndex: 1,
keyword: '',
wzbm: '',
fenlei:'',
is_export: 0,
wuzizhuangtai:'',
chanquanxinxi:'',
chubeifangshi:'',
suozaicangku:'',
rukuriqi:'',
shengchanriqi:'',
dengjifenlei:'',
min: '',
max: '',
rmin: '',
rmax: ''
},
showcode: false,
customForm: {
customFormId: '',
tableName: 'inventorys'
},
form: [],
total: 0,
list: [],
spanArr: [], // 存储合并规则的数组
position: 0, // 记录当前合并的起始位置
table: [{
type: 'selection',
fixed: 'left'
},
{
label: '物资信息',
align: 'left',
prop: 'wuzibianma_material_infos_wuzibianma_relation',
multiHd: [
{
label: '一级分类',
width: 120,
prop: 'wuzibianma_material_infos_wuzibianma_relation.material_info_type',
align: 'center',
formatter: (cell, data, value) => {
return value ? value.split("-")[0] : ''
}
},
{
label: '二级分类',
width: 120,
prop: 'wuzibianma_material_infos_wuzibianma_relation.material_info_type',
align: 'center',
formatter: (cell, data, value) => {
return value ? (value.split("-").length>1?value.split("-")[1]:value.split("-")[0]) : ''
}
},
{
label: '所属种类',
width: 120,
prop: 'wuzibianma_material_infos_wuzibianma_relation.fenlei_detail.name',
align: 'center'
},{
label: '物资名称',
prop: 'zichanmingcheng',
align: 'center',
width: 180,
fixed: 'left'
},
// {
// label: '种类编码',
// width: 120,
// prop: 'wuzibianma',
// align: 'center'
// },
{
label: '物资类型',
width: 120,
prop: 'wuzileixing',
align: 'center'
},
{
label: '物资型号',
prop: 'wuzibianma_material_infos_wuzibianma_relation.guigexinghao',
align: 'center',
width: 180
},
{
label: '物资规格',
prop: 'wuzibianma_material_infos_wuzibianma_relation.wuziguige',
align: 'center',
width: 180
},
{
label: '单位',
width: 120,
prop: 'wuzibianma_material_infos_wuzibianma_relation.jiliangdanwei',
align: 'center'
}
]
},
{
label: '库存信息',
prop: 'kucun',
align: 'left',
multiHd: [{
label: '在库数量',
width: 120,
prop: 'zaikushuliang',
customFn: (row) => {
return (<span>{row.row.zaikushuliang}{row.row.jiliangdanwei?row.row.jiliangdanwei:''}</span>)
}
},{
label: '原库存数量',
width: 120,
prop: 'chushishuliang',
customFn: (row) => {
return (<span>{row.row.chushishuliang}{row.row.jiliangdanwei?row.row.jiliangdanwei:''}</span>)
}
},{
label: '入库批次',
width: 120,
prop: 'rukupici'
},
{
label: '顺序号',
width: 180,
prop: 'shunxuhao',
customFn: (row) => {
return (<span>{row.row.shunxuhao?row.row.shunxuhao:''}</span>)
}
},
{
label: '待出库',
width: 120,
prop: 'wait_num'
},
]
},
{
label: '物资明细',
prop: 'stocks_items_info',
align: 'left',
multiHd: [{
label: '生产日期',
width: 120,
prop: 'shengchanriqi'
},
{
label: '入库日期',
width: 120,
prop: 'rukuriqi'
},
{
label: '物资状态',
width: 120,
prop: 'wuzizhuangtai_detail.value'
},
{
label: '储备方式',
width: 120,
prop: 'chubeifangshi_detail.value'
},
{
label: '所在仓库',
width: 120,
prop: 'materialstorages.cangkumingcheng'
},
{
label: '所在货架',
width: 120,
prop: 'shelfs.huojiamingcheng'
},
{
label: '所在货架层',
width: 120,
prop: 'huojiaceng'
},
{
label: '等级分类',
width: 120,
prop: 'dengjifenlei_detail.value'
},
{
label: '产权信息',
width: 120,
prop: 'chanquanxinxi_detail.value'
},{
label: '是否为固定资产',
width: 120,
prop: 'shifouweigudingzichan',
},{
label: '固定资产编码',
width: 120,
prop: 'gudingzichanbianma',
}, {
label: '储备年限',
width: 120,
prop: 'chubeinianxian'
}, {
label: '存放要求',
width: 120,
prop: 'cunfangyaoqiu'
},
{
label: '维护要求',
width: 120,
prop: 'weihuyaoqiu'
},
{
label: '保养频次',
width: 120,
prop: 'equipment_maintain_config.name'
}]
}
],
printObj: [],
printArr: [],
// 定义需要合并的列索引范围从selection列开始计数
mergeColumnRange: {
start: 1, // 基础信息分组的起始列索引
end: 8 // 基础信息分组的结束列索引
}
}
},
mounted() {
if (this.$route.path) {
const path = this.$route.path.split('_')
if (path[1]) {
this.isPandian = 'pandian'
}
}
this.getFenlei()
this.getField()
this.getCangku()
this.getindex()
this.getUserName()
this.getData()
},
methods: {
async updateGd(id,value){
const res = await save({
id:id,
'shifouweigudingzichan':value
})
Message({
type: 'success',
message: '更新成功'
})
this.getindex()
},
async updateGdbm(id,value){
const res = await save({
id:id,
'gudingzichanbianma':value
})
Message({
type: 'success',
message: '更新成功'
})
this.getindex()
},
// 获取仓库
async getCangku() {
const res = await baseFormIndex({
page_size: 999,
page: 1,
table_name: 'materialstorages',
sort_name: 'sort',
sort_type: 'ASC',
filter: [{
key: 'shifouzili',
op: 'eq',
value: '是'
}]
})
this.cangkuList = res.data
},
// 获取数据字典
async getData() {
const res = await getparameteritemMore({
'number[0]': 'materials_status', // 物资状态
'number[1]': 'material_reserve', // 储备方式
'number[2]': 'materials_property', // 产权信息
'number[3]': 'materials_level' // 等级分类
// 'number[4]':'materials_fenlei', //所属种类
})
for (var k in this.paraOptions) {
res.map(item => {
if (item.number === k) {
this.paraOptions[k] = item.detail
}
})
}
console.log(this.paraOptions)
},
// filterSpans
getSpanArr(data) {
// 生成合并规则数组(保持不变)
this.spanArr = []
this.position = 0
data.forEach((item, index) => {
if (index === 0) {
this.spanArr.push(1)
this.position = 0
} else {
if (item.wuzibianma === data[this.position].wuzibianma_material_infos_wuzibianma_relation.wuzibianma) {
this.spanArr[this.position] += 1
this.spanArr.push(0)
} else {
this.spanArr.push(1)
this.position = index
}
}
})
},
objectSpanMethod({
row,
column,
rowIndex,
columnIndex
}) {
// 通过列索引范围判断是否需要合并
if (columnIndex >= this.mergeColumnRange.start && columnIndex <= this.mergeColumnRange.end) {
const _row = this.spanArr[rowIndex]
const _col = _row > 0 ? 1 : 0
return {
rowspan: _row,
colspan: _col
}
}
// 其他列保持默认
return {
rowspan: 1,
colspan: 1
}
},
handleDataChange() {
this.getSpanArr(this.list)
},
async getUserName() {
getInfo().then(res => {
console.log('res', res)
this.userName = res.username
this.authName = res.name
for (var k of res.role) {
if (k.name == '系统管理员') {
this.roleName = k.name
}
if (k.name == '仓库管理员') {
this.isCkName = '仓库管理员'
}
}
}).catch(error => {})
},
selectionChange(e) {
console.log(e)
const _arrs = []
if (e.length > 0) {
for (var m of e) {
_arrs.push(m.id)
}
console.log(_arrs)
// this.printObj = e
this.printArr = _arrs.join(',')
}
},
toprint() {
if (this.printArr.length < 1) {
Message({
type: 'warning',
message: '请先选择'
})
return
}
// let _obj = JSON.parse(JSON.stringify(this.printObj))
// let _objs = []
// for(var m of this.printObj){
// _objs.push({
// 'wuzibianma':encodeURI(encodeURI(m['wuzibianma'])),
// 'zichanmingcheng':encodeURI(encodeURI(m['zichanmingcheng'])),
// 'wuzileixing':encodeURI(encodeURI(m['wuzileixing']))
// })
// }
// Cookies.remove('objs')
// Cookies.set('objs',JSON.stringify(_objs))
window.open('/admin/#/myprint?ids=' + this.printArr, '_blank')
},
async exportExcel(sheetName) {
const params = {
page: 1,
page_size: 9999,
table_name: 'inventorys',
is_export: 1,
sort_type: 'DESC',
sort_name: 'wuzibianma',
fenlei:this.select.fenlei,
wuzizhuangtai:this.select.wuzizhuangtai,
chanquanxinxi:this.select.chanquanxinxi,
chubeifangshi:this.select.chubeifangshi,
suozaicangku:this.select.suozaicangku,
start_rukuriqi:this.select.rukuriqi?this.select.rukuriqi[0]:'',
end_rukuriqi:this.select.rukuriqi?this.select.rukuriqi[1]:'',
start_shengchanriqi:this.select.shengchanriqi?this.select.shengchanriqi[0]:'',
end_shengchanriqi:this.select.shengchanriqi?this.select.shengchanriqi[1]:'',
// shengchanriqi:this.select.shengchanriqi?this.select.shengchanriqi.join(","):'',
dengjifenlei:this.select.dengjifenlei,
filter: [
/* {
'key': 'wuzibianma',
'op': 'like',
'value': this.select.wzbm
}, */
{
'key': 'zichanmingcheng',
'op': 'like',
'value': this.select.keyword
},
// {
// 'key': 'rukushuliang',
// 'op': 'range',
// 'value': rmin + ',' + rmax
// },
// {
// 'key': 'zaikushuliang',
// 'op': 'range',
// 'value': min + ',' + max
// }
],
"export_fields[wuzibianma]": '物资编码',
"export_fields[wuzibianma_material_infos_wuzibianma_relation.material_info_type]": '一级分类',
"export_fields[wuzibianma_material_infos_wuzibianma_relation.material_info_type]": '二级分类',
"export_fields[wuzibianma_material_infos_wuzibianma_relation.fenlei_detail.name]": '所属种类',
"export_fields[zichanmingcheng]": '物资名称',
"export_fields[wuzileixing]": '物资类型',
"export_fields[guigexinghao]": '物资型号',
"export_fields[wuziguige]": '物资规格',
"export_fields[wuzibianma_material_infos_wuzibianma_relation.jiliangdanwei]": '单位',
"export_fields[rukupici]": '入库批次',
"export_fields[zaikushuliang]": '在库数量',
"export_fields[shunxuhao]": '顺序号',
"export_fields[wuzizhuangtai_detail.value]": '物资状态',
"export_fields[chubeifangshi_detail.value]": '储备方式',
"export_fields[materialstorages.cangkumingcheng]": '所在仓库',
"export_fields[shelfs.huojiamingcheng]": '所在货架',
"export_fields[huojiaceng]": '所在货架层',
"export_fields[dengjifenlei_detail.value]": '等级分类',
"export_fields[chanquanxinxi_detail.value]": '产权信息',
"export_fields[shifouweigudingzichan]": '是否为固定资产',
"export_fields[gudingzichanbianma]": '固定资产编码',
"export_fields[chubeinnianxian]": '储备年限',
"export_fields[cunfangyaoqiu]": '存放要求',
"export_fields[weihuyaoqiu]": '维护要求',
"export_fields[equipment_maintain_configs_id_relation.name]": '保养频次',
}
download(
'/api/admin/inventory/index',
'get', params,
`自管物资${sheetName}.xlsx`)
},
showCode(e, row) {
console.log(e, row)
this.showcode = true
this.$nextTick(function() {
new QRCode(this.$refs.qrCodeDiv, {
text: row.wuzibianma + '-' + row.id,
width: 200,
height: 200,
colorDark: '#333333', // 二维码颜色
colorLight: '#ffffff', // 二维码背景色
correctLevel: QRCode.CorrectLevel.L // 容错率L/M/H
})
})
},
closeCode() {
this.$refs.qrCodeDiv.innerHTML = ''
this.showcode = false
},
search() {
this.select.pageIndex = 1
this.getindex()
},
async getFenlei() {
const res = await getFenleilist({
tree: 1,
sort_type:'ASC',
sort_name:'sort'
})
this.fenleiList = this.removeEmptyChildren(res)
},
changeFenlei(e, row) {
console.log('e', e)
if (e) {
this.select.fenlei = e[e.length - 1]
} else {
this.select.fenlei = ''
}
},
// 移除children=[]
removeEmptyChildren(node) {
if (Array.isArray(node)) {
return node.map(child => {
if (child.children) {
// 递归处理子节点
child.children = this.removeEmptyChildren(child.children);
// 若处理后 children 为空,删除该属性
if (child.children.length === 0) {
delete child.children;
}
}
return child;
});
}
return [];
},
async getindex() {
this.loading = true
const min = this.select.min ? this.select.min : 0
const max = this.select.max ? this.select.max : 99999
const rmin = this.select.rmin ? this.select.rmin : 0
const rmax = this.select.rmax ? this.select.rmax : 99999
const res = await index({
page_size: this.select.pageSize,
page: this.select.pageIndex,
table_name: 'inventorys',
sort_type: 'DESC',
sort_name: 'wuzibianma',
fenlei:this.select.fenlei,
wuzizhuangtai:this.select.wuzizhuangtai,
chanquanxinxi:this.select.chanquanxinxi,
chubeifangshi:this.select.chubeifangshi,
suozaicangku:this.select.suozaicangku,
start_rukuriqi:this.select.rukuriqi?this.select.rukuriqi[0]:'',
end_rukuriqi:this.select.rukuriqi?this.select.rukuriqi[1]:'',
start_shengchanriqi:this.select.shengchanriqi?this.select.shengchanriqi[0]:'',
end_shengchanriqi:this.select.shengchanriqi?this.select.shengchanriqi[1]:'',
// shengchanriqi:this.select.shengchanriqi?this.select.shengchanriqi.join(","):'',
dengjifenlei:this.select.dengjifenlei,
// is_export:this.select.is_export,
filter: [
/* {
'key': 'wuzibianma',
'op': 'like',
'value': this.select.wzbm
}, */
{
'key': 'zichanmingcheng',
'op': 'like',
'value': this.select.keyword
},
// {
// 'key': 'rukushuliang',
// 'op': 'range',
// 'value': rmin + ',' + rmax
// },
// {
// 'key': 'zaikushuliang',
// 'op': 'range',
// 'value': min + ',' + max
// }
]
})
// 筛选出 入库批次
// let stocks_items_arr = []
// res.list.data.map(item => {
// stocks_items_arr = item.stocks_items.filter(f => f.id === item.stocks_item_id)
// console.log("stocks_items_arr",stocks_items_arr)
// item.stocks_items_info = stocks_items_arr.length > 0 ? stocks_items_arr[0] : {},
// console.log("item.stocks_items_info",item.stocks_items_info)
// })
this.list = res.list.data
this.total = res.list.total
this.loading = false
this.handleDataChange()
},
pageSizeChange(e) {
this.select.pageSize = e
this.getindex()
},
pageChange(e) {
this.select.pageIndex = e
this.getindex()
},
editorIn(id, type) {
this.$refs['addInventorys'].id = id
this.$refs['addInventorys'].isShow = true
this.$refs['addInventorys'].type = type
},
editorStocks(id){
this.$refs['editStockItem'].id = id
this.$refs['editStockItem'].isShowMingxi = true
},
deleteIn(row) {
console.log(row.id)
// return
destroy({
id: row.id,
table_name: this.customForm.tableName
}).then(res => {
Message({
type: 'success',
message: '删除成功'
})
this.getindex()
})
},
async getField() {
if (this.$route.meta.params?.custom_form) {
const decode = decodeURIComponent(this.$route.meta.params?.custom_form)
try {
const custom_form = JSON.parse(decode)
this.customForm.customFormId = custom_form.custom_form_id
this.customForm.tableName = custom_form.table_name
console.log('123', this.customForm)
// this.select.table_name = custom_form.table_name
} catch (err) {
console.warn(err)
}
}
const res = await fieldIndex({
page: 1,
page_size: 999,
custom_form_id: this.customForm.customFormId,
sort_name: 'sort',
sort_type: 'asc'
})
if (res.data && res.data instanceof Array) {
res.data.forEach(i => {
if (i.field) {
if (
(i.edit_input === 'checkbox' || i.edit_input === 'radio' || i.edit_input === 'select') &&
i.parameter_id
) {
getparameter({
id: i.parameter_id
}).then((res) => {
i._paramters = res.detail ?? []
})
}
if (
(i.edit_input === 'checkbox' || i.edit_input === 'radio' || i.edit_input === 'select') &&
i.link_table_name
) {
index({
page: 1,
page_size: 999,
table_name: i.link_table_name
}).then((res) => {
i._paramters = res.data ?? []
})
}
}
})
}
// this.form = res.data
this.form = res.data
?.filter((i) => i.list_show)
.map((i) => {
return i
})
console.log(this.form)
}
}
}
</script>
<style scoped lang="scss">
.code {
position: absolute;
left: 0;
top: 0;
background: rgba(0, 0, 0, 0.5);
width: 100%;
height: 100%;
z-index: 9999
}
.selector-item{
margin-right:10px;
margin-bottom:5px;
}
#qrCode {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
</style>