|
|
@@ -0,0 +1,507 @@
|
|
|
+<template>
|
|
|
+ <div class="app-container">
|
|
|
+ <div class="filter-container">
|
|
|
+ <el-form
|
|
|
+ :model="queryParams"
|
|
|
+ ref="form"
|
|
|
+ :rules="rules"
|
|
|
+ label-width="80px"
|
|
|
+ size="small"
|
|
|
+ :inline="true"
|
|
|
+ >
|
|
|
+ <el-form-item label="审核人:">
|
|
|
+ <el-input
|
|
|
+ @keyup.enter.native="getList"
|
|
|
+ v-model="queryParams.id"
|
|
|
+ ></el-input>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="物料编码:">
|
|
|
+ <el-input
|
|
|
+ @keyup.enter.native="getList"
|
|
|
+ v-model="queryParams.materialCode"
|
|
|
+ ></el-input>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="物料名称:">
|
|
|
+ <el-input
|
|
|
+ @keyup.enter.native="getList"
|
|
|
+ v-model="queryParams.materialName"
|
|
|
+ ></el-input>
|
|
|
+ </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>
|
|
|
+ </div>
|
|
|
+ <div class="btn mb10">
|
|
|
+ <el-button
|
|
|
+ icon="el-icon-plus"
|
|
|
+ type="primary"
|
|
|
+ size="mini"
|
|
|
+ @click="addHandler"
|
|
|
+ >新增</el-button
|
|
|
+ >
|
|
|
+ <el-button
|
|
|
+ icon="el-icon-delete"
|
|
|
+ type="danger"
|
|
|
+ size="mini"
|
|
|
+ :disabled="ids.length == 0"
|
|
|
+ @click="deleteHandler"
|
|
|
+ >删除</el-button
|
|
|
+ >
|
|
|
+ </div>
|
|
|
+ <div class="main-area">
|
|
|
+ <el-row :gutter="10">
|
|
|
+ <el-col :span="6">
|
|
|
+ <!-- <div class="top-query">
|
|
|
+ <el-row>
|
|
|
+ <el-form
|
|
|
+ :model="treeForm"
|
|
|
+ ref="treeForm"
|
|
|
+ label-width="80px"
|
|
|
+ :inline="true"
|
|
|
+ size="mini"
|
|
|
+ >
|
|
|
+ <el-col :span="24">
|
|
|
+ <el-form-item label="分组搜索">
|
|
|
+ <el-input v-model="treeForm.materialCode"></el-input>
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="19">
|
|
|
+ <el-form-item label="分组查询">
|
|
|
+ <el-input
|
|
|
+ style="width: 150px"
|
|
|
+ v-model="treeForm.materialName"
|
|
|
+ ></el-input>
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="5">
|
|
|
+ <el-form-item>
|
|
|
+ <el-button size="mini" @click="queryTreeData"
|
|
|
+ >查询</el-button
|
|
|
+ >
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ </el-form>
|
|
|
+ </el-row>
|
|
|
+ </div> -->
|
|
|
+ <div class="left-area">
|
|
|
+ <el-tree
|
|
|
+ :data="treeOptions"
|
|
|
+ :props="defaultProps"
|
|
|
+ :expand-on-click-node="false"
|
|
|
+ :filter-node-method="filterNode"
|
|
|
+ ref="tree"
|
|
|
+ node-key="id"
|
|
|
+ default-expand-all
|
|
|
+ highlight-current
|
|
|
+ @node-click="handleNodeClick"
|
|
|
+ >
|
|
|
+ <span class="custom-tree-node" slot-scope="{ data }">
|
|
|
+ <span>{{ data.materialName }}</span>
|
|
|
+ <span>
|
|
|
+ <el-button
|
|
|
+ size="mini"
|
|
|
+ type="primary"
|
|
|
+ icon="el-icon-edit"
|
|
|
+ circle
|
|
|
+ @click="editHandler(data)"
|
|
|
+ ></el-button>
|
|
|
+ <el-button
|
|
|
+ size="mini"
|
|
|
+ type="danger"
|
|
|
+ icon="el-icon-delete"
|
|
|
+ circle
|
|
|
+ @click="deleteHandler(data)"
|
|
|
+ ></el-button>
|
|
|
+ </span>
|
|
|
+ </span>
|
|
|
+ </el-tree>
|
|
|
+ </div>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="18">
|
|
|
+ <el-table
|
|
|
+ :data="materialInfoList"
|
|
|
+ border
|
|
|
+ stripe
|
|
|
+ @selection-change="handleSelectionChange"
|
|
|
+ >
|
|
|
+ <el-table-column type="selection" width="55" />
|
|
|
+ <!-- <el-table-column label="审核人"></el-table-column> -->
|
|
|
+ <el-table-column label="父项物料编码" prop="fid"></el-table-column>
|
|
|
+ <el-table-column
|
|
|
+ label="物料编码"
|
|
|
+ prop="materialCode"
|
|
|
+ ></el-table-column>
|
|
|
+ <el-table-column label="物料名称" prop="materialName" />
|
|
|
+ <el-table-column label="操作">
|
|
|
+ <template slot-scope="scope">
|
|
|
+ <el-dropdown>
|
|
|
+ <el-button type="warning" plain size="small">
|
|
|
+ 操作<i class="el-icon-arrow-down el-icon--right"></i>
|
|
|
+ </el-button>
|
|
|
+ <el-dropdown-menu slot="dropdown">
|
|
|
+ <el-dropdown-item>
|
|
|
+ <el-button
|
|
|
+ size="mini"
|
|
|
+ type="text"
|
|
|
+ icon="el-icon-edit"
|
|
|
+ @click="editHandler(scope.row)"
|
|
|
+ >修改
|
|
|
+ </el-button>
|
|
|
+ </el-dropdown-item>
|
|
|
+ <el-dropdown-item>
|
|
|
+ <el-button
|
|
|
+ size="mini"
|
|
|
+ type="text"
|
|
|
+ icon="el-icon-delete"
|
|
|
+ @click="deleteHandler(scope.row)"
|
|
|
+ >删除
|
|
|
+ </el-button>
|
|
|
+ </el-dropdown-item>
|
|
|
+ </el-dropdown-menu>
|
|
|
+ </el-dropdown>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ </el-table>
|
|
|
+ <pagination
|
|
|
+ v-show="total > 0"
|
|
|
+ :total="total"
|
|
|
+ :page.sync="queryParams.pageNum"
|
|
|
+ :limit.sync="queryParams.pageSize"
|
|
|
+ @pagination="getList"
|
|
|
+ />
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ </div>
|
|
|
+ <el-dialog :title="title" :visible.sync="show" width="700px">
|
|
|
+ <el-row :gutter="20">
|
|
|
+ <el-form
|
|
|
+ :model="editorForm"
|
|
|
+ ref="editorForm"
|
|
|
+ :rules="editorFormRules"
|
|
|
+ label-width="80px"
|
|
|
+ :inline="false"
|
|
|
+ size="normal"
|
|
|
+ >
|
|
|
+ <el-col :span="12">
|
|
|
+ <el-form-item label="类型" prop="type">
|
|
|
+ <el-select v-model="editorForm.type" placeholder="" filterable>
|
|
|
+ <el-option label="分类" value="0" />
|
|
|
+ <el-option label="物料" value="1" />
|
|
|
+ </el-select>
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="12">
|
|
|
+ <el-form-item label="父项物料" prop="fid">
|
|
|
+ <!-- <el-cascader
|
|
|
+ :emitPath="false"
|
|
|
+ v-model="editorForm.fid"
|
|
|
+ :options="treeOptions"
|
|
|
+ :show-all-levels="false"
|
|
|
+ :props="cascaderProps"
|
|
|
+ ></el-cascader> -->
|
|
|
+ <treeselect
|
|
|
+ v-model="editorForm.fid"
|
|
|
+ :normalizer="normalizer"
|
|
|
+ :options="treeOptions"
|
|
|
+ :multiple="false"
|
|
|
+ :disable-branch-nodes="false"
|
|
|
+ :clear-on-select="true"
|
|
|
+ :flat="true"
|
|
|
+ :show-count="true"
|
|
|
+ placeholder="请选择父级物料信息"
|
|
|
+ />
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="12">
|
|
|
+ <el-form-item label="物料编码" prop="materialCode">
|
|
|
+ <el-input v-model="editorForm.materialCode"></el-input>
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="12">
|
|
|
+ <el-form-item label="物料名称" prop="materialName">
|
|
|
+ <el-input v-model="editorForm.materialName"></el-input>
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ </el-form>
|
|
|
+ </el-row>
|
|
|
+ <template #footer>
|
|
|
+ <span>
|
|
|
+ <el-button @click="show = false">取消</el-button>
|
|
|
+ <el-button type="primary" @click="confirmHandler">确认</el-button>
|
|
|
+ </span>
|
|
|
+ </template>
|
|
|
+ </el-dialog>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+import Treeselect from "@riophae/vue-treeselect";
|
|
|
+import "@riophae/vue-treeselect/dist/vue-treeselect.css";
|
|
|
+import {
|
|
|
+ treeList,
|
|
|
+ bomList,
|
|
|
+ addBom,
|
|
|
+ updateBom,
|
|
|
+ deleteBom,
|
|
|
+} from "@/api/amichi/BOMList/index";
|
|
|
+export default {
|
|
|
+ name: "BOMList",
|
|
|
+ props: [],
|
|
|
+ components: { Treeselect },
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ ids: [], //勾选数据
|
|
|
+ title: "",
|
|
|
+ show: false, //新增/修改弹窗
|
|
|
+ // 总条数
|
|
|
+ total: 0,
|
|
|
+ materialInfoList: [], //列表数据
|
|
|
+ defaultProps: {
|
|
|
+ children: "childerns",
|
|
|
+ label: "materialName",
|
|
|
+ }, //树形数据格式
|
|
|
+ cascaderProps: {
|
|
|
+ value: "id",
|
|
|
+ children: "childerns",
|
|
|
+ label: "materialName",
|
|
|
+ checkStrictly: true,
|
|
|
+ },
|
|
|
+ treeOptions: undefined, //树形数据
|
|
|
+ queryParams: {
|
|
|
+ pageNum: 1,
|
|
|
+ pageSize: 10,
|
|
|
+ id: null,
|
|
|
+ fid: null,
|
|
|
+ materialCode: null,
|
|
|
+ materialName: null,
|
|
|
+ // isClickLine: "1",
|
|
|
+ isOnlyMenu: "1",
|
|
|
+ },
|
|
|
+ rules: {},
|
|
|
+ // 树形数据查询表单
|
|
|
+ treeForm: {
|
|
|
+ materialCode: null,
|
|
|
+ materialName: null,
|
|
|
+ },
|
|
|
+ // 新增物料表单
|
|
|
+ editorForm: {
|
|
|
+ fid: "1",
|
|
|
+ isTreeShow: "",
|
|
|
+ isClickLine: "",
|
|
|
+ isOnlyMenu: "",
|
|
|
+ materialCode: "",
|
|
|
+ materialName: "",
|
|
|
+ type: "0", //'0'分类 '1'物料
|
|
|
+ },
|
|
|
+ editorFormRules: {
|
|
|
+ type: [
|
|
|
+ {
|
|
|
+ required: true,
|
|
|
+ message: "请选择类型",
|
|
|
+ trigger: "change",
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ fid: [
|
|
|
+ {
|
|
|
+ required: true,
|
|
|
+ message: "请选择父项物料",
|
|
|
+ trigger: "change",
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ materialCode: [
|
|
|
+ {
|
|
|
+ required: true,
|
|
|
+ message: "物料编码不能为空",
|
|
|
+ trigger: "blur",
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ materialName: [
|
|
|
+ {
|
|
|
+ required: true,
|
|
|
+ message: "物料名称不能为空",
|
|
|
+ trigger: "blur",
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ },
|
|
|
+ editData: {}, //当前编辑数据
|
|
|
+ };
|
|
|
+ },
|
|
|
+ computed: {},
|
|
|
+ mounted() {
|
|
|
+ this.initTreeList();
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ // 多选框选中数据
|
|
|
+ handleSelectionChange(selection) {
|
|
|
+ this.ids = selection.map((item) => item.id);
|
|
|
+ },
|
|
|
+ // 删除回调
|
|
|
+ deleteHandler(data) {
|
|
|
+ let ids = data?.id || this.ids;
|
|
|
+ this.$confirm('是否确认删除物料编号为"' + ids + '"的数据项？', "提示", {
|
|
|
+ confirmButtonText: "确定",
|
|
|
+ cancelButtonText: "取消",
|
|
|
+ type: "warning",
|
|
|
+ })
|
|
|
+ .then(() => {
|
|
|
+ deleteBom(ids).then((data) => {
|
|
|
+ if (data.code == 666) {
|
|
|
+ this.$message({
|
|
|
+ message: data.msg,
|
|
|
+ type: "warning",
|
|
|
+ });
|
|
|
+ } else if (data.code == 200) {
|
|
|
+ this.$modal.msgSuccess("删除成功");
|
|
|
+ }
|
|
|
+ });
|
|
|
+ this.getList();
|
|
|
+ this.initTreeList();
|
|
|
+ })
|
|
|
+ .catch((e) => {
|
|
|
+ console.log(e);
|
|
|
+ this.$message({
|
|
|
+ type: "info",
|
|
|
+ message: "已取消删除",
|
|
|
+ });
|
|
|
+ });
|
|
|
+ },
|
|
|
+ /** 转换菜单数据结构 */
|
|
|
+ normalizer(node) {
|
|
|
+ if (node.children && !node.children.length) {
|
|
|
+ delete node.children;
|
|
|
+ }
|
|
|
+ return {
|
|
|
+ id: node.id,
|
|
|
+ label: node.materialName,
|
|
|
+ children: node.childerns,
|
|
|
+ };
|
|
|
+ },
|
|
|
+ // 修改回调
|
|
|
+ editHandler(data) {
|
|
|
+ this.title = "修改";
|
|
|
+ let { id, fid, isOnlyMenu, materialCode, materialName } = data;
|
|
|
+ this.editData = data;
|
|
|
+ this.editorForm = {
|
|
|
+ fid: fid,
|
|
|
+ type: isOnlyMenu,
|
|
|
+ materialCode,
|
|
|
+ materialName,
|
|
|
+ };
|
|
|
+ this.show = true;
|
|
|
+ },
|
|
|
+ // 新增/修改确认回调
|
|
|
+ async confirmHandler() {
|
|
|
+ this.$refs.editorForm.validate(async (valid) => {
|
|
|
+ if (valid) {
|
|
|
+ let { fid, materialCode, materialName, type } = this.editorForm;
|
|
|
+ let payload = {
|
|
|
+ fid,
|
|
|
+ isTreeShow: "",
|
|
|
+ isClickLine: "",
|
|
|
+ isOnlyMenu: "",
|
|
|
+ materialCode,
|
|
|
+ materialName,
|
|
|
+ };
|
|
|
+ payload.isClickLine = type;
|
|
|
+ payload.isTreeShow = type;
|
|
|
+ payload.isOnlyMenu = type;
|
|
|
+ let fun = addBom;
|
|
|
+ if (this.title == "修改") {
|
|
|
+ payload.id = this.editData.id;
|
|
|
+ fun = updateBom;
|
|
|
+ }
|
|
|
+
|
|
|
+ let res = await fun(payload);
|
|
|
+ if (res.code == 200) {
|
|
|
+ this.$message.success("操作成功");
|
|
|
+ this.show = false;
|
|
|
+ this.getList();
|
|
|
+ } else {
|
|
|
+ this.$message.error(res.msg);
|
|
|
+ }
|
|
|
+ this.initTreeList();
|
|
|
+ }
|
|
|
+ });
|
|
|
+ },
|
|
|
+ // 新增回调
|
|
|
+ addHandler() {
|
|
|
+ this.resetForm("editorForm");
|
|
|
+ this.title = "新增";
|
|
|
+ this.show = true;
|
|
|
+ },
|
|
|
+ // 初始化树形数据
|
|
|
+ initTreeList() {
|
|
|
+ this.resetForm("treeForm");
|
|
|
+ this.getTreeList();
|
|
|
+ },
|
|
|
+ // 获取树形数据
|
|
|
+ async getTreeList() {
|
|
|
+ let res = await treeList();
|
|
|
+ if (res.code == 200) {
|
|
|
+ this.treeOptions = res.data;
|
|
|
+ }
|
|
|
+ },
|
|
|
+ // 树形数据检索回调
|
|
|
+ queryTreeData() {},
|
|
|
+ /** 搜索按钮操作 */
|
|
|
+ handleQuery() {
|
|
|
+ this.queryParams.pageNum = 1;
|
|
|
+ this.getList();
|
|
|
+ },
|
|
|
+ /** 重置按钮操作 */
|
|
|
+ resetQuery() {
|
|
|
+ this.resetForm("queryParams");
|
|
|
+ this.handleQuery();
|
|
|
+ },
|
|
|
+ // 筛选节点
|
|
|
+ filterNode(value, data) {
|
|
|
+ if (!value) return true;
|
|
|
+ return data.label.indexOf(value) !== -1;
|
|
|
+ },
|
|
|
+ // 节点单击事件
|
|
|
+ handleNodeClick(data) {
|
|
|
+ // if (data.isClickLine == "1") return;
|
|
|
+
|
|
|
+ this.queryParams.fid = data.id;
|
|
|
+ this.handleQuery();
|
|
|
+ },
|
|
|
+ // 条件查询函数
|
|
|
+ async getList() {
|
|
|
+ let res = await bomList(this.queryParams);
|
|
|
+ if (res.code == 200) {
|
|
|
+ this.materialInfoList = res.rows;
|
|
|
+ this.total = res.total;
|
|
|
+ } else {
|
|
|
+ this.$message.error(res.msg);
|
|
|
+ }
|
|
|
+ },
|
|
|
+ },
|
|
|
+};
|
|
|
+</script>
|
|
|
+
|
|
|
+<style scoped lang="scss">
|
|
|
+.left-area {
|
|
|
+ min-height: 400px;
|
|
|
+}
|
|
|
+.custom-tree-node {
|
|
|
+ flex: 1;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: space-between;
|
|
|
+ font-size: 14px;
|
|
|
+ padding-right: 8px;
|
|
|
+}
|
|
|
+::v-deep .el-tree-node__content {
|
|
|
+ height: 30px;
|
|
|
+}
|
|
|
+</style>
|
lph