中航光电热表web
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.
 
 
 
 

418 lines
13 KiB

<template>
<basic-container>
<!-- 成本计算配置 -->
<el-tabs v-model="tabPosition" class="demo-tabs" @tab-change="tabPositionChange">
<el-tab-pane label="工序维护" name="processMaintenance"></el-tab-pane>
<el-tab-pane label="物料维护" name="materialMaintenance">
<el-alert
title="维护的物料不进行材料费用计算"
style="margin-bottom: 10px; background: #e6f7ff; border-color: #91d5ff"
show-icon
>
</el-alert>
</el-tab-pane>
</el-tabs>
<avue-crud
:option="option"
:table-loading="loading"
:data="data"
v-model="form"
v-model:page="page"
ref="crud"
@row-update="rowUpdate"
@row-save="rowSave"
@search-change="searchChange"
@search-reset="searchReset"
@selection-change="selectionChange"
@current-change="currentChange"
@size-change="sizeChange"
@refresh-change="refreshChange"
@on-load="onLoad"
>
<template #menu-left>
<el-button icon="el-icon-plus" type="primary" @click="handleAdd">新增</el-button>
<el-button icon="el-icon-delete" type="danger" @click="handleDelete"
>删除</el-button
>
<el-button icon="el-icon-upload" type="success" @click="handleImport">导入</el-button>
</template>
<template #menu="scope">
<el-button
type="text"
v-if="tabPosition == 'processMaintenance'"
@click="maintainProcess(scope.row)"
>维护</el-button
>
<el-button
type="text"
v-if="tabPosition == 'processMaintenance'"
@click="deleteRow(scope.row)"
>删除</el-button
>
</template>
</avue-crud>
<el-dialog :title="title" append-to-body v-model="showDialog" width="60%">
<div style="margin-bottom: 10px">
<el-button type="primary" icon="el-icon-plus" @click="insertEvent()"
>插入一行</el-button
>
<el-button plain type="danger" @click="remove">删除选择行</el-button>
<el-button type="primary" @click="handleSave">保存</el-button>
</div>
<el-table :data="processData" @select="selectChange">
<el-table-column type="selection" width="55px"></el-table-column>
<el-table-column align="center" label="作业中心" prop="workCenter">
<template #default="scope">
<el-select v-model="scope.row.workCenter">
<el-option label="镀金大批量作业中心" value="1"></el-option>
<el-option label="镀金小批量作业中心" value="2"></el-option>
</el-select>
</template>
</el-table-column>
<el-table-column align="center" label="工序" prop="process">
<template #default="scope">
<el-select multiple v-model="scope.row.processVal">
<el-option label="镀金" value="1"></el-option>
<el-option label="滚金" value="2"></el-option>
<el-option label="化学镀镍" value="3"></el-option>
</el-select>
</template>
</el-table-column>
<el-table-column align="center" label="计算方式" prop="formulaMode">
<template #default="scope">
<el-radio-group v-model="scope.row.formulaMode">
<el-radio label="1">面积</el-radio>
<el-radio label="2">体积</el-radio>
</el-radio-group>
</template>
</el-table-column>
</el-table>
</el-dialog>
<el-dialog :title="title" append-to-body v-model="showMaterial" width="60%">
<div style="margin-bottom: 10px">
<el-button type="primary" icon="el-icon-plus" @click="insertRow()"
>插入一行</el-button
>
<el-button plain type="danger" @click="removeRow">删除选择行</el-button>
<el-button type="primary" @click="handleSave">保存</el-button>
</div>
<el-table :data="materialData" @select="selectChange">
<el-table-column type="selection" width="55px"></el-table-column>
<el-table-column align="center" label="物料编号" prop="goodsNo">
<template #default="{ row, $index }">
<el-select
v-model="row.goodsNo"
@change="(event) => changeGoodsNo(event, $index)"
>
<el-option
v-for="item in goodsData"
:label="item.label"
:value="item.label"
:key="item.label"
></el-option>
</el-select>
</template>
</el-table-column>
<el-table-column
align="center"
label="物料名称"
prop="goodsName"
></el-table-column>
</el-table>
</el-dialog>
<!-- 导入 -->
<basic-import v-if="isShowImport" title="导入" :isShow="isShowImport"
templateUrl="/blade-desk/QA/CycleTestItem/download-excel-template"
templateName="试验项目模板.xls"
importUrl="/blade-desk/QA/CycleTestItem/import-excel"
@closeDialog="closeDialog"></basic-import>
</basic-container>
</template>
<script>
import costColumnData from "./js/costColumnData";
import basicImport from '@/components/basic-import/main.vue'
export default {
components: {
basicImport,
},
data() {
return {
isShowImport:false,
tabPosition: "processMaintenance",
loading: false,
showDialog: false,
showMaterial: false,
processData: [],
deleteProcessArr: [],
selectionList: [],
materialData: [],
data: [],
goodsData: [
{ label: "0399-222-21", value: "物料一" },
{ label: "0399-222-22", value: "物料二" },
{ label: "0399-222-23", value: "物料三" },
{ label: "0399-222-24", value: "物料四" },
],
form: {},
title: "新增",
page: {
pageSize: 10,
currentPage: 1,
total: 0,
},
option: {
height: "auto",
calcHeight: 32,
tip: false,
simplePage: true,
searchShow: true,
searchMenuSpan: 6,
searchIcon: true,
searchIndex: 3,
tree: false,
border: true,
index: true,
selection: true,
viewBtn: false,
delBtn: false,
addBtn: false,
editBtn: false,
editBtnText: "修改",
viewBtnIcon: " ",
delBtnIcon: " ",
editBtnIcon: " ",
viewBtnText: "详情",
labelWidth: 120,
searchLabelWidth: 120,
menuWidth: 220,
dialogWidth: 1200,
dialogClickModal: false,
searchEnter: true,
excelBtn: false,
filterBtn: true,
searchShowBtn: false,
columnSort: true,
excelBtn: true,
columnSort: true,
index: false,
showOverflowTooltip: true,
searchLabelPosition: "left",
searchLabelPosition: "left",
searchGutter: 24,
searchSpan: 6,
menuAlign: "left",
gridBtn: false,
searchMenuPosition: "right",
addBtnIcon: " ",
viewBtnIcon: " ",
delBtnIcon: " ",
editBtnIcon: " ",
align: "center",
column: [],
},
};
},
mounted() {
this.option.column = costColumnData[this.tabPosition];
},
methods: {
// 点击导入按钮
handleImport() {
this.isShowImport = true
},
selectionChange(val) {
this.selectionList = val;
},
changeGoodsNo(event, index) {
let tmp = this.goodsData.find((item) => item.label == event);
this.materialData[index].goodsName = tmp.value;
},
// 点击删除按钮
handleDelete() {
if (this.selectionList.length == 0) {
this.$message.error("请先选择数据");
return;
}
this.$confirm("确定将选择数据删除?", {
confirmButtonText: "确定",
cancelButtonText: "取消",
type: "warning",
}).then((res) => {});
},
deleteRow(row) {
this.$confirm("确定将选择数据删除?", {
confirmButtonText: "确定",
cancelButtonText: "取消",
type: "warning",
}).then((res) => {});
},
tabPositionChange(val) {
if (val == "materialMaintenance") {
this.option.menu = false;
this.data = [
{
id: 1,
goodsNo: "0399-222-21",
goodsName: "物料一",
createUser: "李四",
createTime: "2023-08-20 11:23:25",
},
{
id: 2,
goodsNo: "0399-222-22",
goodsName: "物料二",
createUser: "李四",
createTime: "2023-08-20 11:23:25",
},
];
this.page.total = this.data.length;
} else {
this.option.menu = true;
this.data = [
{
id: 1,
workCenter: "镀金大批量作业中心",
processVal: ["1", "2", "3"],
processTitle: "镀金、滚金、化学镀镍",
formulaMode: "1",
createUser: "张三",
createTime: "2023-11-20 11:23:25",
},
{
id: 2,
workCenter: "镀金大批量作业中心",
processVal: ["1", "3"],
processTitle: "镀金、化学镀镍",
formulaMode: "2",
createUser: "张三",
createTime: "2023-11-20 11:23:25",
},
{
id: 3,
workCenter: "镀金大批量作业中心",
processVal: ["1", "2"],
processTitle: "镀金、滚金",
formulaMode: "1",
createUser: "张三",
createTime: "2023-11-20 11:23:25",
},
];
this.page.total = this.data.length;
}
this.option.column = costColumnData[this.tabPosition];
},
maintainProcess(row) {
this.title = "维护";
this.processData = [{ ...row }];
this.showDialog = true;
},
handleAdd() {
if (this.tabPosition == "materialMaintenance") {
this.materialData = [];
this.showMaterial = true;
} else {
this.title = "新增";
this.processData = [];
this.showDialog = true;
}
},
selectChange(list, row) {
row._select = !row._select;
},
//插入一行
insertEvent() {
const record = {
_select: false,
};
this.processData.push(record);
},
insertRow() {
const record = {
_select: false,
};
this.materialData.push(record);
},
//删除所选行
removeRow() {
let arr = this.materialData.filter((item) => item._select);
if (arr.length != 0) {
this.$confirm("确定将选择数据删除?", {
confirmButtonText: "确定",
cancelButtonText: "取消",
type: "warning",
}).then(() => {
if (this.rowId) {
let deleteData = this.materialData.filter((item) => item._select);
this.deleteProcessArr = deleteData.filter((item) => item.tidId);
}
let deleteArr = this.materialData.filter((item) => !item._select);
this.materialData = deleteArr;
});
} else {
this.$message.error("请至少选择一条数据进行操作!");
}
},
//删除所选行
remove() {
let arr = this.processData.filter((item) => item._select);
if (arr.length != 0) {
this.$confirm("确定将选择数据删除?", {
confirmButtonText: "确定",
cancelButtonText: "取消",
type: "warning",
}).then(() => {
if (this.rowId) {
let deleteData = this.processData.filter((item) => item._select);
this.deleteProcessArr = deleteData.filter((item) => item.tidId);
}
let deleteArr = this.processData.filter((item) => !item._select);
this.processData = deleteArr;
});
} else {
this.$message.error("请至少选择一条数据进行操作!");
}
},
handleSave() {
this.showDialog = false;
this.showMaterial = false;
},
onLoad() {
this.data = [
{
id: 1,
workCenter: "镀金大批量作业中心",
processVal: ["1", "2", "3"],
processTitle: "镀金、滚金、化学镀镍",
formulaMode: "1",
createUser: "张三",
createTime: "2023-11-20 11:23:25",
},
{
id: 1,
workCenter: "镀金大批量作业中心",
processVal: ["1", "3"],
processTitle: "镀金、化学镀镍",
formulaMode: "2",
createUser: "张三",
createTime: "2023-11-20 11:23:25",
},
{
id: 1,
workCenter: "镀金大批量作业中心",
processVal: ["1", "2"],
processTitle: "镀金、滚金",
formulaMode: "1",
createUser: "张三",
createTime: "2023-11-20 11:23:25",
},
];
this.page.total = this.data.length;
},
},
};
</script>
<style></style>