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.

383 lines
12 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="出库明细" 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>
<Input v-model="select.wzbm" style="width: 120px;margin-right: 10px;" placeholder="物资编码搜索" />
</div>
<div class="selector-item">
<span class="selector-item__label">资产名称:</span>
<Input v-model="select.keyword" style="width: 120px;margin-right: 10px;" placeholder="资产名称搜索" />
</div>
<DatePicker @on-change="changeDate" type="daterange" split-panels placeholder="请选择日期" style="width: 200px"></DatePicker>
<Button type="primary" style="margin-left: 10px;" @click="getindex">查询</Button>
<Button type="primary" style="margin-left: 10px;"
@click="exportExcel(new Date().getTime().toString())">导出</Button>
</div>
</slot>
</lx-header>
</div>
<xy-table :list="list" v-loading="loading" :total="total"
@pageSizeChange="e => select.pageSize = e" @pageIndexChange="pageChange" :table-item="table" :auths='[]'>
<template v-slot:btns >
<div></div>
<!-- <el-table-column v-if="isCkName=='仓库管理员'||roleName=='系统管理员'" fixed="right" label="操作" width="180" header-align="center">
<template slot-scope="scope">
<Button type="primary" size="small" @click="editorIn(scope.row.id,'editor')">编辑</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> -->
</template>
</xy-table>
<imports :table-name="customForm.tableName" :form-info="form" ref="imports" @refresh="getindex"></imports>
</div>
</template>
<script>
import {
index,
destroy
} from "@/api/system/baseForm.js"
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'
export default {
components: {
imports
},
data() {
return {
loading: false,
select: {
pageSize: 10,
pageIndex: 1,
keyword: "",
wzbm:'',
// is_export: 0,
},
showcode: false,
customForm: {
customFormId: 10,
tableName: "outbounds_items"
},
form: [],
total: 0,
list: [],
dateRanges:'',
table: [{
label: '序号',
type: 'index',
fixed: 'left',
width: 80,
},
{
label: '出库时间',
prop:'outbounds_chukushijian',
width: 180,
},
{
label: '出库类型',
prop:'outbounds_chukuleixing',
width: 180,
},
{
label: '出库状态',
prop:'outbounds_zhuangtai',
width: 180,
},
{
label: '借用仓库',
prop:'outbounds_jieyongcangku',
width: 180,
},
{
label: '借用部门',
prop:'outbounds_jieyongbumen',
width: 180,
},
{
label: '经办人',
prop:'outbounds_jilurenyuan',
width: 180,
},
{
label: "物资编码",
width: 180,
prop: 'wuzibianma',
align: 'center',
},
{
label: "资产名称",
prop: 'zichanmingcheng',
align: 'center',
},
{
label: "规格型号",
prop: 'guigexinghao',
align: 'center',
width: 180,
},
{
label: "物资类型",
width: 120,
prop: 'wuzileixing',
align: 'center',
},
{
label: "计量单位",
width: 120,
prop: 'jiliangdanwei',
align: 'center',
},
{
label: "入库批次",
width: 120,
prop: 'rukupici',
},
{
label: "生产日期",
width: 120,
prop: 'shengchanriqi',
},
{
label: "出库数量",
width: 120,
prop: 'jieyongshuliang',
},
{
label: "备注",
width: 180,
prop: 'outbounds_beizhu',
}
// {
// label: "二维码",
// width: 180,
// prop: 'erweima',
// customFn: (row) => {
// return (<Button type='primary' size='small'
// on=
// {
// {
// ["click"]: (e) => (this.showCode(e, row))
// }
// }
// >生成二维码</Button>)
// }
// },
]
}
},
mounted() {
// this.getField()
this.getindex()
},
methods: {
changeDate(e){
console.log(e)
if(e.length>0){
if(e[0]){
this.dateRanges = e.join(",")
}else{
this.dateRanges = ''
}
}else{
this.dateRanges = ''
}
},
async exportExcel(sheetName) {
this.loading = true
const res = await index(Object.assign('', {
page_size: 99999,
page: 1,
table_name: this.customForm.tableName,
range:this.dateRanges,
// is_export:this.select.is_export,
filter: [{
"key": "wuzibianma",
"op": "like",
"value": this.select.wzbm,
},{
"key": "zichanmingcheng",
"op": "like",
"value": this.select.keyword,
},
],
}))
if (res.data) {
let headers = this.table.filter(f=>f.type!='index').map(i => {
if(i.type!='index'){
return {
key: i.prop,
title: i.label
}
}
})
for(var k of res.data){
if(k.outbounds_id_outbounds_items_id_relation){
k.outbounds_chukushijian = k.outbounds_id_outbounds_items_id_relation.chukushijian
k.outbounds_chukuleixing = k.outbounds_id_outbounds_items_id_relation.chukuleixing
k.outbounds_zhuangtai = k.outbounds_id_outbounds_items_id_relation.zhuangtai
k.outbounds_jieyongbumen = k.outbounds_id_outbounds_items_id_relation.jieyongbumen
k.outbounds_jieyongcangku = k.outbounds_id_outbounds_items_id_relation.jieyongcangku
k.outbounds_jilurenyuan = k.outbounds_id_outbounds_items_id_relation.jilurenyuan
k.outbounds_beizhu = k.outbounds_id_outbounds_items_id_relation.beizhu
}
}
const data = res.data.map(row => headers.map(header => row[header.key]));
data.unshift(headers.map(header => header.title));
const wb = XLSX.utils.book_new();
const ws = XLSX.utils.aoa_to_sheet(data);
XLSX.utils.book_append_sheet(wb, ws, sheetName);
const wbout = XLSX.write(wb, {
bookType: 'xlsx',
bookSST: true,
type: 'array'
});
saveAs(new Blob([wbout], {
type: 'application/octet-stream'
}), `${sheetName}.xlsx`);
this.loading = false
}
},
async getindex() {
this.loading = true
const res = await index({
page_size: this.select.pageSize,
page: this.select.pageIndex,
table_name: this.customForm.tableName,
range:this.dateRanges,
// is_export:this.select.is_export,
filter: [{
"key": "wuzibianma",
"op": "like",
"value": this.select.wzbm,
},{
"key": "zichanmingcheng",
"op": "like",
"value": this.select.keyword,
},
],
})
for(var k of res.data){
if(k.outbounds_id_outbounds_items_id_relation){
k.outbounds_chukushijian = k.outbounds_id_outbounds_items_id_relation.chukushijian
k.outbounds_chukuleixing = k.outbounds_id_outbounds_items_id_relation.chukuleixing
k.outbounds_zhuangtai = k.outbounds_id_outbounds_items_id_relation.zhuangtai
k.outbounds_jieyongbumen = k.outbounds_id_outbounds_items_id_relation.jieyongbumen
k.outbounds_jieyongcangku = k.outbounds_id_outbounds_items_id_relation.jieyongcangku
k.outbounds_jilurenyuan = k.outbounds_id_outbounds_items_id_relation.jilurenyuan
k.outbounds_beizhu = k.outbounds_id_outbounds_items_id_relation.beizhu
}
}
this.list = res.data
this.total = res.total
this.loading = false
},
pageChange(e) {
this.select.pageIndex = e
this.getindex()
},
async getField() {
if (this.$route.meta.params?.custom_form) {
let decode = decodeURIComponent(this.$route.meta.params?.custom_form)
try {
let 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
},
}
}
</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
}
#qrCode {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
</style>