factory_web/src/views/mtm/materials.vue

346 lines
7.6 KiB
Vue

<template>
<el-container>
<el-header>
<div class="left-panel">
<el-button
type="primary"
icon="el-icon-plus"
@click="add"
v-auth="'material.create'"
>新增</el-button
>
<scFileImport
:templateUrl="materialTemplate"
accept=".xlsx"
:apiObj="$API.common.upload"
@success="upSuccess"
>
</scFileImport>
</div>
<div class="right-panel">
<el-input
v-model="query.search"
placeholder="名称"
clearable
></el-input>
<el-button
type="primary"
icon="el-icon-search"
@click="handleQuery"
></el-button>
</div>
</el-header>
<el-main class="nopadding">
<el-container>
<el-header>
<el-tabs
v-model="activeName"
class="demo-tabs"
@tab-click="handleClick"
type="card"
>
<el-tab-pane
v-for="item in tabOptions"
v-bind:key="item.name"
:label="item.label"
:name="item.name"
>
</el-tab-pane>
</el-tabs>
<el-checkbox
v-model="showHidden"
label="显示隐式物料"
@change="hiddenChange"
/>
</el-header>
<el-main class="nopadding">
<scTable
ref="table"
:apiObj="apiObj"
row-key="id"
stripe
@row-click="rowClick"
>
<el-table-column type="index" width="50" />
<el-table-column label="物料编号" prop="number">
</el-table-column>
<el-table-column label="物料名称" prop="name">
</el-table-column>
<el-table-column label="规格" prop="specification">
</el-table-column>
<el-table-column label="型号" prop="model">
</el-table-column>
<el-table-column
label="物料特征"
prop="type"
width="230"
>
<template #default="scope">
<span
><el-tag>{{
typeOptions[scope.row.type]
}}</el-tag>
<el-tag
type="warning"
v-if="scope.row.is_assemb"
effect="plain"
>组</el-tag
>
<el-tag
type="warning"
v-if="scope.row.process_name"
effect="plain"
>{{ scope.row.process_name }}</el-tag
>
<el-tag
type="warning"
v-if="scope.row.is_hidden"
effect="plain"
>隐</el-tag
></span
>
</template>
</el-table-column>
<el-table-column label="物料系列" prop="cate" width="80">
</el-table-column>
<el-table-column label="关联物料" prop="brothers">
<template #default="scope">
<el-icon
v-if="scope.row.brothers.length > 0"
color="green"
>
<CircleCheckFilled />
</el-icon>
</template>
</el-table-column>
<el-table-column
label="计量单位"
prop="unit"
width="80"
>
</el-table-column>
<el-table-column label="总库存" prop="count">
</el-table-column>
<el-table-column
label="安全库存"
prop="count_safe"
>
</el-table-column>
<el-table-column
v-if="materialType == ''"
label="操作"
fixed="right"
align="center"
width="140"
>
<template #default="scope">
<el-button
link
type="primary"
@click="table_edit(scope.row)"
v-auth="'material.update'"
>
编辑
</el-button>
<el-button
link
type="warning"
@click="table_copy(scope.row)"
v-auth="'material.create'"
>
复制
</el-button>
<el-button
link
type="danger"
@click="table_del(scope.row)"
v-auth="'material.delete'"
>
删除
</el-button>
</template>
</el-table-column>
</scTable>
</el-main>
</el-container>
</el-main>
</el-container>
<save-dialog
v-if="dialog.save"
ref="saveDialog"
@success="handleSaveSuccess"
@closed="dialog.save = false"
></save-dialog>
</template>
<script>
import saveDialog from "./materials_form.vue";
import scFileImport from "@/components/scFileImport";
import scFileExport from "@/components/scFileExport";
import { ElLoading } from "element-plus";
export default {
name: "rparty",
props: {
materialType: {
//当作选择页面时传参
type: String,
default() {
return "";
},
},
},
components: {
saveDialog,
scFileImport,
scFileExport,
ElLoading,
},
data() {
return {
materialTemplate: "/media/template/material.xlsx",
dialog: {
save: false,
},
apiObj: null,
query: { type: 10, is_hidden: false },
activeName: "主要原料",
selection: [],
state_: {
10: "完好",
20: "限用",
30: "在修",
40: "禁用",
},
tabOptions: [
{ label: "成品", name: 10 },
{ label: "半成品", name: 20 },
{ label: "主要原料", name: 30 },
{ label: "辅助材料", name: 40 },
// { label: "加工工具", name: 50 },
// { label: "辅助工装", name: 60 },
{ label: "办公用品", name: 70 },
// { label: "电/水/气", name: 0 },
],
typeOptions: {
0: "电/水/气",
10: "成品",
20: "半成品",
30: "主要原料",
40: "辅助材料",
// 50: '加工工具',
// 60: '辅助工装',
70: "办公用品",
},
materialId: "",
materialName: "",
showHidden: false,
};
},
mounted() {
console.log("materialType", this.materialType);
this.apiObj = this.$API.mtm.material.list;
this.$refs.table.queryData(this.query);
},
methods: {
rowClick(row) {
console.log("rowClick", row);
this.materialId = row.id;
this.materialName = row.full_name;
this.$emit("choseChange", row.id);
},
handleClick(pane, ev) {
this.query.type = pane.props.name;
this.query.page = 1;
this.$refs.table.queryData(this.query);
},
//添加
add() {
this.dialog.save = true;
this.$nextTick(() => {
this.$refs.saveDialog.open("add");
});
},
table_copy(row) {
this.dialog.save = true;
this.$nextTick(() => {
this.$refs.saveDialog.open("add").setData(row);
});
},
//编辑
table_edit(row) {
this.dialog.save = true;
this.$nextTick(() => {
this.$refs.saveDialog.open("edit").setData(row);
});
},
//查看
table_show(row) {
this.dialog.save = true;
this.$nextTick(() => {
this.$refs.saveDialog.open("show").setData(row);
});
},
//删除
async table_del(row) {
this.$confirm(`确定删除吗?`, "提示", {
type: "warning",
})
.then(() => {
this.$API.mtm.material.delete
.req(row.id)
.then((res) => {
this.$message.success("删除成功");
this.$refs.table.refresh();
return res;
})
.catch((err) => {
return err;
});
})
.catch(() => {});
},
//本地更新数据
handleSaveSuccess(data, mode) {
if (mode == "add") {
this.$refs.table.refresh();
} else if (mode == "edit") {
this.$refs.table.refresh();
}
},
handleQuery() {
this.$refs.table.queryData(this.query);
},
resetQuery() {
this.query = {};
},
upSuccess(res, close) {
close();
const loading = ElLoading.service({
fullscreen: true,
text: "解析中...请稍等",
});
this.$API.mtm.material.daoru
.req({ path: res.path })
.then((res) => {
loading.close();
this.$message.success("导入成功");
this.$refs.table.queryData(this.query);
})
.catch((err) => {
loading.close();
});
},
hiddenChange(val) {
if (val) {
this.query.is_hidden = "";
} else {
this.query.is_hidden = false;
}
this.$refs.table.queryData(this.query);
},
},
};
</script>