LanJu_UI/src/views/mes/unitprice/index.vue

651 lines
21 KiB
Vue

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 class="app-container">
<el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
<el-form-item label="物料码" prop="productCode">
<el-input
v-model="queryParams.productCode"
placeholder="请输入物料码"
clearable
@keyup.enter.native="handleQuery"
/>
</el-form-item>
<el-form-item label="物料描述" prop="productName">
<el-input
v-model="queryParams.productName"
placeholder="请输入物料描述"
clearable
@keyup.enter.native="handleQuery"
/>
</el-form-item>
<el-form-item label="产线编码" prop="lineCode">
<el-input
v-model="queryParams.lineCode"
placeholder="请输入产线编码"
clearable
@keyup.enter.native="handleQuery"
/>
</el-form-item>
<el-form-item label="产线名称" prop="lineName">
<el-input
v-model="queryParams.lineName"
placeholder="请输入产线名称"
clearable
@keyup.enter.native="handleQuery"
/>
</el-form-item>
<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-form>
<el-row :gutter="10" class="mb8">
<!-- <el-col :span="1.5">-->
<!-- <el-button-->
<!-- type="primary"-->
<!-- plain-->
<!-- icon="el-icon-plus"-->
<!-- size="mini"-->
<!-- @click="handleAdd"-->
<!-- v-hasPermi="['system:unitPrice:add']"-->
<!-- >新增</el-button>-->
<!-- </el-col>-->
<!-- <el-col :span="1.5">-->
<!-- <el-button-->
<!-- type="success"-->
<!-- plain-->
<!-- icon="el-icon-edit"-->
<!-- size="mini"-->
<!-- :disabled="single"-->
<!-- @click="handleUpdate"-->
<!-- v-hasPermi="['system:unitPrice:edit']"-->
<!-- >修改</el-button>-->
<!-- </el-col>-->
<el-col :span="1.5">
<el-button
type="danger"
plain
icon="el-icon-delete"
size="mini"
:disabled="multiple"
@click="handleDelete"
v-hasPermi="['system:unitPrice:remove']"
>删除</el-button>
</el-col>
<el-col :span="1.5">
<el-button
type="info"
plain
icon="el-icon-upload2"
size="mini"
@click="handleImport"
v-hasPermi="['system:unitPrice:import']"
>导入</el-button>
</el-col>
<el-col :span="1.5">
<el-button
type="warning"
plain
icon="el-icon-download"
size="mini"
@click="handleExport"
v-hasPermi="['system:unitPrice:export']"
>导出</el-button>
</el-col>
<right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
</el-row>
<el-table v-loading="loading" :data="unitPriceList" @selection-change="handleSelectionChange">
<el-table-column type="selection" width="55" align="center" />
<el-table-column label="物料码" align="center" prop="productCode" />
<el-table-column label="物料描述" align="center" prop="productName" />
<el-table-column label="产线编码" align="center" prop="lineCode" />
<el-table-column label="产线名称" align="center" prop="lineName" />
<el-table-column label="子工序编码" align="center" prop="childprocessCode" />
<el-table-column label="子工序名称" align="center" prop="childprocessName" />
<el-table-column label="工序单价(元/pc" align="center" prop="attr1" />
<el-table-column label="标准用人" align="center" prop="attr2" />
<el-table-column label="操作" align="center" class-name="small-padding fixed-width">
<template slot-scope="scope">
<el-button
size="mini"
type="text"
icon="el-icon-edit"
@click="handleUpdate(scope.row)"
v-hasPermi="['system:unitPrice:edit']"
>修改</el-button>
<el-button
size="mini"
type="text"
icon="el-icon-delete"
@click="handleDelete(scope.row)"
v-hasPermi="['system:unitPrice:remove']"
>删除</el-button>
</template>
</el-table-column>
</el-table>
<pagination
v-show="total>0"
:total="total"
:page.sync="queryParams.pageNum"
:limit.sync="queryParams.pageSize"
@pagination="getList"
/>
<!-- 添加或修改unitPrice对话框 -->
<el-dialog :title="title" :visible.sync="open" width="680px" append-to-body>
<el-form ref="form" :model="form" :rules="rules" label-width="100px">
<el-row>
<el-col :span="12">
<el-form-item label="产品编码" prop="productCode">
<el-input v-model="form.productCode" :disabled="true"/>
<!-- <el-input-->
<!-- placeholder="请输入内容"-->
<!-- v-model="form.productCode"-->
<!-- >-->
<!-- <template slot="suffix">-->
<!-- <i class="el-input__icon el-icon-search" @click="handleSearch"></i>-->
<!-- </template>-->
<!-- </el-input>-->
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="产品名称" prop="productName">
<el-input v-model="form.productName" :disabled="true"/>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="12">
<el-form-item label="产线" prop="lineName">
<el-input v-model="form.lineName" :disabled="true"/>
<!-- <el-select v-model="form.lineName" filterable placeholder="请选择产线"-->
<!-- @change="handleSelectChange">-->
<!-- <el-option-->
<!-- v-for="item in options"-->
<!-- :key="item.value"-->
<!-- :label="item.label"-->
<!-- :value="item.value"-->
<!-- :data-label="item.label"> &lt;!&ndash; 将label的值作为data-label属性传递 &ndash;&gt;-->
<!-- </el-option>-->
<!-- </el-select>-->
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="产线编码" prop="lineCode">
<el-input v-model="form.lineCode" :disabled="true"/>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="12">
<el-form-item label="子工序编码" prop="childprocessCode">
<el-input v-model="form.childprocessCode" :disabled="true"/>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="子工序名称" prop="childprocessName">
<el-input v-model="form.childprocessName" :disabled="true"/>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="12">
<el-form-item label="单价(元/PC" prop="attr1" label-width="120px" >
<el-input v-model="form.attr1" @input="handleInput"/>
</el-form-item>
</el-col>
</el-row>
</el-form>
<!-- <el-divider content-position="center" >操作步骤</el-divider>-->
<!-- <el-button type="primary"-->
<!-- plain-->
<!-- icon="el-icon-plus"-->
<!-- size="mini"-->
<!-- @click="addRow">添加</el-button>-->
<!-- <el-table-->
<!-- :data="tableData"-->
<!-- style="width: 100%; height: 300px; overflow-y: auto;"-->
<!-- border-->
<!-- stripe-->
<!-- >-->
<!-- &lt;!&ndash; Your table columns go here &ndash;&gt;-->
<!-- &lt;!&ndash; For example, if you have columns named 'name' and 'age': &ndash;&gt;-->
<!-- <el-table-column label="序号" prop="childProcessCode" width="100"></el-table-column>-->
<!-- <el-table-column label="工序名称" prop="childProcessName">-->
<!-- <template slot-scope="scope">-->
<!-- <el-input-->
<!-- v-model="scope.row.childProcessName" @change="handleEdit(scope.row, scope.$index)" ></el-input>-->
<!-- </template>-->
<!-- </el-table-column>-->
<!-- <el-table-column label="工序单价(元 / PC" prop="unitPrice">-->
<!-- <template slot-scope="scope">-->
<!-- <el-input-->
<!-- :type="inputType"-->
<!-- @input="handleInput(scope.row, scope.$index)"-->
<!-- v-model="scope.row.unitPrice" @change="handleEditUnitPrice(scope.row, scope.$index)" ></el-input>-->
<!-- </template>-->
<!-- </el-table-column>-->
<!-- <el-table-column label="操作" width="100">-->
<!-- <template slot-scope="scope">-->
<!-- <el-button size="mini" @click="handlDelete(scope.$index)">删除</el-button>-->
<!-- </template>-->
<!-- </el-table-column>-->
<!-- </el-table>-->
<div slot="footer" class="dialog-footer">
<el-button type="primary" @click="submitForm">确 定</el-button>
<el-button @click="cancel">取 消</el-button>
</div>
</el-dialog>
<el-dialog :title="upload.title" :visible.sync="upload.open" width="400px" append-to-body v-loading="upload.loading">
<el-upload
ref="upload"
:limit="1"
accept=".xlsx, .xls"
:headers="upload.headers"
:action="upload.url + '?updateSupport=' + upload.updateSupport"
:disabled="upload.isUploading"
:on-progress="handleFileUploadProgress"
:on-success="handleFileSuccess"
:auto-upload="false"
drag
>
<i class="el-icon-upload"></i>
<div class="el-upload__text">将文件拖到此处,或<em>点击上传</em></div>
<div class="el-upload__tip text-center" slot="tip">
<div class="el-upload__tip" slot="tip">
<el-checkbox v-model="upload.updateSupport" /> 是否更新已经存在的单价信息
</div>
<span>仅允许导入xls、xlsx格式文件。</span>
<el-link type="primary" :underline="false" style="font-size:12px;vertical-align: baseline;" @click="importTemplate">下载模板</el-link>
</div>
</el-upload>
<div slot="footer" class="dialog-footer">
<el-button type="primary" @click="submitFileForm">确 定</el-button>
<el-button @click="upload.open = false"> </el-button>
</div>
</el-dialog>
</div>
</template>
<script>
// import { ElEditable } from 'element-plus';
import { getToken } from "@/utils/auth";
import { listUnitPrice, getUnitPrice, delUnitPrice, addUnitPrice, updateUnitPrice } from "@/api/mes/unitPrice";
import { getProductByCode} from "@/api/wms/product";
import { listChildprocessall} from "@/api/mes/childprocess";
export default {
name: "UnitPrice",
// components: {
// 'el-editable': ElEditable,
// // 其他组件
// },
data() {
return {
// 遮罩层
loading: true,
// 选中数组
ids: [],
// 非单个禁用
single: true,
// 非多个禁用
multiple: true,
// 显示搜索条件
showSearch: true,
// 总条数
total: 0,
// unitPrice表格数据
unitPriceList: [],
// 弹出层标题
title: "",
// 是否显示弹出层
open: false,
options: [{
value: 'XL01',
label: '包装线01'
}, {
value: 'XL02',
label: '包装线02'
}, {
value: 'XL03',
label: '包装线03'
}, {
value: 'XL04',
label: '包装线04'
}, {
value: 'XL05',
label: '包装线05'
},{
value: 'XL06',
label: '包装线06'
},{
value: 'XL07',
label: '包装线07'
},{
value: 'XL08',
label: '包装线08'
}],
value: '',
upload: {
loading: false,
// 是否显示弹出层(用户导入)
open: false,
// 弹出层标题(用户导入)
title: "",
// 是否禁用上传
isUploading: false,
// 是否更新已经存在的用户数据
updateSupport: 0,
// 设置上传的请求头部
headers: {poolName: localStorage.getItem("USER_POOL_NAME_CURRENT"), Authorization: "Bearer " + getToken()},
// 上传的地址
url: process.env.VUE_APP_BASE_API + "/mes/unitPrice/importData"
},
// 查询参数
queryParams: {
pageNum: 1,
pageSize: 10,
factoryId: null,
productCode: null,
productName: null,
lineCode: null,
lineName: null,
childprocessId: null,
childprocessCode: null,
childprocessName: null,
attr1: null,
attr2: null,
attr3: null,
attr4: null,
},
productQueryParams:{
productCode: null,
productName: null,
},
// 表单参数
form: {},
// 表单校验
rules: {
productCode: [
{ required: true, message: "产品编码不能为空", trigger: "blur" },
],
lineName: [
{ required: true, message: "产线不能为空", trigger: "blur" },
],
attr1: [
{ required: true, message: "单价不能为空", trigger: "blur" },
],
},
productCodeList: [],
state: '',
timeout: null,
productCode:'',
tableData: [],
processOptions: [
{ value: 'Process 1', label: '工序1' },
{ value: 'Process 2', label: '工序2' },
],
nextID: 1,
inputType: 'text'
};
},
created() {
this.getList();
// this.fetchProcessOptions();
},
methods: {
addRow() {
// Calculate the next sequential ID
const nextIDString = String(this.nextID).padStart(2, '0');
this.tableData.push({ childProcessCode: nextIDString, childProcessName: '', _editablechildProcessName: true, _editableUnitPrice: true, });
this.nextID++;
},
handlDelete(index) {
// Delete a row from the table data
this.tableData.splice(index, 1);
// Find the maximum childProcessCode in the remaining rows
const maxID = this.tableData.reduce((max, row) => {
const id = parseInt(row.childProcessCode, 10);
return isNaN(id) ? max : Math.max(max, id);
}, 0);
// Set nextID to the next sequential ID
this.nextID = maxID + 1;
},
handleEdit(row, index) {
// Handle the edit event, if needed
// For example, you can make an API call to save the edited data.
console.log('Edited row:', row);
row._editablechildProcessName = false; // Set _editable to false after editing
},
handleInput(value) {
// 通过正则表达式检查输入是否为数字或小数
const regex = /^[0-9]*\.?[0-9]*$/;
if (!regex.test(value)) {
// 如果输入不是数字或小数,将其修正为合法的数字或小数
this.form.attr1 = value.replace(/[^0-9.]/g, '');
}
},
handleEditUnitPrice(row, index) {
console.log(row,index);
row._editableUnitPrice = false;
},
/** 查询unitPrice列表 */
getList() {
this.loading = true;
listUnitPrice(this.queryParams).then(response => {
this.unitPriceList = response.rows;
this.total = response.total;
this.loading = false;
});
},
// 取消按钮
cancel() {
this.open = false;
this.reset();
},
// 表单重置
reset() {
this.form = {
picId: null,
factoryId: null,
productCode: null,
productName: null,
lineCode: null,
lineName: null,
childprocessId: null,
childprocessCode: null,
childprocessName: null,
attr1: null,
attr2: null,
attr3: null,
attr4: null,
createBy: null,
createTime: null,
updateBy: null,
updateTime: null
};
this.resetForm("form");
this.tableData = [];
this.nextID=1;
},
/** 搜索按钮操作 */
handleQuery() {
this.queryParams.pageNum = 1;
this.getList();
},
/** 重置按钮操作 */
resetQuery() {
this.resetForm("queryForm");
this.handleQuery();
},
// 多选框选中数据
handleSelectionChange(selection) {
this.ids = selection.map(item => item.picId)
this.single = selection.length !== 1
this.multiple = !selection.length
},
/** 新增按钮操作 */
handleAdd() {
this.reset();
this.open = true;
this.title = "添加计件薪酬信息";
},
/** 修改按钮操作 */
handleUpdate(row) {
this.reset();
const picId = row.picId || this.ids
getUnitPrice(picId).then(response => {
this.form = response.data;
this.open = true;
this.title = "修改产品单价";
});
},
/** 提交按钮 */
submitForm() {
this.$refs["form"].validate(valid => {
if (valid) {
console.log(this.form,this.tableData)
if (this.form.picId != null) {
updateUnitPrice(this.form).then(response => {
this.$modal.msgSuccess("修改成功");
this.open = false;
this.getList();
});
}
// else {
// addUnitPrice(this.form).then(response => {
// this.$modal.msgSuccess("新增成功");
// this.open = false;
// this.getList();
// });
// }
}
});
},
/** 删除按钮操作 */
handleDelete(row) {
const picIds = row.picId || this.ids;
this.$modal.confirm('是否确认删除unitPrice编号为"' + picIds + '"的数据项?').then(function () {
return delUnitPrice(picIds);
}).then(() => {
this.getList();
this.$modal.msgSuccess("删除成功");
}).catch(() => {
});
},
/** 导出按钮操作 */
handleExport() {
this.download('mes/unitPrice/export', {
...this.queryParams
}, `unitPrice_${new Date().getTime()}.xlsx`)
},
/** 导入按钮操作 */
handleImport() {
this.upload.title = "导入";
this.upload.open = true;
},
/** 下载模板操作 */
importTemplate() {
this.download('mes/unitPrice/importTemplate', {}, `unitprice_template_${new Date().getTime()}.xlsx`)
},
// 文件上传中处理
handleFileUploadProgress(event, file, fileList) {
console.log(1)
this.upload.isUploading = true;
console.log(this.upload.isUploading)
},
// 文件上传成功处理
handleFileSuccess(response, file, fileList) {
console.log(2)
this.upload.loading=false;
this.upload.open = false;
this.upload.isUploading = false;
this.$refs.upload.clearFiles();
this.$alert("<div style='overflow: auto;overflow-x: hidden;max-height: 70vh;padding: 10px 20px 0;'>" + response.msg + "</div>", "导入结果", {dangerouslyUseHTMLString: true});
this.getList();
},
// 提交上传文件
submitFileForm() {
console.log(3)
this.upload.loading=true;
this.$refs.upload.submit();
},
handleSearch() {
console.log('Search triggered with input:', this.form.productCode);
let productCode=this.form.productCode;
getProductByCode(productCode).then(response => {
this.form.productName=response.data.productDescZh;
});
},
handleSelectChange(value) {
// Add your logic here to handle the selection change
console.log(value)
this.form.lineCode = value;
// this.form.lineName = selectedData;
// You can perform any actions based on the selected value here.
// For example, call a function or update some other data.
},
async loadOptions(query) {
try {
// Simulate an API call to fetch remote options based on the user's input
listChildprocessall(this.queryParams).then(response => {
const data = response.json();
this.processOptions = data.map(item => ({ value: item.id, label: item.name }));
// const data = response.json();
// this.processOptions = data;
// this.form.productName=response.rows[0].productDescZh;
});
} catch (error) {
console.error('Error fetching process options:', error);
}
},
// async fetchProcessOptions() {
// try {
// // Assuming listChildprocessall is an asynchronous function
// listChildprocessall(this.queryParams).then(response => {
// console.log(response)
// const data = response;
// this.processOptions = data.map(item => ({ value: item.childprocessName, label: item.childprocessCode }));
// // const data = response.json();
// // this.processOptions = data;
// // this.form.productName=response.rows[0].productDescZh;
// });
//
// } catch (error) {
// console.error('Error fetching process options:', error);
// }
// },
}
};
</script>