物资类型管理-相关功能开发

2024-08-13 18:53:03 +08:00 · 2024-08-13 18:53:03 +08:00 · 296ed51e45
parent 143a920733
commit 296ed51e45
17 changed files with 722 additions and 14 deletions
--- a/.env.development
+++ b/.env.development
@ -5,7 +5,7 @@ VUE_APP_TITLE = 博诺思管理系统
 ENV = 'development'

 # 博诺思管理系统/开发环境
-VUE_APP_BASE_API = '/prod'
+VUE_APP_BASE_API = '/dev-api'

 # 路由懒加载
 VUE_CLI_BABEL_TRANSPILE_MODULES = true
--- a/src/api/material/type.js
+++ b/src/api/material/type.js
@ -0,0 +1,25 @@
+/**
+ * 物资类型管理页面 API
+ */
+import request from '@/utils/request'
+
+/** 物资类型树查询 */
+export const queryMaTypeTreeListApi = (data) => {
+  return request.get('/material/maType/getMaTypeList', {
+    params: data
+  })
+}
+
+/** 树形下物资查询 */
+export const queryMaListApi = (data) => {
+  return request.get('/material/maType/getListByMaType', {
+    params: data
+  })
+}
+
+/** 新增时查询id */
+export const queryIdWhenAddMa = (data) => {
+  return request.get('/material/maType/addMaType', {
+    params: data
+  })
+}
--- a/src/api/system/common.js
+++ b/src/api/system/common.js
@ -0,0 +1,9 @@
+/** 公共接口 */
+import request from '@/utils/request'
+
+// 公共下拉选接口
+export const fetchSelOptApi = (data) => {
+  return request.get('/common/getSelectData', {
+    params: data
+  })
+}
--- a/src/components/TableModel/index.vue
+++ b/src/components/TableModel/index.vue
@ -94,12 +94,13 @@
            ref="tableRef"
            select-on-indeterminate
            style="width: 100%"
+            v-loading="loading"
        >
            <el-table-column
                type="selection"
                width="45"
                align="center"
-                v-if="selectionShow"
+                v-if="showSel"
            />
            <el-table-column
                width="55"
@ -169,11 +170,17 @@ export default {
            type: Function,
            default: () => function () {},
        },
-        /* 列表配置项 */
+        /** 列表配置项 */
        columnsList: {
            type: Array,
            default: () => [],
        },
+        /** 是否显示选择框 */
+        showSel: {
+            type: Boolean,
+            default: true,
+        },
+
    },
    computed: {
        /* 根据操作栏控制表头是否显示 */
@ -194,6 +201,7 @@ export default {
    },
    data() {
        return {
+            loading: false,
            // 列表接口查询参数
            queryParams: {
                pageNum: 1,
@ -227,6 +235,7 @@ export default {
        this.formLabel.map(e => {
            this.$set(this.queryParams, e.f_model, '')
        })
+        // Object.assign(this.queryParams, this.sendParams)
        this.getTableList()
    },
    updated() {
@ -236,9 +245,18 @@ export default {
    methods: {
        /** 获取列表数据 */
        async getTableList() {
+            this.loading = true
+            console.log(this.queryParams)
            const res = await this.requestApi(this.queryParams)
+            this.loading = false
            console.log(res, '列表数据')
-            if(res.code === 200) this.tableList = res.rows
+            if(res.code === 200) {
+              if(res.data) {
+                this.tableList = res.data.rows
+              } else {
+                this.tableList = res.rows
+              }
+            }
        },
        /** 查询按钮 */
        handleQuery() {
@ -277,6 +295,11 @@ export default {
                return width
            }
        },
+
+        queryTableList(params) {
+          Object.assign(this.queryParams, params)
+          this.getTableList()
+        }
    },
 }
 </script>
--- a/src/permission.js
+++ b/src/permission.js
@ -14,7 +14,7 @@ router.beforeEach((to, from, next) => {
  // next()
   NProgress.start()
  if (getToken()) {
-    console.log(getToken())
+    // console.log(getToken())
    to.meta.title && store.dispatch('settings/setTitle', to.meta.title)
    /* has token*/
    if (to.path === '/login') {
--- a/src/views/base/Mixins/common.js
+++ b/src/views/base/Mixins/common.js
@ -61,5 +61,14 @@ export const commonMixin = {
              this.$refs.tableRef.getTableList()
            }
        },
+        /** 手机号脱密处理 */
+        phoneCrypto(phoneNumber) {
+          let reg = /^(1[3-9][0-9])\d{4}(\d{4}$)/
+          let isMobile = reg.test(phoneNumber)
+          if (isMobile) {
+            return phoneNumber.replace(reg, "$1****$2")
+          }
+          return phoneNumber
+        }
    }
 }
--- a/src/views/base/agreement/config.js
+++ b/src/views/base/agreement/config.js
@ -18,7 +18,7 @@ export const columnsList = [
    { t_props: 'startTime', t_label: '开始日期', },
    // { t_props: 'itemType', t_label: '租赁期限（天）', },
    { t_props: 'authorizingPerson', t_label: '授权人', },
-    { t_props: 'authorizingPhone', t_label: '授权人电话', },
+    { t_props: 'authorizingPhone', t_label: '授权人电话', t_slot: 'authorizingPhone' },
    // { t_props: 'itemType', t_label: '租赁单位类型', },
    { t_props: 'url', t_label: '合同文件', t_slot: 'url' },
    { t_props: 'remark', t_label: '备注', },
--- a/src/views/base/agreement/index.vue
+++ b/src/views/base/agreement/index.vue
@ -33,6 +33,9 @@
            <template slot="url" slot-scope="{ data }">
              <img :src="data.url" style="width: 50px; height: 50px">
            </template>
+            <template slot="authorizingPhone" slot-scope="{ data }">
+              {{ phoneCrypto(data.authorizingPhone) }}
+            </template>
        </TableModel>

        <!-- 新增以及修改时的弹框 -->
--- a/src/views/base/customer/config.js
+++ b/src/views/base/customer/config.js
@ -1,13 +1,13 @@

 export const formLabel = [
-    { f_label: '单位名称', f_model: 'keyWords', f_type: 'ipt' },
+    { f_label: '单位名称', f_model: 'name', f_type: 'ipt' },
 ]
 export const columnsList = [
    { t_props: 'name', t_label: '单位名称', },
    { t_props: 'typeId', t_label: '单位类型' },
    { t_props: 'companyId', t_label: '所属分公司' },
    { t_props: 'materialClerk', t_label: '材料员', },
-    { t_props: 'phone', t_label: '联系电话', },
+    { t_props: 'phone', t_label: '联系电话', t_slot: 'phone' },
    { t_props: 'isActive', t_label: '状态', t_slot: 'isActive' },

 ]
--- a/src/views/base/customer/index.vue
+++ b/src/views/base/customer/index.vue
@ -35,6 +35,9 @@
            <template slot="isActive" slot-scope="{ data }">
              {{ data.isActive == '1' ? '启用' : '不启用' }}
            </template>
+            <template slot="phone" slot-scope="{ data }">
+              {{ phoneCrypto(data.phone) }}
+            </template>
        </TableModel>

        <!-- 新增以及修改时的弹框 -->
@ -54,15 +57,28 @@
 </template>

 <script>
-import { formLabel, columnsList, dialogConfig } from './config'
+import { columnsList, dialogConfig, formLabel } from './config'
 import { commonMixin } from '../mixins/common'
 import FormContactUnits from './components/form-contact-units.vue'
-import { queryContactUnitsListApi, deleteContactUnitsApi } from '@/api/base/customer'
+import { deleteContactUnitsApi, queryContactUnitsListApi } from '@/api/base/customer'
+
 export default {
    name: 'ContactUnits',
    mixins: [commonMixin], // 混入公共方法和数据
    components: { FormContactUnits },
-    methods: { queryContactUnitsListApi, deleteContactUnitsApi },
+    methods: {
+      queryContactUnitsListApi,
+      deleteContactUnitsApi,
+      // 手机号脱密
+      /* phoneCrypto(phoneNumber) {
+        let reg = /^(1[3-9][0-9])\d{4}(\d{4}$)/
+        let isMobile = reg.test(phoneNumber)
+        if (isMobile) {
+          return phoneNumber.replace(reg, "$1****$2")
+        }
+        return phoneNumber
+      } */
+    },
    data() {
        return {
            formLabel,
--- a/src/views/base/project/components/form-project.vue
+++ b/src/views/base/project/components/form-project.vue
@ -113,14 +113,17 @@
                </el-col>
                <el-col :span="12">
                    <el-form-item label="关联i8工程" prop="isMatch">
-                      <el-switch
+                      <span
+                        style="box-sizing: border-box; padding: 5px 10px; background-color: #00afff; color: #fff; border-radius: 10px"
+                      >{{ projectParams.proId === null || projectParams.proId === '' ? '未关联' : '已关联' }}</span>
+<!--                      <el-switch
                        v-model="projectParams.isMatch"
                        active-color="#13ce66"
                        inactive-color="#ff4949"
                        active-value="1"
                        inactive-value="0"
                      >
-                      </el-switch>
+                      </el-switch>-->
                    </el-form-item>
                </el-col>
            </el-row>
@ -153,6 +156,9 @@ import {
  addProjectApi,
  editProjectApi
 } from '@/api/base/project.js'
+import {
+  fetchSelOptApi
+} from '@/api/system/common'
 export default {
    name: 'FormProject',
    props: {
--- a/src/views/base/project/config.js
+++ b/src/views/base/project/config.js
@ -10,7 +10,7 @@ export const columnsList = [
    { t_props: 'isMatch', t_label: '是否匹配i8工程', t_slot: 'isMatch' },
    { t_props: 'htzt', t_label: '合同主体', },
    { t_props: 'manager', t_label: '项目经理', },
-    { t_props: 'phone', t_label: '联系电话', },
+    { t_props: 'phone', t_label: '联系电话', t_slot: 'phone' },
    { t_props: 'stats', t_label: '工程状态', },
    { t_props: 'remark', t_label: '备注', },
 ]
--- a/src/views/base/project/index.vue
+++ b/src/views/base/project/index.vue
@ -34,6 +34,9 @@
            <template slot="isMatch" slot-scope="{ data }">
              {{ data.proId == null ? '不匹配' : '匹配' }}
            </template>
+            <template slot="phone" slot-scope="{ data }">
+              {{ phoneCrypto(data.phone) }}
+            </template>
        </TableModel>

        <!-- 新增以及修改时的弹框 -->
--- a/src/views/material/mixins/common.js
+++ b/src/views/material/mixins/common.js
@ -0,0 +1,72 @@
+export const commonMixin = {
+    data() {
+        return {
+            // 修改时的数据源
+            editParams: null,
+        }
+    },
+    methods: {
+        /** 新建 */
+        handleAddData(level) {
+            if(level == null) {
+              this.$modal.msgError('请在左侧菜单选择设备类型！')
+            } else if(level >= 3) {
+              this.$modal.msgError('该类型无法添加子类型！')
+            } else {
+              this.editParams = null
+              this.dialogConfig.outerTitle = this.addDialogTitle
+              this.dialogConfig.outerVisible = true
+            }
+        },
+        /** 删除 */
+        handleDeleteData(id, method) {
+            this.$modal.confirm('是否确定删除').then(() => {
+                console.log('确定删除--', id)
+                method(id).then(res => {
+                  console.log(res)
+                  if(res.code === 200) {
+                    // this.$message.msgSuccess('操作成功！')
+                    this.$refs.tableRef.getTableList()
+                  }
+                }).catch(err => {})
+            })
+        },
+        /** 编辑 */
+        handleEditData(data) {
+            console.log(data)
+            this.editParams = data
+            this.dialogConfig.outerTitle = this.editDialogTitle
+            this.dialogConfig.outerVisible = true
+        },
+        /** 导入数据 */
+        handleImportData() {
+            console.log('导入--')
+        },
+        /** 导出数据 */
+        handleExportData(data, url, fileName) {
+          this.download(
+            url,
+            {
+              ...data
+            },
+            `${fileName}_${new Date().getTime()}.xlsx`,
+          )
+        },
+        /** 关闭外侧弹框 */
+        closeDialogOuter() {
+            this.dialogConfig.outerVisible = false
+        },
+        /** 关闭内侧弹框 */
+        closeDialogInner() {
+            this.dialogConfig.innerVisible = false
+        },
+
+        /** 关闭弹框  由表单组件通知父组件关闭弹框的自定义事件 */
+        closeDialog(type) {
+            this.dialogConfig.outerVisible = false
+            if(type) {
+              this.$refs.tableRef.getTableList()
+            }
+        },
+    }
+}
--- a/src/views/material/type/components/form-type.vue
+++ b/src/views/material/type/components/form-type.vue
@ -0,0 +1,330 @@
+<template>
+  <!-- 协议管理 新增、编辑 表单组件 -->
+  <div>
+    <!--  form-新增 level0 -->
+    <el-form
+      label-width="100px"
+      size="medium"
+      ref="typeParamsRefLv0"
+      :model="typeParamsLv0"
+      v-if="subSort === 1 && sendData.level === 0"
+    >
+      <el-form-item label="新增类型编码" prop="code">
+        <el-input v-model="typeParamsLv0.code" disabled />
+      </el-form-item>
+      <el-form-item label="新增类型名称" prop="name">
+        <el-input v-model="typeParamsLv0.name" />
+      </el-form-item>
+    </el-form>
+    <!--  form-新增 level1 -->
+    <el-form
+      label-width="100px"
+      size="medium"
+      ref="typeParamsRefLv1"
+      :model="typeParamsLv1"
+      v-if="subSort === 1 && sendData.level === 1"
+    >
+      <el-form-item label="新增类型编码" prop="code">
+        <el-input v-model="typeParamsLv1.code" disabled />
+      </el-form-item>
+    </el-form>
+    <!--  form-新增 level2 -->
+    <el-form
+      label-width="100px"
+      size="medium"
+      ref="typeParamsRefLv2"
+      :model="typeParamsLv2"
+      v-if="subSort === 1 && sendData.level === 2"
+    >
+      <el-form-item label="新增类型编码" prop="code">
+        <el-input v-model="typeParamsLv2.code" disabled />
+      </el-form-item>
+    </el-form>
+    <!--  form-修改  -->
+    <el-form
+      label-width="100px"
+      size="medium"
+      ref="typeEditParamsRef"
+      :model="typeEditParams"
+      :rules="typeEditParamsRules"
+      v-if="subSort === 2"
+    >
+      <el-form-item label="仓库信息" prop="store">
+        <el-select
+          v-model="typeEditParams.store"
+        >
+<!--          <el-option
+            v-for="item in unitSelRange"
+            :key="item.value"
+            :label="item.label"
+            :value="item.value"
+          >
+          </el-option>-->
+        </el-select>
+      </el-form-item>
+      <el-form-item label="施工类型" prop="constructionType">
+        <el-input v-model="typeEditParams.constructionType" />
+      </el-form-item>
+      <el-form-item label="物资名称" prop="materialName">
+        <el-input v-model="typeEditParams.materialName" />
+      </el-form-item>
+      <el-form-item label="物资类型" prop="materialType">
+        <el-input v-model="typeEditParams.materialType" />
+      </el-form-item>
+    </el-form>
+    <!--  新增-按钮群  -->
+    <div
+      v-if="subSort === 1"
+      style="display: flex; justify-content: right"
+    >
+      <el-button type="success" @click="onSubmitAdd(sendData.level)">确认</el-button>
+      <el-button
+        @click="
+              () => {
+                  this.$emit('closeDialog')
+              }
+          "
+      >取消</el-button
+      >
+    </div>
+    <!--  编辑-按钮群  -->
+    <div
+      v-if="subSort === 2"
+      style="display: flex; justify-content: right"
+    >
+      <el-button type="success" @click="onSubmitEdit()">确认</el-button>
+      <el-button
+        @click="
+              () => {
+                  this.$emit('closeDialog')
+              }
+          "
+      >取消</el-button
+      >
+    </div>
+  </div>
+</template>
+
+<script>
+import {
+  queryContactUnitsSelApi
+} from '@/api/base/customer'
+import {
+  queryProjectSelApi
+} from '@/api/base/project'
+import {
+  queryIdWhenAddMa
+} from '@/api/material/type'
+export default {
+  name: 'FormType',
+  props: {
+    editParams: {
+      type: Object,
+      default: () => null,
+    },
+    sendData: {
+      type: Object,
+      default: () => null
+    },
+    sendInfo: {
+      type: Object | Array,
+      default: () => null
+    }
+  },
+  created() {
+    console.log(this.sendData)
+    // if(this.extraData == null) this.$modal.msgError("请在左侧菜单选择设备类型！");
+  },
+  mounted() {
+    if (this.editParams) {
+      Object.assign(this.typeEditParams, this.editParams)
+      this.subSort = 2
+    } else {
+      this.subSort = 1
+      // 新增时调用查取id的接口
+      queryIdWhenAddMa({
+        id: this.sendData.id
+      }).then(res => {
+        console.log(res)
+        // 根据不同level置入表单中
+        switch(this.sendData.level) {
+          case 0:
+            this.typeParamsLv0.code = res.data.code
+            break;
+          case 1:
+            this.typeParamsLv1.code = res.data.code
+            break;
+          case 2:
+            this.typeParamsLv2.code = res.data.code
+            break;
+        }
+      }).catch(err => {})
+    }
+    console.log(this.subSort)
+  },
+  data() {
+    return {
+      subSort: null, // 提交类型：新增 1 / 修改 2
+      // 物资新增表单 Lv0
+      typeParamsLv0: {
+        code: undefined,
+        name: undefined,
+      },
+      // 物资新增表单 Lv1
+      typeParamsLv1: {
+        code: undefined
+      },
+      // 物资新增表单 Lv2
+      typeParamsLv2: {
+        code: undefined
+      },
+      // 物资修改表单
+      typeEditParams: {
+        store: '', // 仓库信息
+        constructionType: '', // 施工类型
+        materialName: '', // 物资名称
+        materialType: '', // 物资类型
+      },
+      fileList: [],
+      // 租赁单位下拉框
+      unitSelRange: [],
+      // 租赁工程下拉框
+      projSelRange: [],
+      // 校验规则
+      typeEditParamsRules: {
+        /* scrapNum: [
+            {
+                required: true,
+                message: '请选择租赁单位',
+                trigger: 'blur',
+            },
+        ],
+        pro_unit: [
+            {
+                required: true,
+                message: '请输入授权人',
+                trigger: 'blur',
+            },
+        ],
+        pro_type_of: [
+            {
+                required: true,
+                message: '请选择租赁工程',
+                trigger: 'blur',
+            },
+        ],
+        pro_type: [
+            {
+                required: true,
+                message: '请输入联系电话',
+                trigger: 'blur',
+            },
+        ], */
+      },
+    }
+  },
+  methods: {
+    /** 查询往来单位下拉框  */
+    queryUnitSel() {
+      queryContactUnitsSelApi().then(res => {
+        console.log(res)
+        this.unitSelRange = res.data.map(item => {
+          return {
+            label: item.name,
+            value: item.id
+          }
+        })
+      }).catch(err => {})
+    },
+    /** 查询租赁工程下拉框  */
+    queryProjSel() {
+      queryProjectSelApi().then(res => {
+        console.log(res)
+        this.projSelRange = res.data.map(item => {
+          return {
+            label: item.name,
+            value: item.id
+          }
+        })
+      }).catch(err => {})
+    },
+    /** 上传图片 */
+    imgUpLoad(param) {
+      console.log(param)
+      imgUpLoad(param).then(res => {
+        console.log(res, process.env.VUE_APP_BASE_API)
+        this.protocolParams.url = res.data.url
+      }).catch(err => {})
+    },
+    /** 确认按钮-新增 */
+    onSubmitAdd(level) {
+      switch(level) {
+        case 0:
+          console.log(this.typeParamsLv0)
+          break;
+        case 1:
+          console.log(this.typeParamsLv1)
+          break;
+        case 2:
+          console.log(this.typeParamsLv2)
+          break;
+      }
+      /* this.$refs.typeEditParamsRef.validate((valid) => {
+        if (valid) {
+          console.log('校验通过', this.typeEditParams)
+          // 1. 表单校验通过后调后台 Api
+          if(this.subSort === 1) {
+            addProtocolApi(this.protocolParams).then(res => {
+              console.log(res)
+            }).catch(err => {
+              console.log(err)
+            })
+          } else if(this.subSort === 2) {
+            editProtocolApi(this.protocolParams).then(res => {
+              console.log(res)
+            }).catch(err => {
+              console.log(err)
+            })
+          }
+          // 2. 成功之后通知父组件关闭弹框
+          this.$emit('closeDialog', true)
+        }
+      }) */
+    },
+    /** 确认按钮-编辑 */
+    onSubmitEdit() {
+      console.log(this.typeEditParams)
+      /* this.$refs.typeEditParamsRef.validate((valid) => {
+        if (valid) {
+          console.log('校验通过', this.typeEditParams)
+          // 1. 表单校验通过后调后台 Api
+          if(this.subSort === 1) {
+            addProtocolApi(this.protocolParams).then(res => {
+              console.log(res)
+            }).catch(err => {
+              console.log(err)
+            })
+          } else if(this.subSort === 2) {
+            editProtocolApi(this.protocolParams).then(res => {
+              console.log(res)
+            }).catch(err => {
+              console.log(err)
+            })
+          }
+          // 2. 成功之后通知父组件关闭弹框
+          this.$emit('closeDialog', true)
+        }
+      }) */
+    },
+  },
+}
+</script>
+
+<style scoped>
+::v-deep .el-select {
+  width: 100%;
+}
+::v-deep .el-form-item__label{
+  font-weight: normal;
+}
+</style>
--- a/src/views/material/type/config.js
+++ b/src/views/material/type/config.js
@ -0,0 +1,16 @@
+export const formLabel = [
+  { f_label: '类型名称', f_model: 'typeName', f_type: 'ipt' },
+]
+export const columnsList = [
+  { t_props: 'code', t_label: '类型编码', },
+  { t_props: 'typeId', t_label: '仓库信息' },
+  { t_props: 'constructionType', t_label: '施工类型' },
+  { t_props: 'materialType', t_label: '物资类型', },
+  { t_props: 'materialName', t_label: '物资名称', },
+  { t_props: 'specificationCode', t_label: '规格型号' },
+]
+export const dialogConfig = {
+  outerWidth: '40%',
+  outerTitle: '',
+  outerVisible: false,
+}
--- a/src/views/material/type/index.vue
+++ b/src/views/material/type/index.vue
@ -0,0 +1,196 @@
+<template>
+  <!-- 协议管理页面 -->
+  <div class="app-container">
+    <el-col :span="4" :xs="24" style="margin-right: 15px">
+      <div class="head-container">
+        <el-input
+          v-model="typeName"
+          placeholder="请输入类型名称"
+          clearable
+          maxlength="50"
+          size="small"
+          prefix-icon="el-icon-search"
+          style="margin-bottom: 20px"
+        />
+      </div>
+      <div class="head-container">
+        <el-tree
+          style="height: 700px; overflow: scroll"
+          :data="treeOptions"
+          :props="defaultProps"
+          :expand-on-click-node="false"
+          :filter-node-method="filterNode"
+          ref="tree"
+          node-key="id"
+          default-expand-all
+          highlight-current
+          @node-click="handleNodeClick"
+        >
+          <span class="custom-tree-node" slot-scope="{ node, data }" style="font-size: 14px">
+            <i v-if="node.level <= 2" class="el-icon-folder" style="color: #fabd16" />
+            <i v-else-if="node.level > 2" class="el-icon-document" style="color: #C0C0C0" />
+            {{ data.label }}
+          </span>
+        </el-tree>
+      </div>
+    </el-col>
+    <!-- 表格 -->
+    <TableModel
+      :formLabel="formLabel"
+      :columnsList="columnsList"
+      :request-api="queryMaListApi"
+
+      :show-sel="false"
+      ref="tableRef"
+
+      style="display: flex; flex-direction: column"
+    >
+      <template slot="btn" slot-scope="{ queryParams }">
+        <el-button type="primary" @click="handleAddData(transLevel)"
+        >新增</el-button>
+        <el-button @click="handleExportData(queryParams, 'base/agreement/export', '物资清单')"
+        >导出</el-button>
+      </template>
+      <template slot="handle" slot-scope="{ data }">
+        <el-button
+          type="primary"
+          size="mini"
+          @click="handleEditData(data)"
+        >编辑</el-button
+        >
+        <el-button
+          type="danger"
+          size="mini"
+          @click="handleDeleteData(data.id)"
+        >删除</el-button
+        >
+      </template>
+<!--      <template slot="url" slot-scope="{ data }">
+        <img :src="data.url" style="width: 50px; height: 50px">
+      </template>-->
+    </TableModel>
+
+    <!-- 新增以及修改时的弹框 -->
+    <DialogModel
+      :dialogConfig="dialogConfig"
+      @closeDialogOuter="closeDialogOuter"
+    >
+      <template slot="outerContent">
+        <!-- 新增以及修改数据的表单组件 -->
+        <FormType
+          @closeDialog="closeDialog"
+          :edit-params="editParams"
+          :send-data="transData"
+          :send-info="transInfo"
+        />
+      </template>
+    </DialogModel>
+  </div>
+</template>
+
+<script>
+import { formLabel, columnsList, dialogConfig } from './config'
+import { commonMixin } from '../mixins/common'
+import FormType from './components/form-type.vue'
+import {
+  queryMaTypeTreeListApi,
+  queryMaListApi
+} from '@/api/material/type'
+export default {
+  name: 'typeManage',
+  mixins: [commonMixin], // 混入公共方法和数据
+  components: {
+    FormType,
+  },
+  created() {
+    this.getTreeData()
+  },
+  watch: {
+    // 根据名称筛选部门树
+    typeName(val) {
+      this.$refs.tree.filter(val)
+    },
+  },
+  methods: {
+    // 获取树形数据
+    getTreeData() {
+      queryMaTypeTreeListApi().then(res => {
+        res.data.forEach(item => {
+          this.rootOpt[0].children.push(item)
+        })
+        this.treeOptions = this.rootOpt
+        // this.treeOptions = res.data
+      }).catch(err => {})
+    },
+    // 筛选节点 - 左侧树
+    filterNode(value, data) {
+      if (!value) return true
+      return data.label.indexOf(value) !== -1
+    },
+    // 节点单击事件 - 左侧树
+    handleNodeClick(data) {
+      console.log(data)
+      /* queryMaListApi({
+        typeId: data.id
+      }).then(res => {
+        this.transInfo = res.data.rows
+        console.log(this.transInfo)
+      }) */
+      this.transLevel = data.level
+      this.transData = data
+      this.$refs.tableRef.queryTableList({
+        typeId: data.id
+      })
+    },
+  },
+  data() {
+    return {
+      formLabel,
+      columnsList,
+      dialogConfig,
+      // 新建时弹框标题
+      addDialogTitle: '新增物资类型',
+      // 修改时弹框标题
+      editDialogTitle: '修改物资类型',
+
+      /** 树形组件数据 */
+      // 查询参数
+      queryParams: {
+        pageNum: 1,
+        pageSize: 10,
+        typeName: undefined,
+      },
+      // 类型名称
+      typeName: undefined,
+      // // 类型id
+      // sendData: {
+      //   typeId: undefined,
+      // },
+      // 树选项
+      treeOptions: undefined,
+      // 根级
+      rootOpt: [
+        {
+          companyId: null,
+          id: 0,
+          label: '宏源工业园仓库',
+          level: 0,
+          parentId: null,
+          children: []
+        }
+      ],
+      // 默认属性
+      defaultProps: {
+        children: 'children',
+        label: 'label',
+      },
+      // 查询右侧数据
+      queryMaListApi,
+      // 传递给表单的数据, level, 数据
+      transData: null,
+      transLevel: null,
+      transInfo: null
+    }
+  },
+}
+</script>