物料分类管理

pages/materiel/classification/add.vue

@@ -14,7 +14,7 @@
         </Col>
         <Col :span="12">
           <FormItem label="状态" prop="productName" placeholder="请选择">
-            <Select v-model="entity.productName" style="width:200px">
+            <Select v-model="entity.productName">
               <Option value="0">New York</Option>
               <Option value="1" disabled>London</Option>
               <Option value="2">Sydney</Option>
@@ -109,7 +109,7 @@ export default {
       this.$refs.form.validate(v => {});
     },
     handleClose() {
-        this.$emit('on-close')
+      this.$emit("on-close");
     }
   }
 };

pages/materiel/classification/api.js

+import Api from '@/plugins/request'
+export default {
+    // index:`${systemUrl}/category/paged`,
+    // getleveltree(params){
+    // return Api.post(`${systemUrl}/category/paged`,params);
+    // },
+    list(params){
+        return Api.post(`${systemUrl}/category/list`,params);
+    },
+    get(params){
+    return Api.get(`${systemUrl}/category/get`,params);
+    },
+    create(params){
+    return Api.post(`${systemUrl}/category/create`,params);
+    },
+    update(params){
+    return Api.post(`${systemUrl}/category/update`,params);
+    },
+    delete(id) {
+    return Api.delete(`${systemUrl}/category/delete`,{params:{id:id}});
+    },
+   
+    }
\ No newline at end of file

pages/materiel/classification/index.vue

 <template>
   <div class="classification">
-    <Button type="dashed" @click="add">新增</Button>
-    <Modal v-model="addModal" title="新增" footer-hide width='1000'>
-      <Add @on-close="cancel" @on-ok="addOk" ref="add" />
+    <Layout>
+      <Sider width="300" v-if="showMenu">
+        <div class="p-list">
+          <h3>
+            零部件库
+            <div class="fr mr10 mt10">
+              <ButtonGroup class="fr" size="small">
+                <Button icon="md-add" title="新增顶级" @click="addNew"></Button>
+                <Button
+                  :icon="expand ? 'md-arrow-dropright' : 'md-arrow-dropdown'"
+                  @click="toggle"
+                  title="展开/合并"
+                ></Button>
+                <Button icon="md-refresh" title="刷新" @click="loadTree"></Button>
+                <Button icon="md-rewind" title="收起" @click="hide"></Button>
+              </ButtonGroup>
+            </div>
+          </h3>
+          <div class="search">
+            <Input search placeholder="关键字" v-model="keys" clearable />
+          </div>
+          <div class="fg">
+            <div class="tree">
+              <Tree :data="data" ref="tree" @on-select-change="change" :render="renderContent"></Tree>
+              <Dropdown
+                transfer
+                ref="contentMenu"
+                style="display: none;"
+                trigger="click"
+                placement="right-start"
+              >
+                <DropdownMenu slot="list" ref="ppp" style="min-width: 80px;">
+                  <DropdownItem>
+                    <a @click="add">添加</a>
+                  </DropdownItem>
+                  <DropdownItem name="edit">
+                    <a @click="edit">修改</a>
+                  </DropdownItem>
+                  <DropdownItem name="del">
+                    <a @click="remove">删除</a>
+                  </DropdownItem>
+                </DropdownMenu>
+              </Dropdown>
+            </div>
+          </div>
+        </div>
+      </Sider>
+      <div v-if="!showMenu" class="show_menu">
+        <a class="menu_play fr" @click="showMenuFn" title="展开">
+          <Icon type="ios-arrow-forward" size="24" />
+        </a>
+      </div>
+      <Content :class="!showMenu?'con_bord':''">
+        <!-- <Product :parent="parent" /> -->
+      </Content>
+    </Layout>
+    <Modal v-model="modal" :title="title" width="1000" footer-hide>
+      <component :is="detail" :eid="curId" :nodeInfo="nodeInfo" @on-close="cancel" @on-ok="ok" />
     </Modal>
   </div>
 </template>
 <script>
-import Add from "./add";
+// import spareParts from "./spareParts";
+// import Product from "./product";
+import Api from "./api";
 export default {
-  components: {
-    Add
-  },
+  name: "",
   data() {
     return {
-      addModal: false
+      keys: "",
+      expand: false,
+      list: [],
+      nodeInfo: {},
+      modal: false,
+      title: "新增",
+      curId: 0,
+      detail: null,
+      showMenu: true,
+      parent: {
+        id: null,
+        parentName: "",
+        ids: ""
+      }
     };
   },
+
+  created() {
+    this.loadTree();
+  },
   methods: {
+    showMenuFn() {
+      //this.$Message.info("展开左侧树")
+      this.showMenu = true;
+    },
+    ok() {
+      this.loadTree();
+      this.modal = false;
+      this.curId = 0;
+    },
+    addNew() {
+      this.nodeInfo.id = 0;
+      this.add();
+    },
     add() {
-      this.addModal = true;
+      this.curId = 0;
+      this.title = "新增";
+      this.detail = () => import("./add");
+      this.modal = true;
     },
-    remove(){
-
+    edit() {
+      // this.curId = this.nodeInfo.id;
+      // this.title = "编辑";
+      // this.detail = () => import("./edit");
+      // this.modal = true;
+    },
+    remove() {
+      // console.log(this.nodeInfo);
+      if (this.nodeInfo.children.length > 1) {
+        this.$Message.error("因为有子级，不能直接删除");
+      } else {
+        this.$Modal.confirm({
+          title: "删除",
+          content: "<p>您确定要删除吗？</p>",
+          onOk: () => {
+            Api.delete(this.nodeInfo.id).then(r => {
+              if (r.success) {
+                this.loadTree();
+                this.$Message.success("删除成功");
+              }
+            });
           },
-    addOk() {
-      this.addModal = false;
+          onCancel: () => {
+            this.$Message.success("取消删除");
+          }
+        });
+      }
     },
     cancel() {
-      this.addModal = false;
+      this.curId = 0;
+      this.modal = false;
+    },
+    renderContent(h, { root, node, data }) {
+      return h(
+        "span",
+        {
+          on: {
+            // click: () => {
+            //   this.handleSelect(data); //手动选择树节点
+            // },
+            //右键点击事件
+            contextmenu: e => {
+              e.preventDefault();
+              this.$refs.contentMenu.$refs.reference = event.target;
+              this.$refs.contentMenu.currentVisible = !this.$refs.contentMenu
+                .currentVisible;
+              this.nodeInfo = data;
+            }
+          }
+        },
+        data.title
+      );
+    },
+    // handleSelect(data) {
+    //   this.$emit("clickItem", data);
+    // },
+    loadTree() {
+      let conditions = [];
+      Api.list({ conditions: conditions }).then(r => {
+        setTree(r.result);
+        function setTree(data) {
+          data.map(u => {
+            u.title = u.name;
+            u.value = u.id;
+            if (u.children) {
+              setTree(u.children);
+            }
+          });
+        }
+        var data = r.result;
+        this.list = this.$u.clone(data);
+      });
+    },
+    toggle() {
+      this.expand = !this.expand;
+    },
+    change(v, b) {
+      // console.log(v);
+      // console.log(b);
+      let ids = [];
+      ids.push(b.value);
+      if (b.children) {
+        addId(b.children);
+        function addId(data) {
+          data.map(u => {
+            ids.push(u.value);
+            if (u.children) {
+              addId(u.children);
+            }
+          });
+        }
+      }
+      // this.$emit("on-select", b.value, b, ids);
+    },
+    hide() {
+      this.showMenu = false;
+    }
+  },
+  computed: {
+    data() {
+      let items = this.$u.clone(this.list);
+      let expand = this.expand;
+      let result = [];
+      search(this.keys, items);
+      function search(keys, data) {
+        data.map(u => {
+          if (keys.length < u.title) {
+            u.expand = expand;
+            result.push(u);
+          } else {
+            u.expand = expand;
+            if (u.title.indexOf(keys) > -1) {
+              result.push(u);
+            } else if (u.children) {
+              search(keys, u.children);
+            }
+          }
+        });
+      }
+      return result;
     }
   }
 };
 </script>
-<style lang="less" scoped>
+<style lang="less" >
 .classification {
-  width: 100%;
+  font-family: Microsoft YaHei;
+
+  .ivu-layout-sider {
+    background: rgba(255, 255, 255, 1);
+    margin-right: 10px;
+    box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.15);
+    height: 87vh;
+
+    h4 {
+      height: 30px;
+      line-height: 30px;
+      background: #eee;
+      padding-left: 10px;
+    }
+    .p-list {
+      h3 {
+        height: 50px;
+        font-size: 14px;
+        font-family: Microsoft YaHei;
+        font-weight: bold;
+        line-height: 50px;
+        color: rgba(81, 90, 110, 1);
+        background: rgba(245, 246, 250, 1);
+        opacity: 1;
+        padding-left: 10px;
+      }
+      .search {
+        height: 50px;
+        padding: 5px 10px;
+      }
+      .fg {
+        flex: none;
         height: 100%;
+        overflow: auto;
+        padding-left: 10px;
+      }
+      .tree {
+        height: calc(100vh - 215px);
+        overflow: auto;
+      }
+    }
+  }
+  .show_menu {
+    width: 30px;
+    height: 30px;
+    position: fixed;
+    top: 100px;
+    left: 0;
+    z-index: 9;
+    .menu_play {
+      width: 30px;
+      height: 30px;
+      line-height: 34px;
+      font-size: 14px;
+      text-align: center;
+      color: #515a6e;
+      border-top-right-radius: 5px;
+      border-bottom-right-radius: 5px;
+      background: #ffffff;
+      box-shadow: #ccc 2px 2px 4px 1px;
+    }
+    .menu_play:hover {
+      background-color: #2d8cf0;
+      color: white;
+    }
+  }
+  .ivu-layout-content {
+    // margin-left: 5px;
+    background: rgba(255, 255, 255, 1);
+    box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.15);
+    overflow: auto;
+    padding: 10px;
+    height: 87vh;
+    overflow-y: hidden;
+  }
 }
 </style>
\ No newline at end of file

pages/materiel/classification/spareParts/add.vue

+<template>
+  <div>
+    <Form ref="form" :model="entity" :rules="rules" :label-width="90">
+      <Row>
+        <Col :span="12">
+          <FormItem label="编码" prop="userUnit">
+            <Input v-model="entity.userUnit" placeholder="请输入"></Input>
+          </FormItem>
+        </Col>
+        <Col :span="12">
+          <FormItem label="名称" prop="taskBased">
+            <Input v-model="entity.taskBased" placeholder="请输入"></Input>
+          </FormItem>
+        </Col>
+        <Col :span="12">
+          <FormItem label="状态" prop="productName" placeholder="请选择">
+            <Select v-model="entity.productName" style="width:200px">
+              <Option value="0">New York</Option>
+              <Option value="1" disabled>London</Option>
+              <Option value="2">Sydney</Option>
+            </Select>
+          </FormItem>
+        </Col>
+        <Col :span="24">
+          <FormItem label="描述" prop="productName">
+            <Input v-model="entity.productName" type="textarea" placeholder="请输入..."></Input>
+          </FormItem>
+        </Col>
+        <Col :span="24">
+          <h4>属性配置</h4>
+        </Col>
+        <Col :span="24" style="padding:20px 0 0px 10px;margin-bottom:10px;" class="table-solt">
+          <Table border :columns="columns" :data="checkList" class="tableCommon">
+            <template slot-scope="{ row, index }" slot="name">
+              <Input v-model="row.name" placeholder="请输入" @on-blur="setRow(row,index)" />
+            </template>
+            <template slot-scope="{ row, index }" slot="require">
+              <Input v-model="row.require" placeholder="请输入" @on-blur="setRow(row,index)" />
+            </template>
+            <template slot-scope="{ row, index }" slot="result">
+              <Input v-model="row.result" placeholder="请输入" @on-blur="setRow(row,index)" />
+            </template>
+            <template slot-scope="{ row, index }" slot="pash">
+              <inputFile v-model="row.file" :files="true" :parms="getParams(row.fileId)" />
+            </template>
+            <template slot-scope="{ row, index }" slot="remark">
+              <Input v-model="row.remark" placeholder="请输入" @on-blur="setRow(row,index)" />
+            </template>
+          </Table>
+        </Col>
+        <Col :span="24" style="margin-bottom:20px;">
+          <Button type="primary" long @click="addNew" class="mt10">添加</Button>
+        </Col>
+        <Col :span="24" style="text-align: right;">
+          <FormItem>
+            <Button type="primary" @click="handleSubmit" :disabled="disabled">保存</Button>
+            <Button @click="handleClose" class="ml20">取消</Button>
+          </FormItem>
+        </Col>
+      </Row>
+    </Form>
+  </div>
+</template>
+<script>
+export default {
+  data() {
+    return {
+      entity: {},
+      disabled: false,
+      columns: [
+        {
+          title: "序号",
+          type: "index",
+          width: 80,
+          align: "center"
+        },
+        {
+          title: "检验项目",
+          key: "name",
+          align: "center",
+          slot: "name"
+        },
+        {
+          title: "要求",
+          key: "require",
+          align: "center",
+          slot: "require"
+        },
+        {
+          title: "预测结果",
+          key: "result",
+          align: "center",
+          slot: "result"
+        }
+      ],
+      checkList: [],
+      rules: {
+        businessName: [{ required: true, message: "必填", trigger: "blur" }],
+        businessCode: [{ required: true, message: "必填", trigger: "blur" }]
+      }
+    };
+  },
+  methods: {
+    setRow() {
+      this.checkList = r.result;
+    },
+    addNew() {},
+    handleSubmit() {
+      this.$refs.form.validate(v => {});
+    },
+    handleClose() {
+        this.$emit('on-close')
+    }
+  }
+};
+</script>

pages/materiel/classification/spareParts/index.vue

+<template>
+  <div class="spare-parts">
+    <Button type="dashed" @click="add">新增</Button>
+    <Modal v-model="addModal" title="新增" footer-hide width='1000'>
+      <Add @on-close="cancel" @on-ok="addOk" ref="add" />
+    </Modal>
+  </div>
+</template>
+<script>
+import Add from "./add";
+export default {
+  components: {
+    Add
+  },
+  data() {
+    return {
+      addModal: false
+    };
+  },
+  methods: {
+    add() {
+      this.addModal = true;
+    },
+    remove(){
+
+    },
+    addOk() {
+      this.addModal = false;
+    },
+    cancel() {
+      this.addModal = false;
+    }
+  }
+};
+</script>
+<style lang="less" scoped>
+.spare-parts {
+  width: 100%;
+  height: 100%;
+}
+</style>
\ No newline at end of file