台账提交

src/api/ledgerAssets/boat.js

@@ -0,0 +1,58 @@
+import request from '@/utils/request';
+
+
+// 获取类别实体分页
+export async function getBoatList (data) {
+  let par = new URLSearchParams(data);
+  const res = await request.get(`/main/category/pageSubstance?` + par, {});
+  if (res.data.code == 0) {
+    return res.data.data;
+  }
+  return Promise.reject(new Error(res.data.message));
+}
+
+
+
+
+
+
+
+
+
+
+
+
+
+// 根据父级id查分类树
+export async function getTreeByPid (parentId) {
+  const res = await request.get(`/main/categoryLevel/getTreeByPid/${parentId}`);
+  if (res.data.code == 0) {
+    return res.data;
+  }
+  return Promise.reject(new Error(res.data.message));
+}
+// 根据类型查分类树
+export async function getTreeByType (type) {
+  const res = await request.get(`/main/categoryLevel/getTreeByType/${type}`);
+  if (res.data.code == 0) {
+    return res.data;
+  }
+  return Promise.reject(new Error(res.data.message));
+}
+
+// 删除分类
+export async function deleteCategory (id) {
+  const res = await request.get(`/main/categoryLevel/delete/${id}`);
+  if (res.data.code == 0) {
+    return res.data;
+  }
+  return Promise.reject(new Error(res.data.message));
+}
+//根据ID查询分类详情系信息
+export async function getInfoById (id) {
+  const res = await request.get(`/main/categoryLevel/getById/${id}`);
+  if (res.data.code == 0) {
+    return res.data;
+  }
+  return Promise.reject(new Error(res.data.message));
+}

src/components/AssetTree/index.vue

@@ -7,8 +7,10 @@
       :node-key="nodeKey"
       ref="tree"
       :highlight-current="true"
+      :expand-on-click-node="false"
       @node-click="handleNodeClick"
       v-bind="$attrs"
+      :default-expand-all="defaultExpandAll"
     >
     </el-tree>
   </div>
@@ -35,6 +37,12 @@
           };
         }
       },
+      defaultExpandAll: {
+        type: Boolean,
+        default: function () {
+          return true
+        }
+      },
       // 初始请求treeList
       init: {
         type: Boolean,

src/enum/dict.js

@@ -3,5 +3,6 @@ export default {
   分类编号: 'classify_no',
   分隔符: 'separate',
   任务类型: 'taskCategory',
-  流程分类: 'processCategory'
+  流程分类: 'processCategory',
+  角度: 'angle'
 };

src/views/ledgerAssets/boat/components/baseInfo.vue

@@ -0,0 +1,259 @@
+<template>
+  <div class="baseinfo-container">
+    <div class="basic-details-title border-none">
+      <span class="border-span">基本信息</span>
+    </div>
+    <el-descriptions title="" :column="4" size="medium" border>
+      <el-descriptions-item>
+        <template slot="label"> 物品编码 </template>
+        {{ information.informationCode }}
+      </el-descriptions-item>
+      <el-descriptions-item>
+        <template slot="label"> 舟皿名称 </template>
+        {{ information.informationName }}
+      </el-descriptions-item>
+      <el-descriptions-item>
+        <template slot="label"> 型号</template>
+        {{ information.modelType }}
+      </el-descriptions-item>
+      <el-descriptions-item>
+        <template slot="label"> 规格 </template>
+        {{ information.specification }}
+      </el-descriptions-item>
+      <el-descriptions-item :span="2">
+        <template slot="label"> 分类 </template>
+        {{information.classificationUrl}}
+      </el-descriptions-item>
+      <el-descriptions-item>
+        <template slot="label"> 长/宽/高(mm) </template>
+        {{information.extendField.length}}/{{information.extendField.width}}/{{information.extendField.high}}
+      </el-descriptions-item>
+      <el-descriptions-item>
+        <template slot="label"> 计量单位</template>
+        {{information.measuringUnit}}
+      </el-descriptions-item>
+    </el-descriptions>
+    <div class="basic-details-title border-none">
+      <span class="border-span">舟皿明细</span>
+    </div>
+    <div>
+      <el-tabs v-model="activeName" type="card" @tab-click="tabClick" class="basic-tab">
+          <el-tab-pane :label="`在用(${countInfo.inUseSum?countInfo.inUseSum:'0'})`" name="inUse" >
+          </el-tab-pane>
+          <el-tab-pane :label="`在库(${countInfo.inLibrarySum?countInfo.inLibrarySum:'0'})`" name="inLibrary">
+          </el-tab-pane>
+          <el-tab-pane :label="`消耗(${countInfo.consumeSum?countInfo.consumeSum:'0'})`" name="hasConsume">
+          </el-tab-pane>
+      </el-tabs>
+      <el-table :data="tableData" class="table-box"
+         :header-cell-style="{ background: '#F0F3F3', border: 'none'}"
+      >
+           <el-table-column type="index" label="序号"  width="100"> </el-table-column>
+           <el-table-column prop="assetCode" label="舟皿编码" > </el-table-column>
+           <el-table-column prop="inCode" label="入库单号" v-if="activeName=='inLibrary'"> </el-table-column>
+           <el-table-column prop="inTime" label="入库时间" v-if="activeName=='inLibrary'"> </el-table-column>
+           <el-table-column prop="outCode" label="出库单号" v-if="activeName!='inLibrary'"> </el-table-column>
+           <el-table-column prop="outTime" label="出库时间" v-if="activeName!='inLibrary'"> </el-table-column>
+      </el-table>
+      <div class="pagination">
+        <el-pagination
+          background
+          layout="total, sizes, prev, pager, next, jumper"
+          :total="total"
+          :page-sizes="[15, 30, 50, 100, 500]"
+          :page-size="pagination.size"
+          :current-page.sync="pagination.page"
+          @current-change="handleCurrent"
+          @size-change="handleSize"
+        >
+        </el-pagination>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+// import {
+//   getDetails
+// } from '@/api/stockManagement/itemInformation'
+// import {getAssetPage , getCount} from "@/api/ledgerAssets/asset"
+export default {
+  props: {
+    rowInfo:{
+      type:Object ,
+      default:{}
+    },
+  },
+  data () {
+    return {
+      baseOpt: [
+        { label: '物品编码', key: 'informationCode' },
+        { label: '舟皿名称', key: 'informationName' },
+        { label: '型号', key: 'modelType' },
+        { label: '规格', key: 'specification' },
+        { label: '分类', key: 'classificationUrl', span: 2 },
+        { label: '长/宽/高(mm)', key: 'mm' },
+        { label: '计量单位', key: 'measuringUnit' },
+      ],
+      information:{
+        extendField:{}
+      },
+      activeName:'inUse',
+      tableData:[],
+      pagination: {
+        page: 1,
+        size: 15
+      },
+      total: 0,
+      searchForm:{
+        assetType:'ZHOUMIN',
+        informationId:'',
+        source:1
+      },
+      countInfo:{}
+
+    }
+  },
+  watch:{
+
+
+  },
+  created () {
+    // this.searchForm.informationId = this.rowInfo.id
+    // this.getDetilInfo(this.rowInfo.id)
+    // this.handleList()
+    // this.getCountNum()
+  },
+  methods:{
+     async getDetilInfo(id){
+       const res = await getDetails({id:id})
+       if (res.success){
+          this.information = res.data
+          this.$set(this.information, 'extendField', JSON.parse(res.data.extendField))
+       }
+     },
+
+     tabClick(val){
+        switch (this.activeName) {
+          case 'inUse': {
+            this.searchForm.source = 1
+            break;
+          }
+          case 'inLibrary': {
+            this.searchForm.source = 2
+            break;
+          }
+          case 'hasConsume': {
+            this.searchForm.source = 3
+            break;
+          }
+          default:
+            break;
+        }
+        this.handleList()
+     },
+
+     handleCurrent (page) {
+       this.pagination.page = page
+       this.handleList()
+     },
+     handleSize (size) {
+       this.pagination.page = 1
+       this.pagination.size = size
+       this.handleList()
+     },
+
+     async handleList () {
+       const params = {
+         ...this.searchForm,
+         ...this.pagination
+       }
+       const res = await getAssetPage(params)
+       if (res?.success) {
+         this.tableData = res.data.records
+         this.total = res.data.total
+         // if(this.tableData.length)  this.$refs.tableRef.clearSelection()
+         // this.$nextTick(() => {
+         //     this.mapList.forEach(item => {
+         //       const row = this.tableData.find(i => i.id === item.id)
+         //       if (row) {
+         //         this.$refs.tableRef.toggleRowSelection(row, true)
+         //       }
+         //     })
+         // })
+       }
+     },
+
+     getCountNum(){
+       const params = {
+           assetType:'ZHOUMIN',
+           informationId:this.rowInfo.id
+       }
+       getCount(params).then(res=>{
+           if(res?.success){
+               this.countInfo = res.data
+           }
+       })
+     }
+
+
+  }
+
+}
+</script>
+
+<style lang="scss" scoped>
+ .baseinfo-container {
+    background-color: #fff;
+    padding: 20px;
+    .content {
+      padding: 0 20px;
+    }
+  .basic-details-title{
+    font-size: 16px;
+    margin: 15px 0;
+  }
+  .basic-tab{
+    margin-bottom: 15px;
+  }
+  .upload-container {
+    display: flex;
+    .img-box {
+      width: 280px;
+      height: 342px;
+      border: 1px solid rgba(215, 215, 215, 1);
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      img {
+        max-width: 100%;
+      }
+    }
+    .file-list {
+      margin-left: 50px;
+      flex: 1;
+      display: flex;
+      justify-content: space-between;
+      flex-wrap: wrap;
+      justify-items: baseline;
+      align-content: flex-start;
+      .file-box {
+        width: 30%;
+        margin-bottom: 20px;
+        height: 57px;
+        text-align: center;
+        line-height: 55px;
+        border: 1px solid var(--mainColor);
+        color: var(--mainColor);
+        cursor: pointer;
+
+        &.disabled {
+          cursor: not-allowed;
+          border-color: rgba(215, 215, 215, 1);
+          color: rgba(215, 215, 215, 1);
+        }
+      }
+    }
+  }
+}
+</style>

src/views/ledgerAssets/boat/components/boat-list.vue

@@ -0,0 +1,167 @@
+<template>
+  <div>
+    <!-- 数据表格 -->
+    <ele-pro-table
+      ref="table"
+      :columns="columns"
+      :datasource="datasource"
+      height="calc(100vh - 265px)"
+      full-height="calc(100vh - 116px)"
+      tool-class="ele-toolbar-form"
+      cache-key="systemOrgUserTable"
+    >
+      <!-- 表头工具栏 -->
+      <template v-slot:toolbar>
+        <boat-search @search="reload">
+        </boat-search>
+      </template>
+      <!-- 角色列 -->
+      <template v-slot:roles="{ row }">
+        <el-tag
+          v-for="item in row.roles"
+          :key="item.roleId"
+          type="primary"
+          size="mini"
+          :disable-transitions="true"
+        >
+          {{ item.roleName }}
+        </el-tag>
+      </template>
+      <!-- 状态列 -->
+      <template v-slot:code="{ row }">
+        <el-link
+          @click="details(row)"
+         >{{ row.code }}</el-link>
+      </template>
+    </ele-pro-table>
+  </div>
+</template>
+
+<script>
+  import BoatSearch from './boat-search.vue';
+  import {
+    getBoatList
+  } from '@/api/ledgerAssets/boat.js';
+
+  export default {
+    components: { BoatSearch },
+    props: {
+      // 类别id
+      rootId: [Number, String],
+    },
+    data() {
+      return {
+        // 表格列配置
+        columns: [
+          {
+            columnKey: 'index',
+            type: 'index',
+            label: '序号',
+            width: 55,
+            align: 'center',
+            showOverflowTooltip: true,
+            fixed: 'left'
+          },
+          {
+            prop: 'code',
+            label: '类别编码',
+            showOverflowTooltip: true,
+            minWidth: 110
+          },
+          {
+            prop: 'name',
+            label: '类别名称',
+            showOverflowTooltip: true,
+            minWidth: 110
+          },
+          {
+            prop: 'module',
+            label: '型号',
+            showOverflowTooltip: true,
+            minWidth: 110
+          },
+          {
+            prop: 'specification',
+            label: '规格',
+            showOverflowTooltip: true,
+            minWidth: 110
+          },
+          {
+            prop: 'angle',
+            label: '角度',
+            showOverflowTooltip: true,
+            minWidth: 110
+          },
+          // {
+          //   prop: 'angle',
+          //   label: '长*宽*高',
+          //   showOverflowTooltip: true,
+          //   minWidth: 110
+          // },
+          {
+            prop: 'categoryLevelPath',
+            label: '分类',
+            showOverflowTooltip: true,
+            minWidth: 110
+          },
+          {
+            prop: 'inUseSum',
+            label: '在用',
+            showOverflowTooltip: true,
+            minWidth: 110
+          },
+          {
+            prop: 'inLibrarySum',
+            label: '在库',
+            showOverflowTooltip: true,
+            minWidth: 110
+          },
+          {
+            prop: 'consumeSum',
+            label: '消耗',
+            showOverflowTooltip: true,
+            minWidth: 110
+          },
+          {
+            prop: 'totalSum',
+            label: '总数量',
+            showOverflowTooltip: true,
+            minWidth: 110
+          },
+        ]
+      };
+    },
+    methods: {
+      /* 表格数据源 */
+      datasource({ page, limit, where, order }) {
+        return getBoatList({
+          ...where,
+          ...order,
+          pageNum: page,
+          size: limit,
+          rootCategoryLevelId: this.rootId
+        });
+      },
+      /* 刷新表格 */
+      reload(where) {
+        this.$refs.table.reload({ pageNum: 1, where: where });
+      },
+
+      // 跳转到详情页
+      details ({ id }) {
+        this.$router.push({
+          path: '/ledgerAssets/material/detail',
+          query: {
+            id
+          }
+        })
+      }
+    },
+    watch: {
+      // 监听类别id变化
+      rootId() {
+        this.reload();
+      }
+    }
+  };
+</script>

src/views/ledgerAssets/boat/components/boat-search.vue

@@ -0,0 +1,96 @@
+<!-- 搜索表单 -->
+<template>
+  <el-form
+    label-width="77px"
+    class="ele-form-search"
+    @keyup.enter.native="search"
+    @submit.native.prevent
+  >
+    <el-row :gutter="15">
+      <el-col v-bind="styleResponsive ? { lg: 6, md: 12 } : { span: 6 }">
+        <el-form-item label="编码:" label-width="50px">
+          <el-input clearable v-model="where.code" placeholder="请输入" />
+        </el-form-item>
+      </el-col>
+      <el-col v-bind="styleResponsive ? { lg: 6, md: 12 } : { span: 6 }">
+        <el-form-item label="名称:" label-width="50px">
+          <el-input clearable v-model="where.name" placeholder="请输入" />
+        </el-form-item>
+      </el-col>
+      <el-col v-bind="styleResponsive ? { lg: 6, md: 12 } : { span: 6 }">
+        <el-form-item label="角度:" label-width="50px">
+          <DictSelection dictName="角度" clearable v-model="where.angle">
+          </DictSelection>
+        </el-form-item>
+      </el-col>
+      <el-col v-bind="styleResponsive ? { lg: 6, md: 12 } : { span: 6 }">
+        <el-form-item label="规格型号:">
+          <el-input clearable v-model="where.spaceModule" placeholder="请输入" />
+        </el-form-item>
+      </el-col>
+      <el-col v-bind="styleResponsive ? { lg: 12, md: 12 } : { span: 12 }">
+        <div class="ele-form-actions">
+          <el-button
+            type="primary"
+            icon="el-icon-search"
+            class="ele-btn-icon"
+            @click="search"
+            size="small"
+          >
+            查询
+          </el-button>
+          <el-button @click="reset"
+            icon="el-icon-refresh-left"
+            size="small"
+            type="primary"
+          >重置</el-button>
+          <el-button
+            size="small"
+            type="primary"
+            icon="el-icon-download"
+            class="ele-btn-icon"
+          >
+            导出
+          </el-button>
+        </div>
+      </el-col>
+    </el-row>
+  </el-form>
+</template>
+
+<script>
+  import { login } from '@/api/login';
+  export default {
+    data() {
+      // 默认表单数据
+      const defaultWhere = {
+        name: '',
+        code: '',
+        angle:'',
+        spaceModule:''
+      };
+      return {
+        // 表单数据
+        where: { ...defaultWhere }
+      };
+    },
+    computed: {
+      // 是否开启响应式布局
+      styleResponsive() {
+        return this.$store.state.theme.styleResponsive;
+      }
+    },
+    methods: {
+      /* 搜索 */
+      search() {
+        console.log(this.where);
+        this.$emit('search', this.where);
+      },
+      /*  重置 */
+      reset() {
+        this.where = { ...this.defaultWhere };
+        this.search();
+      }
+    }
+  };
+</script>

src/views/ledgerAssets/boat/detail.vue

@@ -0,0 +1,66 @@
+<template>
+  <div>
+    <!-- tab切换 -->
+<!--    <div class="switch">
+      <div class="switch_left">
+        <ul>
+          <li
+            v-for="item in tabOptions"
+            :key="item.key"
+            :class="{ active: activeComp == item.key }"
+            @click="activeComp = item.key"
+          >
+            {{ item.name }}
+          </li>
+        </ul>
+        <el-button size="small" @click="$router.go(-1)">返回</el-button>
+      </div>
+    </div> -->
+    <div class="content-wrapper">
+      <component :is="activeComp" :rowInfo="rowInfo"></component>
+    </div>
+  </div>
+</template>
+
+<script>
+import baseInfo from './components/baseInfo.vue'
+export default {
+  components: {
+    baseInfo
+  },
+  data () {
+    return {
+      activeComp: 'baseInfo',
+      tabOptions: [
+        { key: 'baseInfo', name: '舟皿信息' },
+      ],
+      rowInfo:null,
+    }
+  },
+  created () {
+     // this.rowInfo = JSON.parse(this.$route.query.row)
+  },
+  methods:{
+     // async getDetilInfo(id){
+     //   const res = await getDetails({id:id})
+     //   if (res.success){
+
+     //   }
+     // },
+  }
+
+}
+</script>
+
+<style lang="scss" scoped>
+.content-wrapper {
+  background-color: #fff;
+}
+.switch_left{
+  width:100%;
+  display:flex;
+  align-items:center;
+  justify-content: space-between;
+  padding-right:20px;
+}
+</style>

src/views/ledgerAssets/boat/index.vue

@@ -10,18 +10,17 @@
            <div class="ele-border-lighter sys-organization-list">
              <AssetTree
                @handleNodeClick="handleNodeClick"
-               @setDefault="setDefaultList"
-               :id="'2'"
+               :type="'2'"
+               :paramsType="'type'"
                ref="treeList"
              />
            </div>
          </div>
          <template v-slot:content>
-           <!-- <org-user-list
+           <boat-list
              v-if="current"
-             :organization-list="data"
-             :organization-id="current.id"
-           /> -->
+             :root-id="current.id"
+           />
          </template>
        </ele-split-layout>
      </el-card>
@@ -30,13 +29,22 @@
 
 <script>
   import AssetTree from '@/components/AssetTree';
+  import BoatList from './components/boat-list.vue';
+  import {
+    getBoatList
+  } from '@/api/ledgerAssets/boat.js';
   export default {
-    components: { AssetTree },
+    components: {
+      AssetTree ,
+      BoatList
+    },
     data () {
       return {
         // 加载状态
         loading: false,
-
+        // 表格选中数据
+        selection: [],
+        current:null
       };
     },
     computed: {
@@ -44,20 +52,24 @@
     },
     methods: {
       handleNodeClick (info) {
-        // this.chooseId = info.id
-        // this.searchForm.classificationIds = [info.id]
-        // this.handleList()
-      },
-
-      setDefaultList(id){
-        // this.searchForm.classificationIds = [id]
-        // this.handleList()
+        this.current = info
       },
-
     }
   };
 </script>
 
 <style lang="scss" scoped>
-
+  .sys-organization-list {
+    height: calc(100vh - 264px);
+    box-sizing: border-box;
+    border-width: 1px;
+    border-style: solid;
+    overflow: auto;
+  }
+  .sys-organization-list :deep(.el-tree-node__content) {
+    height: 40px;
+    & > .el-tree-node__expand-icon {
+      margin-left: 10px;
+    }
+  }
 </style>

src/views/ledgerAssets/material/components/baseInfo.vue

@@ -0,0 +1,259 @@
+<template>
+  <div class="baseinfo-container">
+    <div class="basic-details-title border-none">
+      <span class="border-span">基本信息</span>
+    </div>
+    <el-descriptions title="" :column="4" size="medium" border>
+      <el-descriptions-item>
+        <template slot="label"> 物品编码 </template>
+        {{ information.informationCode }}
+      </el-descriptions-item>
+      <el-descriptions-item>
+        <template slot="label"> 舟皿名称 </template>
+        {{ information.informationName }}
+      </el-descriptions-item>
+      <el-descriptions-item>
+        <template slot="label"> 型号</template>
+        {{ information.modelType }}
+      </el-descriptions-item>
+      <el-descriptions-item>
+        <template slot="label"> 规格 </template>
+        {{ information.specification }}
+      </el-descriptions-item>
+      <el-descriptions-item :span="2">
+        <template slot="label"> 分类 </template>
+        {{information.classificationUrl}}
+      </el-descriptions-item>
+      <el-descriptions-item>
+        <template slot="label"> 长/宽/高(mm) </template>
+        {{information.extendField.length}}/{{information.extendField.width}}/{{information.extendField.high}}
+      </el-descriptions-item>
+      <el-descriptions-item>
+        <template slot="label"> 计量单位</template>
+        {{information.measuringUnit}}
+      </el-descriptions-item>
+    </el-descriptions>
+    <div class="basic-details-title border-none">
+      <span class="border-span">舟皿明细</span>
+    </div>
+    <div>
+      <el-tabs v-model="activeName" type="card" @tab-click="tabClick" class="basic-tab">
+          <el-tab-pane :label="`在用(${countInfo.inUseSum?countInfo.inUseSum:'0'})`" name="inUse" >
+          </el-tab-pane>
+          <el-tab-pane :label="`在库(${countInfo.inLibrarySum?countInfo.inLibrarySum:'0'})`" name="inLibrary">
+          </el-tab-pane>
+          <el-tab-pane :label="`消耗(${countInfo.consumeSum?countInfo.consumeSum:'0'})`" name="hasConsume">
+          </el-tab-pane>
+      </el-tabs>
+      <el-table :data="tableData" class="table-box"
+         :header-cell-style="{ background: '#F0F3F3', border: 'none'}"
+      >
+           <el-table-column type="index" label="序号"  width="100"> </el-table-column>
+           <el-table-column prop="assetCode" label="舟皿编码" > </el-table-column>
+           <el-table-column prop="inCode" label="入库单号" v-if="activeName=='inLibrary'"> </el-table-column>
+           <el-table-column prop="inTime" label="入库时间" v-if="activeName=='inLibrary'"> </el-table-column>
+           <el-table-column prop="outCode" label="出库单号" v-if="activeName!='inLibrary'"> </el-table-column>
+           <el-table-column prop="outTime" label="出库时间" v-if="activeName!='inLibrary'"> </el-table-column>
+      </el-table>
+      <div class="pagination">
+        <el-pagination
+          background
+          layout="total, sizes, prev, pager, next, jumper"
+          :total="total"
+          :page-sizes="[15, 30, 50, 100, 500]"
+          :page-size="pagination.size"
+          :current-page.sync="pagination.page"
+          @current-change="handleCurrent"
+          @size-change="handleSize"
+        >
+        </el-pagination>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+// import {
+//   getDetails
+// } from '@/api/stockManagement/itemInformation'
+// import {getAssetPage , getCount} from "@/api/ledgerAssets/asset"
+export default {
+  props: {
+    rowInfo:{
+      type:Object ,
+      default:{}
+    },
+  },
+  data () {
+    return {
+      baseOpt: [
+        { label: '物品编码', key: 'informationCode' },
+        { label: '舟皿名称', key: 'informationName' },
+        { label: '型号', key: 'modelType' },
+        { label: '规格', key: 'specification' },
+        { label: '分类', key: 'classificationUrl', span: 2 },
+        { label: '长/宽/高(mm)', key: 'mm' },
+        { label: '计量单位', key: 'measuringUnit' },
+      ],
+      information:{
+        extendField:{}
+      },
+      activeName:'inUse',
+      tableData:[],
+      pagination: {
+        page: 1,
+        size: 15
+      },
+      total: 0,
+      searchForm:{
+        assetType:'ZHOUMIN',
+        informationId:'',
+        source:1
+      },
+      countInfo:{}
+
+    }
+  },
+  watch:{
+
+
+  },
+  created () {
+    // this.searchForm.informationId = this.rowInfo.id
+    // this.getDetilInfo(this.rowInfo.id)
+    // this.handleList()
+    // this.getCountNum()
+  },
+  methods:{
+     async getDetilInfo(id){
+       const res = await getDetails({id:id})
+       if (res.success){
+          this.information = res.data
+          this.$set(this.information, 'extendField', JSON.parse(res.data.extendField))
+       }
+     },
+
+     tabClick(val){
+        switch (this.activeName) {
+          case 'inUse': {
+            this.searchForm.source = 1
+            break;
+          }
+          case 'inLibrary': {
+            this.searchForm.source = 2
+            break;
+          }
+          case 'hasConsume': {
+            this.searchForm.source = 3
+            break;
+          }
+          default:
+            break;
+        }
+        this.handleList()
+     },
+
+     handleCurrent (page) {
+       this.pagination.page = page
+       this.handleList()
+     },
+     handleSize (size) {
+       this.pagination.page = 1
+       this.pagination.size = size
+       this.handleList()
+     },
+
+     async handleList () {
+       const params = {
+         ...this.searchForm,
+         ...this.pagination
+       }
+       const res = await getAssetPage(params)
+       if (res?.success) {
+         this.tableData = res.data.records
+         this.total = res.data.total
+         // if(this.tableData.length)  this.$refs.tableRef.clearSelection()
+         // this.$nextTick(() => {
+         //     this.mapList.forEach(item => {
+         //       const row = this.tableData.find(i => i.id === item.id)
+         //       if (row) {
+         //         this.$refs.tableRef.toggleRowSelection(row, true)
+         //       }
+         //     })
+         // })
+       }
+     },
+
+     getCountNum(){
+       const params = {
+           assetType:'ZHOUMIN',
+           informationId:this.rowInfo.id
+       }
+       getCount(params).then(res=>{
+           if(res?.success){
+               this.countInfo = res.data
+           }
+       })
+     }
+
+
+  }
+
+}
+</script>
+
+<style lang="scss" scoped>
+ .baseinfo-container {
+    background-color: #fff;
+    padding: 20px;
+    .content {
+      padding: 0 20px;
+    }
+  .basic-details-title{
+    font-size: 16px;
+    margin: 15px 0;
+  }
+  .basic-tab{
+    margin-bottom: 15px;
+  }
+  .upload-container {
+    display: flex;
+    .img-box {
+      width: 280px;
+      height: 342px;
+      border: 1px solid rgba(215, 215, 215, 1);
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      img {
+        max-width: 100%;
+      }
+    }
+    .file-list {
+      margin-left: 50px;
+      flex: 1;
+      display: flex;
+      justify-content: space-between;
+      flex-wrap: wrap;
+      justify-items: baseline;
+      align-content: flex-start;
+      .file-box {
+        width: 30%;
+        margin-bottom: 20px;
+        height: 57px;
+        text-align: center;
+        line-height: 55px;
+        border: 1px solid var(--mainColor);
+        color: var(--mainColor);
+        cursor: pointer;
+
+        &.disabled {
+          cursor: not-allowed;
+          border-color: rgba(215, 215, 215, 1);
+          color: rgba(215, 215, 215, 1);
+        }
+      }
+    }
+  }
+}
+</style>

src/views/ledgerAssets/material/components/material-list.vue

@@ -0,0 +1,149 @@
+<template>
+  <div>
+    <!-- 数据表格 -->
+    <ele-pro-table
+      ref="table"
+      :columns="columns"
+      :datasource="datasource"
+      height="calc(100vh - 265px)"
+      full-height="calc(100vh - 116px)"
+      tool-class="ele-toolbar-form"
+      cache-key="systemOrgUserTable"
+    >
+      <!-- 表头工具栏 -->
+      <template v-slot:toolbar>
+        <material-search @search="reload">
+        </material-search>
+      </template>
+      <!-- 角色列 -->
+      <template v-slot:roles="{ row }">
+        <el-tag
+          v-for="item in row.roles"
+          :key="item.roleId"
+          type="primary"
+          size="mini"
+          :disable-transitions="true"
+        >
+          {{ item.roleName }}
+        </el-tag>
+      </template>
+      <!-- 状态列 -->
+      <template v-slot:code="{ row }">
+        <el-link
+          @click="details(row)"
+         >{{ row.code }}</el-link>
+      </template>
+    </ele-pro-table>
+  </div>
+</template>
+
+<script>
+  import MaterialSearch from './material-search.vue';
+  import {
+    getBoatList
+  } from '@/api/ledgerAssets/boat.js';
+
+  export default {
+    components: { MaterialSearch },
+    props: {
+      // 类别id
+      rootId: [Number, String],
+    },
+    data() {
+      return {
+        // 表格列配置
+        columns: [
+          {
+            columnKey: 'index',
+            type: 'index',
+            label: '序号',
+            width: 55,
+            align: 'center',
+            showOverflowTooltip: true,
+            fixed: 'left'
+          },
+          {
+            prop: 'code',
+            label: '类别编码',
+            showOverflowTooltip: true,
+            minWidth: 110
+          },
+          {
+            prop: 'name',
+            label: '类别名称',
+            showOverflowTooltip: true,
+            minWidth: 110
+          },
+          {
+            prop: 'brandNum',
+            label: '牌号',
+            showOverflowTooltip: true,
+            minWidth: 110
+          },
+          {
+            prop: 'categoryLevelPath',
+            label: '分类',
+            showOverflowTooltip: true,
+            minWidth: 110
+          },
+          {
+            prop: 'inUseSum',
+            label: '在用',
+            showOverflowTooltip: true,
+            minWidth: 110
+          },
+          {
+            prop: 'inLibrarySum',
+            label: '在库',
+            showOverflowTooltip: true,
+            minWidth: 110
+          },
+          {
+            prop: 'consumeSum',
+            label: '消耗',
+            showOverflowTooltip: true,
+            minWidth: 110
+          },
+          {
+            prop: 'totalSum',
+            label: '总数量',
+            showOverflowTooltip: true,
+            minWidth: 110
+          },
+        ]
+      };
+    },
+    methods: {
+      /* 表格数据源 */
+      datasource({ page, limit, where, order }) {
+        return getBoatList({
+          ...where,
+          ...order,
+          pageNum: page,
+          size: limit,
+          rootCategoryLevelId: this.rootId
+        });
+      },
+      /* 刷新表格 */
+      reload(where) {
+        this.$refs.table.reload({ pageNum: 1, where: where });
+      },
+
+      // 跳转到详情页
+      details ({ id }) {
+        this.$router.push({
+          path: '/ledgerAssets/material/detail',
+          query: {
+            id
+          }
+        })
+      }
+    },
+    watch: {
+      // 监听类别id变化
+      rootId() {
+        this.reload();
+      }
+    }
+  };
+</script>

src/views/ledgerAssets/material/components/material-search.vue

@@ -0,0 +1,88 @@
+<!-- 搜索表单 -->
+<template>
+  <el-form
+    label-width="50px"
+    class="ele-form-search"
+    @keyup.enter.native="search"
+    @submit.native.prevent
+  >
+    <el-row :gutter="15">
+      <el-col v-bind="styleResponsive ? { lg: 6, md: 12 } : { span: 6 }">
+        <el-form-item label="编码:" label-width="50px">
+          <el-input clearable v-model="where.code" placeholder="请输入" />
+        </el-form-item>
+      </el-col>
+      <el-col v-bind="styleResponsive ? { lg: 6, md: 12 } : { span: 6 }">
+        <el-form-item label="名称:" label-width="50px">
+          <el-input clearable v-model="where.name" placeholder="请输入" />
+        </el-form-item>
+      </el-col>
+      <el-col v-bind="styleResponsive ? { lg: 6, md: 12 } : { span: 6 }">
+        <el-form-item label="牌号:">
+          <el-input clearable v-model="where.modle" placeholder="请输入" />
+        </el-form-item>
+      </el-col>
+      <el-col v-bind="styleResponsive ? { lg: 7, md: 12 } : { span: 7 }">
+        <div class="ele-form-actions">
+          <el-button
+            type="primary"
+            icon="el-icon-search"
+            class="ele-btn-icon"
+            @click="search"
+            size="small"
+          >
+            查询
+          </el-button>
+           <el-button @click="reset"
+             icon="el-icon-refresh-left"
+             size="small"
+             type="primary"
+           >重置</el-button>
+           <el-button
+             size="small"
+             type="primary"
+             icon="el-icon-download"
+             class="ele-btn-icon"
+           >
+             导出
+           </el-button>
+        </div>
+      </el-col>
+    </el-row>
+  </el-form>
+</template>
+
+<script>
+  import { login } from '@/api/login';
+  export default {
+    data() {
+      // 默认表单数据
+      const defaultWhere = {
+        name: '',
+        groupId: ''
+      };
+      return {
+        // 表单数据
+        where: { ...defaultWhere }
+      };
+    },
+    computed: {
+      // 是否开启响应式布局
+      styleResponsive() {
+        return this.$store.state.theme.styleResponsive;
+      }
+    },
+    methods: {
+      /* 搜索 */
+      search() {
+        console.log(this.where);
+        this.$emit('search', this.where);
+      },
+      /*  重置 */
+      reset() {
+        this.where = { ...this.defaultWhere };
+        this.search();
+      }
+    }
+  };
+</script>

src/views/ledgerAssets/material/detail.vue

@@ -0,0 +1,66 @@
+<template>
+  <div>
+    <!-- tab切换 -->
+<!--    <div class="switch">
+      <div class="switch_left">
+        <ul>
+          <li
+            v-for="item in tabOptions"
+            :key="item.key"
+            :class="{ active: activeComp == item.key }"
+            @click="activeComp = item.key"
+          >
+            {{ item.name }}
+          </li>
+        </ul>
+        <el-button size="small" @click="$router.go(-1)">返回</el-button>
+      </div>
+    </div> -->
+    <div class="content-wrapper">
+      <component :is="activeComp" :rowInfo="rowInfo"></component>
+    </div>
+  </div>
+</template>
+
+<script>
+import baseInfo from './components/baseInfo.vue'
+export default {
+  components: {
+    baseInfo
+  },
+  data () {
+    return {
+      activeComp: 'baseInfo',
+      tabOptions: [
+        { key: 'baseInfo', name: '舟皿信息' },
+      ],
+      rowInfo:null,
+    }
+  },
+  created () {
+     // this.rowInfo = JSON.parse(this.$route.query.row)
+  },
+  methods:{
+     // async getDetilInfo(id){
+     //   const res = await getDetails({id:id})
+     //   if (res.success){
+
+     //   }
+     // },
+  }
+
+}
+</script>
+
+<style lang="scss" scoped>
+.content-wrapper {
+  background-color: #fff;
+}
+.switch_left{
+  width:100%;
+  display:flex;
+  align-items:center;
+  justify-content: space-between;
+  padding-right:20px;
+}
+</style>

src/views/ledgerAssets/material/index.vue

@@ -0,0 +1,75 @@
+<template>
+  <div class="ele-body">
+     <el-card shadow="never" v-loading="loading">
+       <ele-split-layout
+         width="266px"
+         allow-collapse
+         :right-style="{ overflow: 'hidden' }"
+       >
+         <div>
+           <div class="ele-border-lighter sys-organization-list">
+             <AssetTree
+               @handleNodeClick="handleNodeClick"
+               :type="'2'"
+               :paramsType="'type'"
+               ref="treeList"
+             />
+           </div>
+         </div>
+         <template v-slot:content>
+           <material-list
+             v-if="current"
+             :root-id="current.id"
+           />
+         </template>
+       </ele-split-layout>
+     </el-card>
+  </div>
+</template>
+
+<script>
+  import AssetTree from '@/components/AssetTree';
+  import MaterialList from './components/material-list.vue';
+  import {
+    getBoatList
+  } from '@/api/ledgerAssets/boat.js';
+  export default {
+    components: {
+      AssetTree ,
+      MaterialList
+    },
+    data () {
+      return {
+        // 加载状态
+        loading: false,
+        // 表格选中数据
+        selection: [],
+        current:null
+      };
+    },
+    computed: {
+
+    },
+    methods: {
+      handleNodeClick (info) {
+        this.current = info
+      },
+    }
+  };
+</script>
+
+<style lang="scss" scoped>
+  .sys-organization-list {
+    height: calc(100vh - 264px);
+    box-sizing: border-box;
+    border-width: 1px;
+    border-style: solid;
+    overflow: auto;
+  }
+  .sys-organization-list :deep(.el-tree-node__content) {
+    height: 40px;
+    & > .el-tree-node__expand-icon {
+      margin-left: 10px;
+    }
+  }
+</style>