物料分类分工列表界面

src/views/purchase/MaterialClassDivision/add.vue

@@ -0,0 +1,278 @@
+<template>
+  <div id="addDivision">
+    <el-form :model="basicForm" :rules="basicRules" ref="basic" label-width="auto">
+      <el-row :gutter="10">
+        <el-col :span="1.5">
+            <el-form-item label="物料分类编码">
+              <el-input
+                v-model="basicForm.dabm"
+                size="small"
+                placeholder=""
+                clearable
+                style="width: 200px"
+              />
+            </el-form-item>
+         </el-col>
+
+        <el-col :span="1.5">
+            <el-form-item label="物料分类名称">
+              <el-input
+                v-model="basicForm.shdzdamc"
+                size="small"
+                placeholder=""
+                clearable
+                style="width: 200px"
+              />
+            </el-form-item>
+         </el-col>
+
+         <el-col :span="1.5">
+            <el-form-item label="一级分类编码">
+              <el-select v-model="basicForm.wlyjflbm" size="small" style="width: 200px" clearable placeholder="请选择">
+                <el-option
+                  v-for="item in options"
+                  :key="item.value"
+                  :label="item.label"
+                  :value="item.value">
+                </el-option>
+              </el-select>
+            </el-form-item>
+          </el-col>
+
+         <el-col :span="1.5">
+            <el-form-item label="一级分类名称">
+              <el-select v-model="basicForm.wlyjflmc" size="small" style="width: 200px" clearable placeholder="请选择">
+                <el-option
+                  v-for="item in options"
+                  :key="item.value"
+                  :label="item.label"
+                  :value="item.value">
+                </el-option>
+              </el-select>
+            </el-form-item>
+          </el-col>
+
+         <el-col :span="1.5">
+            <el-form-item label="二级分类名称">
+              <el-select v-model="basicForm.wlyjflmc" size="small" style="width: 200px" clearable placeholder="请选择">
+                <el-option
+                  v-for="item in options"
+                  :key="item.value"
+                  :label="item.label"
+                  :value="item.value">
+                </el-option>
+              </el-select>
+            </el-form-item>
+          </el-col>
+
+         <el-col :span="1.5">
+            <el-form-item label="三级分类名称">
+              <el-select v-model="basicForm.wlyjflmc" size="small" style="width: 200px" clearable placeholder="请选择">
+                <el-option
+                  v-for="item in options"
+                  :key="item.value"
+                  :label="item.label"
+                  :value="item.value">
+                </el-option>
+              </el-select>
+            </el-form-item>
+          </el-col>
+
+         <el-col :span="1.5">
+            <el-form-item label="四级分类名称">
+              <el-select v-model="basicForm.wlyjflmc" size="small" style="width: 200px" clearable placeholder="请选择">
+                <el-option
+                  v-for="item in options"
+                  :key="item.value"
+                  :label="item.label"
+                  :value="item.value">
+                </el-option>
+              </el-select>
+            </el-form-item>
+          </el-col>
+
+         <el-col :span="1.5">
+            <el-form-item label="物料编码">
+              <el-select v-model="basicForm.ck" size="small" style="width: 200px" clearable placeholder="请选择">
+                <el-option
+                  v-for="item in options"
+                  :key="item.value"
+                  :label="item.label"
+                  :value="item.value">
+                </el-option>
+              </el-select>
+            </el-form-item>
+          </el-col>
+
+         <el-col :span="1.5">
+            <el-form-item label="物料名称">
+              <el-select v-model="basicForm.cksx" size="small" style="width: 200px" clearable placeholder="请选择">
+                <el-option
+                  v-for="item in options"
+                  :key="item.value"
+                  :label="item.label"
+                  :value="item.value">
+                </el-option>
+              </el-select>
+            </el-form-item>
+          </el-col>
+
+          <el-col :span="1.5">
+            <el-form-item label="生产厂家">
+              <el-input
+                v-model="basicForm.shdzxx"
+                size="small"
+                placeholder=""
+                clearable
+                style="width: 200px"
+              />
+            </el-form-item>
+         </el-col>
+
+          <el-col :span="1.5">
+            <el-form-item label="所属组织">
+              <el-input
+                v-model="basicForm.shr"
+                size="small"
+                placeholder=""
+                clearable
+                style="width: 200px"
+              />
+            </el-form-item>
+         </el-col>
+
+          <el-col :span="1.5">
+            <el-form-item label="订单员">
+              <el-input
+                v-model="basicForm.shrdh"
+                size="small"
+                placeholder=""
+                clearable
+                style="width: 200px"
+              />
+            </el-form-item>
+         </el-col>
+
+         <el-col :span="1.5">
+            <el-form-item label="订单部门">
+              <el-select v-model="basicForm.qy" size="small" style="width: 200px" clearable placeholder="请选择">
+                <el-option
+                  v-for="item in options"
+                  :key="item.value"
+                  :label="item.label"
+                  :value="item.value">
+                </el-option>
+              </el-select>
+            </el-form-item>
+          </el-col>
+
+         <el-col :span="1.5">
+            <el-form-item label="采购员">
+              <el-select v-model="basicForm.sftbnc" size="small" style="width: 200px" clearable placeholder="请选择">
+                <el-option
+                  v-for="item in options"
+                  :key="item.value"
+                  :label="item.label"
+                  :value="item.value">
+                </el-option>
+              </el-select>
+            </el-form-item>
+          </el-col>
+
+          <el-col :span="1.5">
+            <el-form-item label="采购部门">
+              <el-input
+                v-model="basicForm.bz"
+                size="small"
+                placeholder=""
+                clearable
+                style="width: 200px"
+              />
+            </el-form-item>
+         </el-col>
+
+          <el-col :span="1.5">
+            <el-form-item label="备注">
+              <el-input
+                v-model="basicForm.cjr"
+                size="small"
+                placeholder=""
+                clearable
+                style="width: 200px"
+              />
+            </el-form-item>
+         </el-col>
+      </el-row>
+    </el-form>
+
+    <div class="btn_group">
+      <el-col :span="1.5">
+        <el-button type="primary" size="small" plain @click="save" v-if="pageStu == 'add' || pageStu == 'edit'">保存</el-button>
+      </el-col>
+      <el-col :span="1.5" style="margin: 0 10px;">
+        <el-button type="primary" size="small" plain @click="submit" v-if="pageStu == 'edit'">提交</el-button>
+      </el-col>
+      <el-col :span="1.5">
+        <el-button size="small" plain @click="back">返回</el-button>
+      </el-col>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'addDivision',
+  props: ['pageStu'],
+  model: {
+    prop: 'isList',
+    event: 'jugislist'
+  },
+  data() {
+    return {
+      basicForm: {
+        dabm: '',
+        shdzdamc: '',
+        wlyjflbm: '',
+        wlyjflmc: '',
+        ck: '',
+        cksx: '',
+        shdzxx: '',
+        shr: '',
+        shrdh: '',
+        qy: '',
+        sftbnc: '',
+        bz: '',
+        cjr: '',
+        cjsj: '',
+        zhxgr: '',
+        zhxgsj: ''
+      },
+      options: [{
+        value: 0, label: '仓库1'
+      }],
+      basicRules: {}
+    }
+  },
+  methods: {
+    save() {},
+    submit() {},
+    back() {
+      this.$emit('jugislist', true)
+      // let queryParams = {
+      //   pageNum: 1,
+      //   pageSize: 10
+      // }
+      // this.$emit('refresh', queryParams)
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.btn_group {
+  width: 100%;
+  margin: 20px 0;
+  display: flex;
+  justify-content: center;
+} 
+</style>

src/views/purchase/MaterialClassDivision/index.vue

@@ -0,0 +1,312 @@
+<template>
+  <div id="MaterialClassDivision">
+    <div v-if="isList">
+      <el-form class="search_area" label-width="auto">
+        <el-row :gutter="10">
+          <el-col :span="1.5">
+            <el-form-item label="物料一级大类编码">
+              <el-select v-model="queryParams.oneCode" size="small" style="width: 200px" clearable placeholder="请选择">
+                <el-option
+                  v-for="item in options"
+                  :key="item.value"
+                  :label="item.label"
+                  :value="item.value">
+                </el-option>
+              </el-select>
+            </el-form-item>
+          </el-col>
+          <el-col :span="1.5">
+            <el-form-item label="物料一级大类名称">
+              <el-select v-model="queryParams.oneName" size="small" style="width: 200px" clearable placeholder="请选择">
+                <el-option
+                  v-for="item in options"
+                  :key="item.value"
+                  :label="item.label"
+                  :value="item.value">
+                </el-option>
+              </el-select>
+            </el-form-item>
+          </el-col>
+          <el-col :span="1.5">
+            <el-form-item label="物料二级大类编码">
+              <el-select v-model="queryParams.twoCode" size="small" style="width: 200px" clearable placeholder="请选择">
+                <el-option
+                  v-for="item in options"
+                  :key="item.value"
+                  :label="item.label"
+                  :value="item.value">
+                </el-option>
+              </el-select>
+            </el-form-item>
+          </el-col>
+          <el-col :span="1.5">
+            <el-form-item label="物料二级大类名称">
+              <el-select v-model="queryParams.twoName" size="small" style="width: 200px" clearable placeholder="请选择">
+                <el-option
+                  v-for="item in options"
+                  :key="item.value"
+                  :label="item.label"
+                  :value="item.value">
+                </el-option>
+              </el-select>
+            </el-form-item>
+          </el-col>
+          <el-col :span="1.5">
+            <el-form-item label="物料三级大类编码">
+              <el-select v-model="queryParams.threeCode" size="small" style="width: 200px" clearable placeholder="请选择">
+                <el-option
+                  v-for="item in options"
+                  :key="item.value"
+                  :label="item.label"
+                  :value="item.value">
+                </el-option>
+              </el-select>
+            </el-form-item>
+          </el-col>
+          <el-col :span="1.5">
+            <el-form-item label="物料三级大类名称">
+              <el-select v-model="queryParams.threeName" size="small" style="width: 200px" clearable placeholder="请选择">
+                <el-option
+                  v-for="item in options"
+                  :key="item.value"
+                  :label="item.label"
+                  :value="item.value">
+                </el-option>
+              </el-select>
+            </el-form-item>
+          </el-col>
+          <el-col :span="1.5">
+            <el-form-item label="物料四级大类编码">
+              <el-select v-model="queryParams.fourCode" size="small" style="width: 200px" clearable placeholder="请选择">
+                <el-option
+                  v-for="item in options"
+                  :key="item.value"
+                  :label="item.label"
+                  :value="item.value">
+                </el-option>
+              </el-select>
+            </el-form-item>
+          </el-col>
+          <el-col :span="1.5">
+            <el-form-item label="物料四级大类名称">
+              <el-select v-model="queryParams.fourName" size="small" style="width: 200px" clearable placeholder="请选择">
+                <el-option
+                  v-for="item in options"
+                  :key="item.value"
+                  :label="item.label"
+                  :value="item.value">
+                </el-option>
+              </el-select>
+            </el-form-item>
+          </el-col>
+          <el-col :span="1.5">
+            <el-form-item label="物料编码">
+              <el-select v-model="queryParams.code" size="small" style="width: 200px" clearable placeholder="请选择">
+                <el-option
+                  v-for="item in options"
+                  :key="item.value"
+                  :label="item.label"
+                  :value="item.value">
+                </el-option>
+              </el-select>
+            </el-form-item>
+          </el-col>
+          <el-col :span="1.5">
+            <el-form-item label="物料名称">
+              <el-select v-model="queryParams.name" size="small" style="width: 200px" clearable placeholder="请选择">
+                <el-option
+                  v-for="item in options"
+                  :key="item.value"
+                  :label="item.label"
+                  :value="item.value">
+                </el-option>
+              </el-select>
+            </el-form-item>
+          </el-col>
+          <el-col :span="1.5">
+            <el-form-item label="订单员">
+              <el-select v-model="queryParams.ddman" size="small" style="width: 200px" clearable placeholder="请选择">
+                <el-option
+                  v-for="item in options"
+                  :key="item.value"
+                  :label="item.label"
+                  :value="item.value">
+                </el-option>
+              </el-select>
+            </el-form-item>
+          </el-col>
+          <el-col :span="1.5">
+            <el-form-item label="采购员">
+              <el-select v-model="queryParams.cgman" size="small" style="width: 200px" clearable placeholder="请选择">
+                <el-option
+                  v-for="item in options"
+                  :key="item.value"
+                  :label="item.label"
+                  :value="item.value">
+                </el-option>
+              </el-select>
+            </el-form-item>
+          </el-col>
+          <el-col :span="1.5">
+            <el-form-item label="生产厂家">
+            <el-input
+              v-model="queryParams.sccj"
+              size="small"
+              placeholder=""
+              clearable
+              style="width: 200px"
+            />
+            </el-form-item>
+          </el-col>
+          <el-col :span="1.5">
+            <el-form-item label="备注">
+            <el-input
+              v-model="queryParams.bz"
+              size="small"
+              placeholder=""
+              clearable
+              style="width: 200px"
+            />
+            </el-form-item>
+          </el-col>
+          <el-col :span="1.5">
+            <el-form-item label="" label-width="20px">
+              <el-button type="primary" size="small" icon="el-icon-search" plain>搜索</el-button>
+              <el-button size="small" icon="el-icon-refresh" plain>重置</el-button>
+            </el-form-item>
+          </el-col>
+        </el-row>
+      </el-form>
+
+      <el-card>
+        <div class="btn_grooup">
+          <el-button type="primary" size="small" @click="addDivision">新增</el-button>
+
+          <el-dropdown size="small" @command="handleCommand">
+            <el-button size="small" type="primary" style="margin-left: 10px;">
+              导入<i class="el-icon-arrow-down el-icon--right"></i>
+            </el-button>
+            <el-dropdown-menu slot="dropdown">
+              <el-dropdown-item command="数据导入">数据导入</el-dropdown-item>
+              <el-dropdown-item command="模板下载">模板下载</el-dropdown-item>
+            </el-dropdown-menu>
+          </el-dropdown>
+
+          <el-dropdown size="small" @command="handleCommand">
+            <el-button size="small" type="primary" style="margin: 0 10px;">
+              导出<i class="el-icon-arrow-down el-icon--right"></i>
+            </el-button>
+            <el-dropdown-menu slot="dropdown">
+              <el-dropdown-item command="Excel导出">Excel导出</el-dropdown-item>
+              <el-dropdown-item command="导出明细">导出明细</el-dropdown-item>
+            </el-dropdown-menu>
+          </el-dropdown>
+
+          <el-button type="primary" size="small">同步分配</el-button>
+          <el-button type="primary" size="small">删除</el-button>
+          <el-button type="primary" size="small">打印</el-button>
+        </div>
+        <el-table 
+          :data="tableList" 
+          fit
+          max-height="680"
+          @selection-change="handleSelectionChange"
+        >
+          <el-table-column type="selection" width="55" />
+          <el-table-column label="物料分类编码" align="center" prop="orgId"/>
+          <el-table-column label="物料分类名称" align="center" width="200" prop="orgId" />
+          <el-table-column label="一级分类名称" align="center" prop="code" />
+          <el-table-column label="二级分类名称" align="center" width="150" prop="createTime" />
+          <el-table-column label="三级分类名称" align="center" width="150" prop="status"/>
+          <el-table-column label="四级分类名称" align="center" width="150" prop="materialCode" />
+          <el-table-column label="物料编码" align="center" width="150" prop="materialName" />
+          <el-table-column label="物料名称" align="center" prop="createByName" />
+          <el-table-column label="生产厂商" align="center" width="150" prop="createTime" />
+          <el-table-column label="所属组织" align="center" width="120" prop="updateByName" />
+          <el-table-column label="订单员" align="center" width="150" prop="updateTime" />
+          <el-table-column label="采购员" align="center" width="150" prop="updateTime" />
+          <el-table-column label="订单部门" align="center" width="150" prop="updateTime" />
+          <el-table-column label="部门" align="center" width="150" prop="updateTime" />
+          <el-table-column label="创建人" align="center" width="150" prop="updateTime" />
+          <el-table-column label="创建时间" align="center" width="150" prop="updateTime" />
+          <el-table-column label="修改人" align="center" width="150" prop="updateTime" />
+          <el-table-column label="修改时间" align="center" width="150" prop="updateTime" />
+          <el-table-column
+          fixed="right"
+          label="操作"
+          align="center"
+          width="150"
+          >
+          <template slot-scope="scope">
+            <el-button type="text" size="small">编辑</el-button>
+            <el-button type="text" size="small">删除</el-button>
+          </template>
+        </el-table-column>
+        </el-table>
+      </el-card>
+    </div>
+
+    <Add v-model="isList" v-if="!isList" :pageStu="page"/>
+  </div>
+</template>
+
+<script>
+import Add from './add.vue'
+export default {
+  name: 'MaterialClassDivision',
+  components: {
+    Add
+  },
+  data() {
+    return {
+      // 页面配置
+      isList: true,
+      // 页面状态
+      page: '',
+      queryParams: {
+        oneCode: '',
+        oneName: '',
+        twoCode: '',
+        twoName: '',
+        threeCode: '',
+        threeName: '',
+        fourCode: '',
+        fourName: '',
+        code: '',
+        name: '',
+        ddman: '',
+        cgman: '',
+        sccj: '',
+        bz: ''
+      },
+      options: [{
+        value: 0, label: '仓库1'
+      }],
+      tableList: []
+    }
+  },
+  methods: {
+    handleSelectionChange() {},
+    handleCommand(command) {
+      alert(command)
+    },
+    addDivision() {
+      this.isList = false
+      this.page = 'add'
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+#MaterialClassDivision {
+  height: calc(100vh - 84px);
+  padding: 12px;
+  box-sizing: border-box;
+}
+.btn_grooup {
+  margin-bottom: 10px;
+  display: flex;
+  justify-content: flex-end;
+}
+</style>