hberp/hb_client/src/views/inm/fifodetail.vue

469 lines
14 KiB
Python
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<template>
<div class="app-container">
<el-card style="margin-top: 2px">
<el-table
v-loading="listLoading"
:data="fifodetailList.results"
border
fit
stripe
highlight-current-row
max-height="600"
>
<el-table-column type="index" width="50" />
<el-table-column label="物料名称">
<template slot-scope="scope">{{ scope.row.material_.name }}</template>
</el-table-column>
<el-table-column label="物料批次">
<template slot-scope="scope">{{ scope.row.batch }}</template>
</el-table-column>
<el-table-column label="物料编号">
<template slot-scope="scope">{{
scope.row.material_.number
}}</template>
</el-table-column>
<el-table-column label="物料单位">
<template slot-scope="scope">{{ scope.row.material_.unit }}</template>
</el-table-column>
<el-table-column label="物料型号">
<template slot-scope="scope">{{
scope.row.material_.specification
}}</template>
</el-table-column>
<el-table-column label="入库数量">
<template slot-scope="scope">{{ scope.row.count }}</template>
</el-table-column>
<el-table-column label="是否需要复验">
<template slot-scope="scope">
<el-tag v-if="scope.row.need_test == false"></el-tag>
<el-tag v-else></el-tag>
</template>
</el-table-column>
<el-table-column label="复验是否合格">
<template slot-scope="scope">
<el-tag v-if="scope.row.is_testok == false">不合格</el-tag>
<el-tag v-else>合格</el-tag>
</template>
</el-table-column>
<el-table-column label="文件">
<template slot-scope="scope" v-if="scope.row.files">
<div v-for="item in scope.row.files_" v-bind:key="item.id">
<el-link :href="item.path" target="_blank" type="primary">{{
item.name
}}</el-link>
</div>
</template>
</el-table-column>
<el-table-column align="center" label="操作" width="220px">
<template slot-scope="scope">
<el-link type="primary" @click="handleMaterial(scope)" v-if="scope.row.need_test"
>复验</el-link
>
<el-link type="primary" @click="handleEdit(scope)">上传</el-link>
</template>
</el-table-column>
</el-table>
<pagination
v-show="fifodetailList.count > 0"
:total="fifodetailList.count"
:page.sync="listQuery.page"
:limit.sync="listQuery.page_size"
@pagination="getList"
/>
</el-card>
<el-dialog
:close-on-click-modal="false"
:visible.sync="dialogVisible"
title="上传文件"
>
<el-form
ref="Form"
:model="FIFOItem"
label-width="100px"
label-position="right"
>
<el-form-item label="是否需要复验" prop="need_test">
<el-switch v-model="FIFOItem.need_test"></el-switch>
</el-form-item>
<el-form-item label="文件列表">
<el-upload
ref="upload"
:action="upUrl"
:before-upload="beforeUpload"
:on-success="handleUpSuccess"
:headers="upHeaders"
multiple
accept="image/*,.ppt,.pdf,.doc,.docx,.xls,.xlsx"
>
<el-button size="small" type="primary">上传文件</el-button>
<span class="el-upload__tip">
可上传多个pdf,word,ppt,excel,图片文件,单文件大小不超过50M
</span>
</el-upload>
</el-form-item>
<div
v-for="(item, index) in fileList"
v-bind:key="item.id"
style="margin-top: 2px;"
>
<i
class="el-icon-delete"
@click="deleteFile(index)"
style="color: red"
></i>
<el-link :href="item.path" target="_blank" type="primary">{{
item.name
}}</el-link>
</div>
</el-form>
<div style="text-align: right">
<el-button type="danger" @click="dialogVisible = false">取消</el-button>
<el-button type="primary" @click="confirm()">确认</el-button>
</div>
</el-dialog>
<el-dialog
title="物料检查表"
:close-on-click-modal="false"
:visible.sync="outerVisible"
>
<el-select style="width: 100%" v-model="recordform" placeholder="请选择">
<el-option
v-for="item in recordformList"
:key="item.id"
:label="item.name"
:value="item.id"
>
</el-option>
</el-select>
<el-dialog
width="30%"
title="检查项目"
:visible.sync="innerVisible"
:close-on-click-modal="false"
append-to-body
>
<el-form label-width="80px" label-position="right">
<el-row v-for="(item, $index) in fieldList" :key="$index">
<el-form-item
v-if="item.field_type === 'string'"
:label="item.field_name"
>
<el-input placeholder="请输入" v-model="item.sort" />
</el-form-item>
<el-form-item
v-else-if="item.field_type === 'int'"
:label="item.field_name"
>
<el-input
type="number"
placeholder="请输入"
v-model="item.sort"
/>
</el-form-item>
<el-form-item
v-else-if="item.field_type === 'float'"
:label="item.field_name"
>
<el-input
type="number"
placeholder="请输入"
v-model="item.sort"
/>
</el-form-item>
<el-form-item
v-else-if="item.field_type === 'date'"
:label="item.field_name"
>
<el-date-picker
v-model="item.create_time"
type="date"
placeholder="选择日期"
value-format="yyyy-MM-dd"
style="width: 100%"
>
</el-date-picker>
</el-form-item>
<el-form-item
v-else-if="item.field_type === 'datetime'"
:label="item.field_name"
>
<el-date-picker
v-model="item.create_time"
type="datetime"
placeholder="选择日期"
value-format="yyyy-MM-dd HH:mm:ss"
style="width: 100%"
>
</el-date-picker>
</el-form-item>
<el-form-item
v-else-if="item.field_type === 'select'"
:label="item.field_name"
>
<el-select
style="width: 100%"
v-model="item.sort"
placeholder="请选择"
>
<el-option
v-for="item1 in item.field_choice"
:key="item1"
:label="item1"
:value="item1"
>
</el-option>
</el-select>
</el-form-item>
<el-form-item
v-else-if="item.field_type === 'selects'"
:label="item.field_name"
>
<el-select
style="width: 100%"
v-model="optio"
multiple
placeholder="请选择"
>
<el-option
v-for="item1 in item.field_choice"
:key="item1"
:label="item1"
:value="item1"
>
</el-option>
</el-select>
</el-form-item>
</el-row>
<el-row>
<el-form-item label="是否合格" prop="sort_str">
<el-radio v-model="is_testok" label="true">检查合格</el-radio>
<el-radio v-model="is_testok" label="false">检查不合格</el-radio>
</el-form-item>
</el-row>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button @click="innerVisible = false"> </el-button>
<el-button type="primary" @click="submitfield"
>提交检查项目</el-button
>
</div>
</el-dialog>
<div slot="footer" class="dialog-footer">
<el-button @click="outerVisible = false"> </el-button>
<el-button type="primary" @click="submitrecordform"
>填写检查项目</el-button
>
</div>
</el-dialog>
</div>
</template>
<script>
import { getfifodetailList,itemfiles } from "@/api/inm";
import checkPermission from "@/utils/permission";
import { getMaterialList, getrecordformList, getrffieldList } from "@/api/mtm";
import { createTestrecord } from "@/api/inm";
import { upUrl, upHeaders } from "@/api/file";
import { genTree } from "@/utils";
import Pagination from "@/components/Pagination"; // secondary package based on el-pagination
const defaultfile = {
files:[],
need_test:false,
};
export default {
components: { Pagination },
data() {
return {
InventoryList: {
count: 0,
},
fifodetailList: {
count: 0,
},
upHeaders: upHeaders(),
upUrl: upUrl(),
fileList: [],
FIFOItem:defaultfile,
listQuery: {
page: 1,
page_size: 20,
},
fieldList: {
count: 0,
},
is_testok: "true",
field: [],
recordformList: [],
recordform: "",
fifo_detail: "",
listQueryrecordform: {
page: 0,
},
fileData:{},
outerVisible: false,
innerVisible: false,
dialogVisible: false,
dialogType: "new",
testrecord: {},
rule1: {
name: [{ required: true, message: "请输入", trigger: "blur" }],
},
fileList: [],
};
},
computed: {},
watch: {},
created() {
this.getList();
},
mounted() {
},
methods: {
checkPermission,
getList() {
this.listLoading = true;
this.listQuery.fifo = this.$route.params.id;
getfifodetailList(this.listQuery).then((response) => {
if (response.data) {
this.fifodetailList = response.data;
}
this.listLoading = false;
});
},
handleUpSuccess(res, file, filelist) {
this.fileList.push({
id: res.data.id,
name: res.data.name,
path: res.data.path,
});
this.handleRemove(file);
},
handleRemove(file) {
// 实现删除文件
let fileList = this.$refs.upload.uploadFiles;
let index = fileList.findIndex((fileItem) => {
return fileItem.uid === file.uid;
});
fileList.splice(index, 1);
},
beforeUpload(file) {
const isLt2M = file.size / 1024 / 1024 < 50;
if (!isLt2M) {
this.$message.error("单文件不能超过50MB!");
}
return isLt2M;
},
deleteFile(index) {
this.$confirm("确定删除该文件, 是否继续?", { type: "error" })
.then(() => {
this.fileList.splice(index, 1);
})
.catch((e) => {});
},
yeschange(val) {
if (!val) {
this.fileList = [];
}
},
handleEdit(scope) {
this.FIFOItem = Object.assign({}, scope.row); // copy obj
this.fileList=[],
this.dialogVisible = true;
for (var i = 0; i < this.FIFOItem.files_.length; i++) {
this.fileList.push({
id: this.FIFOItem.files_[i].id,
name: this.FIFOItem.files_[i].name,
path: this.FIFOItem.files_[i].path,
});
}
},
confirm() {
var files = [];
for (var i = 0; i < this.fileList.length; i++) {
files.push(this.fileList[i].id);
}
this.fileData.files=files;
this.fileData.need_test=this.FIFOItem.need_test;
console.log(this.fileData)
itemfiles(this.FIFOItem.id,this.fileData).then((res) => {
if (res.code >= 200) {
this.getList();
this.dialogVisible = false;
this.$message.success("成功");
}
});
},
handleMaterial(scope) {
//调该物料对应的检查表
this.outerVisible = true;
this.fifo_detail = scope.row.id;
this.listQueryrecordform.material = scope.row.material;
this.listQueryrecordform.type = 2;
getrecordformList(this.listQueryrecordform).then((response) => {
if (response.data) {
this.recordformList = response.data;
}
});
},
//根据选择的表渲染检查项目
submitrecordform() {
if (this.recordform != "") {
getrffieldList({ form: this.recordform, page: 0 }).then((response) => {
if (response.data) {
this.fieldList = response.data;
this.innerVisible = true;
}
});
} else this.$message.error("请选择检查表!");
},
//提交检查项目
submitfield() {
let _this = this;
_this.field = []; //检查项目
this.fieldList.forEach((item) => {
_this.field.push({
form_field: item.id,
field_value: item.sort,
});
});
console.log(this.recordform);
this.testrecord.form = this.recordform;
this.testrecord.record_data = _this.field;
this.testrecord.fifo_item = this.fifo_detail;
this.testrecord.is_testok = this.is_testok;
createTestrecord(this.testrecord).then((res) => {
if (res.code >= 200) {
this.innerVisible = false;
this.outerVisible = false;
this.getList();
}
});
},
},
};
</script>