add

src/views/ItemInformation/components/Dialog-item.vue

@@ -1,18 +1,42 @@
 <template>
   <div>
-    <el-dialog title="新建物品" :visible.sync="dialogVisible" width="80%" :before-close="handleClose">
-      <el-form :model="formData" :rules="rules" ref="ruleForm" label-width="80px">
+    <el-dialog
+      top="3vh"
+      title="新建物品"
+      :visible.sync="dialogVisible"
+      width="80%"
+      :before-close="handleClose"
+      :append-to-body="true"
+    >
+      <el-form
+        :model="formData"
+        :rules="rules"
+        ref="ruleForm"
+        label-width="80px"
+      >
         <div class="main">
           <div class="left">
             <el-card class="box-card">
-              <el-form-item label="物品类别" prop="categoryId">
-                <el-select v-model="formData.categoryId" @change="chooseItem">
-                  <el-option v-for="(item, index) in typeList" :key="index" :label="item.name" :value="item.id"></el-option>
+              <el-form-item label="物品类别" prop="categoryLevelId">
+                <el-select
+                  v-model="formData.categoryLevelId"
+                  @change="chooseItem"
+                >
+                  <el-option
+                    v-for="(item, index) in typeList"
+                    :key="index"
+                    :label="item.name"
+                    :value="item.id"
+                  ></el-option>
                 </el-select>
               </el-form-item>
-              <el-form-item label="分类" prop="type">
-                <el-cascader v-model="formData.type" :options="classList"
-                  :props="{ value: 'id', label: 'name' }"></el-cascader>
+              <el-form-item label="分类" prop="categoryLevelPathId">
+                <el-cascader
+                  @change="shooteCategory"
+                  v-model="formData.categoryLevelPathId"
+                  :options="classList"
+                  :props="{ value: 'id', label: 'name' }"
+                ></el-cascader>
               </el-form-item>
               <el-form-item label="物品编码" prop="code">
                 <el-input placeholder="请输入" v-model="formData.code">
@@ -24,8 +48,16 @@
                 </el-input>
               </el-form-item>
               <el-form-item label="计量单位" prop="unit">
-                <el-input placeholder="请输入" v-model="formData.unit">
-                </el-input>
+                <div class="dj">
+                  <el-input placeholder="请输入" v-model="formData.unit">
+                  </el-input>
+                  <DictSelection
+                    dictName="计量单位"
+                    clearable
+                    filterable
+                    v-model="formData.measuringUnit"
+                  />
+                </div>
               </el-form-item>
               <el-form-item label="包装单位" prop="packingUnit">
                 <el-input placeholder="请输入" v-model="formData.packingUnit">
@@ -33,36 +65,64 @@
               </el-form-item>
               <el-form-item label="参考单价">
                 <div class="dj">
-                  <el-input-number style="width:300px" v-model="formData.price" :min="1" :max="10"
-                    label="请输入"></el-input-number>
-                  <DictSelection dictName="金额单位" clearable filterable v-model="formData.priceUnit">
+                  <el-input-number
+                    style="width: 300px"
+                    v-model="formData.price"
+                    :min="1"
+                    placeholder="请输入"
+                  ></el-input-number>
+                  <DictSelection
+                    dictName="金额单位"
+                    clearable
+                    filterable
+                    v-model="formData.priceUnit"
+                  >
                   </DictSelection>
                 </div>
               </el-form-item>
               <el-form-item label="保质期">
                 <div class="dj">
-                  <el-input-number style="width:300px" v-model="formData.warrantyPeriod" :min="1" :max="10"
-                    label="请输入"></el-input-number>
+                  <el-input-number
+                    style="width: 300px"
+                    v-model="formData.warrantyPeriod"
+                    :min="1"
+                    placeholder="请输入"
+                  ></el-input-number>
 
-                  <DictSelection dictName="时间单位" clearable filterable v-model="formData.warrantyPeriodUnit">
+                  <DictSelection
+                    dictName="时间单位"
+                    clearable
+                    filterable
+                    v-model="formData.warrantyPeriodUnit"
+                  >
                   </DictSelection>
-
                 </div>
               </el-form-item>
               <el-form-item label="安全库存" prop="secureInventory">
-                <el-input placeholder="请输入" v-model="formData.secureInventory">
+                <el-input
+                  placeholder="请输入"
+                  v-model="formData.secureInventory"
+                >
                 </el-input>
               </el-form-item>
               <el-form-item label="盘点模式" prop="inventoryMode">
-                <el-radio v-model="formData.inventoryMode" label="1">逐个盘点</el-radio>
-                <el-radio v-model="formData.inventoryMode" label="2">批量盘点</el-radio>
+                <el-radio v-model="formData.inventoryMode" label="1"
+                  >逐个盘点</el-radio
+                >
+                <el-radio v-model="formData.inventoryMode" label="2"
+                  >批量盘点</el-radio
+                >
               </el-form-item>
               <el-form-item label="允许拆包">
                 <el-switch v-model="formData.isUnpack" active-color="#13ce66">
                 </el-switch>
               </el-form-item>
               <el-form-item label="描述">
-                <el-input type="textarea" placeholder="请输入" v-model="formData.description">
+                <el-input
+                  type="textarea"
+                  placeholder="请输入"
+                  v-model="formData.description"
+                >
                 </el-input>
               </el-form-item>
             </el-card>
@@ -72,80 +132,33 @@
               <el-row :gutter="20">
                 <el-col :span="8">
                   <el-form-item label="规格">
-                    <el-input placeholder="请输入" v-model="formData.gg">
+                    <el-input
+                      placeholder="请输入"
+                      v-model="formData.specification"
+                    >
                     </el-input>
                   </el-form-item>
                 </el-col>
                 <el-col :span="8">
                   <el-form-item label="型号">
-                    <el-input placeholder="请输入" v-model="formData.xh">
+                    <el-input placeholder="请输入" v-model="formData.modelType">
                     </el-input>
                   </el-form-item>
                 </el-col>
-                <el-col :span="8">
+                <!-- <el-col :span="8">
                   <el-form-item label="标准产能">
                     <el-input placeholder="请输入" v-model="formData.cn">
                       <span slot="append">/小时</span>
                     </el-input>
                   </el-form-item>
-                </el-col>
+                </el-col> -->
               </el-row>
               <div class="dashed-line"></div>
-              <div class="tabs">
-                <el-tabs v-model="activeName" type="card">
-                  <el-tab-pane label="匹配模具" name="first">
-                    <div class="one">
-                      <el-button type="primary">添加</el-button>
-                    </div>
-                    <div class="table">
-                      <el-table :data="tableData" style="width: 100%">
-                        <el-table-column prop="date" label="序号" width="60">
-                        </el-table-column>
-                        <el-table-column prop="fpbm" label="废品编码">
-                        </el-table-column>
-                        <el-table-column prop="wpmc" label="物品名称">
-                        </el-table-column>
-                        <el-table-column prop="wpmc" label="编号">
-                        </el-table-column>
-                        <el-table-column prop="wpmc" label="型号">
-                        </el-table-column>
-                        <el-table-column prop="wpmc" label="收缩系数">
-                        </el-table-column>
-                        <el-table-column prop="wpmc" label="大模体型号">
-                        </el-table-column>
-                        <el-table-column prop="wpmc" label="物品类型">
-                        </el-table-column>
-                        <el-table-column prop="wpmc" label="分类">
-                        </el-table-column>
-                        <el-table-column prop="wpmc" label="操作">
-                        </el-table-column>
-                      </el-table>
-                    </div>
-                  </el-tab-pane>
-                  <el-tab-pane label="匹配备品备件" name="second">
-                    <div class="one">
-                      <el-button type="primary">添加</el-button>
-                    </div>
-                    <div class="table">
-                      <el-table :data="tableData" style="width: 100%">
-                        <el-table-column prop="date" label="序号" width="60">
-                        </el-table-column>
-                        <el-table-column prop="wpmc" label="物品名称">
-                        </el-table-column>
-                        <el-table-column prop="wpmc" label="物品名称">
-                        </el-table-column>
-                        <el-table-column prop="wpmc" label="型号">
-                        </el-table-column>
-                        <el-table-column prop="wpmc" label="物品类型">
-                        </el-table-column>
-                        <el-table-column prop="wpmc" label="分类">
-                        </el-table-column>
-                        <el-table-column prop="wpmc" label="操作">
-                        </el-table-column>
-                      </el-table>
-                    </div>
-                  </el-tab-pane>
-                </el-tabs>
+              <div class="production-device">
+                <productionDevice
+                  ref="productionDeviceRef"
+                  :categoryLevelId="formData.categoryLevelId"
+                />
               </div>
             </el-card>
           </div>
@@ -154,147 +167,190 @@
 
       <span slot="footer" class="dialog-footer">
         <el-button @click="dialogVisible = false">取 消</el-button>
-        <el-button type="primary" :loading="loading" @click="submit">确 定</el-button>
+        <el-button type="primary" :loading="loading" @click="submit"
+          >确 定</el-button
+        >
       </span>
     </el-dialog>
   </div>
 </template>
 
 <script>
-import { getTreeByPid } from '@/api/classifyManage';
-import { informationAdd } from '@/api/classifyManage/itemInformation'
-export default {
-  data() {
-    return {
-      dialogVisible: false,
-      formData: {
-        categoryId: '',
-        isUnpack: true,
-        inventoryMode: '2'
-      },
-      rules: {
-        categoryId: [
-          { required: true, message: '请选择', trigger: 'change' }
-        ],
-        warrantyPeriod: [
-          { required: true, message: '请输入', trigger: 'blur' }
-        ],
-        warrantyPeriodUnit: [
-          { required: true, message: '请选择', trigger: 'change' }
-        ],
-        inventoryMode: [
-          { required: true, message: '请选择', trigger: 'change' }
-        ],
+  import { getTreeByPid } from '@/api/classifyManage';
+  import {
+    informationAdd,
+    getOrderNo
+  } from '@/api/classifyManage/itemInformation';
 
-        name: [
-          { required: true, message: '请输入物品名称', trigger: 'blur' }
-        ]
-      },
-      classList: [],
-      activeName: 'first',
-      tableData: [],
-      typeList: [],
+  import productionDevice from './production-device.vue';
+  export default {
+    components: { productionDevice },
+    data() {
+      return {
+        dialogVisible: false,
+        formData: {
+          categoryLevelId: '',
+          isUnpack: true,
+          inventoryMode: '2',
+          warrantyPeriodUnit: 'minute',
+          priceUnit: 'yuan'
+        },
+        rules: {
+          categoryLevelId: [
+            { required: true, message: '请选择', trigger: 'change' }
+          ],
+          warrantyPeriod: [
+            { required: true, message: '请输入', trigger: 'blur' }
+          ],
+          warrantyPeriodUnit: [
+            { required: true, message: '请选择', trigger: 'change' }
+          ],
+          inventoryMode: [
+            { required: true, message: '请选择', trigger: 'change' }
+          ],
 
+          name: [{ required: true, message: '请输入物品名称', trigger: 'blur' }]
+        },
+        classList: [],
 
-      // 提交状态
-      loading: false,
-    };
-  },
-  methods: {
-    submit() {
-      this.$refs.ruleForm.validate(valid => {
-        if (valid) {
-          this.loading = true;
-          informationAdd({ category: this.formData}).then((msg) => {
-            this.formData = {};
-            this.loading = false;
-            this.$message.success(msg);
-            this.handleClose();
-            this.$emit('done');
-          }).finally(() => {
-            this.loading = false;
-          })
-        }
+        typeList: [],
 
-      })
+        // 提交状态
+        loading: false
+      };
     },
-    async handleTree(code) {
-      const res = await getTreeByPid(code);
-      this.classList = res.data;
-      this.typeList = res.data.map((item) => {
-        return { id: item.id, name: item.code + ' ' + item.name };
-      });
-    },
-    open() {
-      this.dialogVisible = true;
-    },
-    handleClose() {
-      this.dialogVisible = false;
-    },
-    chooseItem(val) {
-      this.classList.map(item => {
-        if (item.id == val) {
-          this.formData.code1  = item.code
-          this.itemForm.code = val
-          this.getTreeData(item.code)
+    methods: {
+      submit() {
+        this.$refs.ruleForm.validate((valid) => {
+          if (valid) {
+            this.loading = true;
+            let newFormData = {
+              ...this.formData,
+              categoryLevelPathId: this.formData.categoryLevelPathId.pop(),
+              categoryLevelPathIdParent:
+                this.formData.categoryLevelPathId.shift(),
+              categoryLevelGroupId: '1678277959244431361',
+              categoryRelationPOList:
+                this.$refs.productionDeviceRef.datasource.map((item) => {
+                  return {
+                    mainCategoryId: item.id
+                  };
+                })
+            };
+            console.log(newFormData);
+            informationAdd({ category: newFormData })
+              .then((msg) => {
+                this.formData = {};
+                this.loading = false;
+                this.$message.success(msg);
+                this.handleClose();
+                this.$emit('done');
+              })
+              .finally(() => {
+                this.loading = false;
+              });
+          }
+        });
+      },
+      async handleTree(code) {
+        const res = await getTreeByPid(code);
+        this.classList = res.data;
+        this.typeList = res.data.map((item) => {
+          return { id: item.id, name: item.code + ' ' + item.name };
+        });
+      },
+      async open() {
+        this.dialogVisible = true;
+        await this.handleTree(0);
+        //默认物品类别===》生产设备
+        this.formData.categoryLevelId = '4';
+        this.formData.code1 = 'W1';
+      },
+      handleClose() {
+        this.dialogVisible = false;
+      },
+      shooteCategory(val) {
+        console.log(this.classList);
+        const row = this.findItemsByIds(this.classList, val);
+        this.formData.categoryLevelPath = row.join('/');
+      },
+      //递归
+      findItemById(arr, id) {
+        for (let i = 0; i < arr.length; i++) {
+          const item = arr[i];
+          if (item.id == id) {
+            return item;
+          }
+          if (item.children && item.children.length > 0) {
+            const childResult = this.findItemById(item.children, id);
+            if (childResult) {
+              return childResult;
+            }
+          }
         }
-      })
-
-  
-    }
-  },
-  mounted() {
-    this.handleTree(0);
-  }
-};
+        return null;
+      },
+      findItemsByIds(array, ids) {
+        return ids.map((id) => {
+          const item = this.findItemById(array, id);
+          return item ? item.name : null;
+        });
+      },
+      chooseItem(val) {
+        this.classList.map(async (item) => {
+          if (item.id == val) {
+            // const res = await getOrderNo(item.code);
+            // console.log(res);
+            this.formData.code1 = item.code;
+            // this.itemForm.code = val;
+            // this.getTreeData(item.code);
+          }
+        });
+      }
+    },
+    mounted() {}
+  };
 </script>
 
 <style lang="scss" scoped>
-.el-card {
-  height: 100%;
-}
-
-.tabs {
-  margin-top: 20px;
-
-  .one {
-    .el-button {
-      margin: 10px 0;
-    }
+  .el-card {
+    height: 100%;
   }
-}
 
-.dashed-line {
-  border-bottom: 1px dashed #999;
-  margin-top: 10px;
-}
+  .tabs {
+    margin-top: 20px;
+  }
 
+  .dashed-line {
+    border-bottom: 1px dashed #999;
+    margin: 10px 0;
+  }
 
-.dj {
-  display: flex;
+  .dj {
+    display: flex;
 
-  ::v-deep .el-select {
-    margin-left: 10px;
+    ::v-deep .el-select {
+      margin-left: 10px;
+    }
   }
-}
 
-::v-deep .el-cascader,
-.el-select {
-  width: 100%;
-}
+  ::v-deep .el-cascader,
+  .el-select {
+    width: 100%;
+  }
 
-.main {
-  display: flex;
-  width: 100%;
+  .main {
+    display: flex;
+    width: 100%;
 
-  .left {
-    margin-right: 5px;
-    width: 30%;
-  }
+    .left {
+      margin-right: 5px;
+      width: 30%;
+    }
 
-  .right {
-    margin-left: 5px;
-    width: 70%;
+    .right {
+      margin-left: 5px;
+      width: 70%;
+    }
   }
-}
 </style>

src/views/ItemInformation/components/add-table.vue

@@ -0,0 +1,177 @@
+<template>
+  <div class="add-table">
+    <el-dialog
+      :append-to-body="true"
+      top="15vh"
+      :title="dialogParams.title"
+      :visible.sync="dialogVisible"
+      width="60%"
+      :before-close="handleClose"
+    >
+      <div class="main">
+        <div class="left">
+          <el-input
+            size="small"
+            v-model="item"
+            placeholder="输入物品编码或名称"
+          ></el-input>
+          <div class="tree-layout">
+            <AssetTree
+              ref="assetTreeRef"
+              :id="localCategoryLevelId"
+              @handleNodeClick="handleNodeClick"
+            />
+          </div>
+        </div>
+        <div class="right">
+          <div class="but">
+            <el-button size="small" type="primary">查询</el-button>
+            <el-button size="small">重置</el-button>
+          </div>
+          <div class="table">
+            <ele-pro-table
+              ref="table"
+              :columns="columns"
+              :datasource="datasource"
+              height="calc(100vh - 500px)"
+              class="dict-table"
+              @selection-change="handleSelectionChange"
+            >
+            </ele-pro-table>
+          </div>
+        </div>
+      </div>
+      <span slot="footer" class="dialog-footer">
+        <el-button @click="dialogVisible = false">取 消</el-button>
+        <el-button type="primary" :loading="loading" @click="submit"
+          >确 定</el-button
+        >
+      </span>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+  import AssetTree from '@/components/AssetTree';
+  import { getList, pageSubstance } from '@/api/classifyManage/itemInformation';
+  export default {
+    components: { AssetTree },
+    props: {
+      categoryLevelId: {
+        typeof: String,
+        default: ''
+      }
+    },
+    data() {
+      return {
+        localCategoryLevelId: '',
+        dialogVisible: false,
+        loading: false,
+        item: '',
+        columns: [
+          {
+            type: 'selection',
+            width: '55px',
+            align: 'center'
+          },
+          {
+            prop: 'code',
+            label: '物品编码',
+            minWidth: 100
+          },
+          {
+            prop: 'name',
+            label: '物品名称',
+            showOverflowTooltip: true,
+            minWidth: 130
+          },
+          {
+            prop: 'modelType',
+            label: '型号',
+            minWidth: 130
+          }
+        ],
+        dialogParams: {},
+        selectData: []
+      };
+    },
+    watch: {
+      categoryLevelId(newValue) {
+        // 监听 categoryLevelId 的变化，并更新本地的 localCategoryLevelId
+        this.localCategoryLevelId = newValue;
+      }
+    },
+    methods: {
+      submit() {
+        try {
+          this.loading = true;
+          this.$emit('successTable', this.selectData);
+          this.dialogVisible = false;
+        } finally {
+          this.loading = false;
+        }
+      },
+      handleSelectionChange(row) {
+        this.selectData = row;
+      },
+      /* 表格数据源 */
+      datasource({ page, where, limit }) {
+        return getList({
+          ...where,
+          pageNum: page,
+          size: limit,
+          isProduct: false,
+          categoryLevelId: this.localCategoryLevelId,
+          rootCategoryLevelId: 4
+        });
+      },
+      open(row, data) {
+        this.dialogVisible = true;
+        this.dialogParams = row;
+        this.localCategoryLevelId = this.categoryLevelId;
+
+        this.$nextTick(() => {
+          this.$refs.table.reload();
+          this.$refs.table.clearSelection();
+          if (data.length != 0) {
+            // this.$refs.tablesetSelection([1])
+            const arr = data.map((item) => {
+              return item.id;
+            });
+          } else {
+            this.selectData = [];
+          }
+        });
+      },
+      handleClose() {
+        this.dialogVisible = false;
+      },
+      handleNodeClick(data) {
+        this.localCategoryLevelId = data.id;
+        this.$refs.table.reload();
+      }
+    }
+  };
+</script>
+
+<style lang="scss" scoped>
+  .main {
+    display: flex;
+    .left {
+      width: 30%;
+      margin-right: 5px;
+      .tree-layout {
+        margin-top: 10px;
+        border: 1px solid #ededed;
+        height: calc(100vh - 453px);
+      }
+    }
+    .right {
+      width: 70%;
+      margin-left: 5px;
+      .table {
+        margin-top: 10px;
+      }
+    }
+  }
+</style>

src/views/ItemInformation/components/production-device.vue

@@ -0,0 +1,165 @@
+<!-- 生产设备 -->
+<template>
+  <div class="productionDevice">
+    <div class="tabs">
+      <el-tabs v-model="activeName" type="card">
+        <el-tab-pane label="匹配模具" name="first">
+          <div class="table">
+            <ele-pro-table
+              ref="table"
+              :columns="columns"
+              :datasource="datasource"
+              height="calc(100vh - 500px)"
+              class="dict-table"
+            >
+              <template v-slot:toolbar>
+                <el-button
+                  size="small"
+                  type="primary"
+                  icon="el-icon-plus"
+                  class="ele-btn-icon"
+                  @click="add"
+                >
+                  添加
+                </el-button>
+              </template>
+              <!-- 表头工具栏 -->
+              <template v-slot:action="{ row }">
+                <el-link
+                  type="danger"
+                  :underline="false"
+                  icon="el-icon-delete"
+                  @click="handleDel(row)"
+                >
+                  删除
+                </el-link>
+              </template>
+            </ele-pro-table>
+          </div>
+        </el-tab-pane>
+        <el-tab-pane label="匹配备品备件" name="second">
+          <div class="one">
+            <el-button type="primary">添加</el-button>
+          </div>
+          <div class="table">
+            <el-table :data="tableData" style="width: 100%">
+              <el-table-column prop="date" label="序号" width="60">
+              </el-table-column>
+              <el-table-column prop="wpmc" label="物品名称"> </el-table-column>
+              <el-table-column prop="wpmc" label="物品名称"> </el-table-column>
+              <el-table-column prop="wpmc" label="型号"> </el-table-column>
+              <el-table-column prop="wpmc" label="物品类型"> </el-table-column>
+              <el-table-column prop="wpmc" label="分类"> </el-table-column>
+              <el-table-column prop="wpmc" label="操作"> </el-table-column>
+            </el-table>
+          </div>
+        </el-tab-pane>
+      </el-tabs>
+    </div>
+    <addTable
+      ref="addTableRef"
+      @successTable="addTableList"
+      :categoryLevelId="categoryLevelId"
+    />
+  </div>
+</template>
+
+<script>
+  import addTable from './add-table.vue';
+  export default {
+    components: { addTable },
+    props: {
+      categoryLevelId: {
+        typeof: String,
+        default: ''
+      }
+    },
+    data() {
+      return {
+        tableData: [],
+        activeName: 'first',
+        columns: [
+          {
+            columnKey: 'index',
+            type: 'index',
+            width: 55,
+            align: 'center',
+            reserveSelection: true,
+            label: '序号',
+            showOverflowTooltip: true
+          },
+          {
+            prop: 'code',
+            label: '物品编码',
+            minWidth: 100
+          },
+          {
+            prop: 'name',
+            label: '物品名称',
+            showOverflowTooltip: true,
+            minWidth: 130
+          },
+          {
+            prop: 'brandNum',
+            label: '牌号',
+            width: 70
+          },
+          {
+            prop: 'modelType',
+            label: '型号',
+            minWidth: 130
+          },
+          {
+            prop: 'ssxs',
+            label: '收缩系数',
+            width: 80
+          },
+          {
+            prop: 'dmtxh',
+            label: '大模体型号',
+            width: 80
+          },
+          {
+            prop: 'weightUnit',
+            label: '物品类型',
+            width: 80
+          },
+
+          {
+            prop: 'productCategoryLevelName',
+            label: '分类',
+            width: 100
+          },
+          {
+            action: 'action',
+            slot: 'action',
+            label: '操作'
+          }
+        ],
+        datasource: []
+      };
+    },
+    methods: {
+      handleDel(row) {
+        const index = this.datasource.indexOf(row);
+        if (index !== -1) {
+          this.datasource.splice(index, 1);
+        }
+      },
+      addTableList(list) {
+        this.datasource = list;
+      },
+
+      add() {
+        const dialogParams = { title: '选择设备' };
+        this.$refs.addTableRef.open(dialogParams, this.datasource);
+      }
+    }
+  };
+</script>
+
+<style lang="scss" scoped>
+  .table {
+    margin-top: 10px;
+  }
+</style>

src/views/ItemInformation/index.vue

@@ -138,7 +138,7 @@
             label: '操作'
           }
         ],
-        categoryLevelId: '9'
+        categoryLevelId: '4'
       };
     },
 
@@ -149,11 +149,11 @@
       },
       /* 表格数据源 */
       datasource({ page, where, limit }) {
-        return pageSubstance({
+        return getList({
           ...where,
           pageNum: page,
           size: limit,
-          isProduct: true,
+          isProduct: false,
           categoryLevelId: this.categoryLevelId,
           rootCategoryLevelId: 4
         });