标准库的第三次提交

hailin

2023-07-21 17e62da2a097844b0f6f7a58926e7d0a40598d2c

标准库的第三次提交

 src/api/standardLibrary.js

@@ -58,3 +58,95 @@
    method: 'get'
  })
}

// 规格详情页接口

// 根据规格id查询所有物料 specificationsId
export function getMaterialList(params) {
  return request({
    url: '/material/list',
    method: 'get',
    params
  })
}

// 根据物料id，获取对应的物料详情
export function getMaterialDetail(params) {
  return request({
    url: '/material/list_id',
    method: 'get',
    params
  })
}

// 添加物料
export function addMaterial(data) {
  return request({
    url: '/material/add',
    method: 'post',
    data
  })
}

// 编辑物料信息
export function updateMaterial(data) {
  return request({
    url: '/material/update',
    method: 'put',
    data
  })
}

// 删除物料信息
export function deleteMaterial(data) {
  return request({
    url: '/material/delete',
    method: 'delete',
    data
  })
}

// 根据物料id查询所有标准分类 specificationsId
export function getProductList(params) {
  return request({
    url: '/product/list',
    method: 'get',
    params
  })
}

// 添加标准分类
export function addProduct(data) {
  return request({
    url: '/product/add',
    method: 'post',
    data
  })
}

// 查询标准分类详情，对应的标准详情
export function getProductProductId(params) {
  return request({
    url: '/product/productId',
    method: 'get',
    params
  })
}

// 编辑子项目信息
export function updateProduct(data) {
  return request({
    url: '/product/update',
    method: 'put',
    data
  })
}

// 删除子项目信息
export function deleteProduct(data) {
  return request({
    url: '/product/delete',
    method: 'delete',
    data
  })
}

 src/layout/components/Sidebar/SidebarItem.vue

@@ -4,10 +4,11 @@
      <app-link v-if="onlyOneChild.meta" :to="resolvePath(onlyOneChild.path)">

        <el-menu-item v-if="onlyOneChild.meta.show==false ?onlyOneChild.meta.show: true" :index="resolvePath(onlyOneChild.path)" :class="{'submenu-title-noDropdown':!isNest}">
        <!-- <el-menu-item :style="{width:'0px',height:'0px'}" v-if="onlyOneChild.meta.show==false ?onlyOneChild.meta.show: true" :index="resolvePath(onlyOneChild.path)" :class="{'submenu-title-noDropdown':!isNest}"> -->
          <!-- <template slot="title">
            <item v-if="item.meta" :icon="item.meta && item.meta.icon" :title="item.meta.title" />
          </template> -->
          <item :show="onlyOneChild.meta.show" :icon="onlyOneChild.meta.icon||(item.meta&&item.meta.icon)" :title="onlyOneChild.meta.title" />
          <item  :show="onlyOneChild.meta.show" :icon="onlyOneChild.meta.icon||(item.meta&&item.meta.icon)" :title="onlyOneChild.meta.title" />
          <span v-if="onlyOneChild.meta.title==='主页'">主页</span>
        </el-menu-item>
      </app-link>
@@ -101,3 +102,13 @@
  }
}
</script>
<style  scoped>
/* 文字 */
::v-deep.el-submenu.is-active > .el-submenu__title {
  color: #409eff !important;
}
/* icon图标也跟着变 */
::v-deep .el-submenu.is-active > .el-submenu__title i {
  color: #409eff !important;
}
</style>

 src/permission.js

@@ -1,64 +1,65 @@
// import router from './router'
// import store from './store'
// import { Message } from 'element-ui'
// import NProgress from 'nprogress' // progress bar
// import 'nprogress/nprogress.css' // progress bar style
// import { getToken } from '@/utils/auth' // get token from cookie
// import getPageTitle from '@/utils/get-page-title'
import router from './router'
import store from './store'
import { Message } from 'element-ui'
import NProgress from 'nprogress' // progress bar
import 'nprogress/nprogress.css' // progress bar style
import { getToken } from '@/utils/auth' // get token from cookie
import getPageTitle from '@/utils/get-page-title'

// NProgress.configure({ showSpinner: false }) // NProgress Configuration
NProgress.configure({ showSpinner: false }) // NProgress Configuration

// const whiteList = ['/login'] // no redirect whitelist
const whiteList = ['/login'] // no redirect whitelist

// router.beforeEach(async(to, from, next) => {
//   // start progress bar
//   NProgress.start()
router.beforeEach(async(to, from, next) => {
  // start progress bar
  NProgress.start()

//   // set page title
//   document.title = getPageTitle(to.meta.title)
  // set page title
  document.title = getPageTitle(to.meta.title)

//   // determine whether the user has logged in
//   const hasToken = getToken()
  // determine whether the user has logged in
  const hasToken = getToken()

//   if (hasToken) {
//     if (to.path === '/login') {
//       // if is logged in, redirect to the home page
//       next({ path: '/' })
//       NProgress.done()
//     } else {
//       const hasGetUserInfo = store.getters.name
//       if (hasGetUserInfo) {
//         next()
//       } else {
//         try {
//           // get user info
//           await store.dispatch('user/getInfo')
  if (hasToken) {
    if (to.path === '/login') {
      // if is logged in, redirect to the home page
      next({ path: '/' })
      NProgress.done()
    } else {
      const hasGetUserInfo = store.getters.name
      if (hasGetUserInfo) {
        next()
      } else {
        try {
          // get user info
          await store.dispatch('user/getInfo')

//           next()
//         } catch (error) {
//           // remove token and go to login page to re-login
//           await store.dispatch('user/resetToken')
//           Message.error(error || 'Has Error')
//           next(`/login?redirect=${to.path}`)
//           NProgress.done()
//         }
//       }
//     }
//   } else {
//     /* has no token*/
          next()
        } catch (error) {
          // remove token and go to login page to re-login
          // 重新刷新token
          await store.dispatch('user/resetToken')
          Message.error(error || 'Has Error')
          next(`/login?redirect=${to.path}`)
          NProgress.done()
        }
      }
    }
  } else {
    /* has no token*/

//     if (whiteList.indexOf(to.path) !== -1) {
//       // in the free login whitelist, go directly
//       next()
//     } else {
//       // other pages that do not have permission to access are redirected to the login page.
//       next(`/login?redirect=${to.path}`)
//       NProgress.done()
//     }
//   }
// })
    if (whiteList.indexOf(to.path) !== -1) {
      // in the free login whitelist, go directly
      next()
    } else {
      // other pages that do not have permission to access are redirected to the login page.
      next(`/login?redirect=${to.path}`)
      NProgress.done()
    }
  }
})

// router.afterEach(() => {
//   // finish progress bar
//   NProgress.done()
// })
router.afterEach(() => {
  // finish progress bar
  NProgress.done()
})

 src/router/index.js

@@ -70,7 +70,7 @@
        name: 'SpecificationDetails',
        // hidden: true,
        component: () => import('@/views/standardLibrary/SpecificationDetails'),
        meta: { title: '产品规格详情', icon: 'form', show: false, breadcrumb: false }
        meta: { title: '产品规格详情', icon: 'form', show: false }
      }
    ]
  },
@@ -304,7 +304,7 @@
        path: 'myBusiness',
        name: 'MyBusiness',
        component: () => import('@/views/personal/myBusiness/index'),
        meta: { title: '我的企业', icon: 'tree' }
        meta: { title: '我的企业', icon: 'tree', show: false }
      }
    ]
  },

 src/styles/element-ui.scss

@@ -114,3 +114,11 @@
.el-popover.el-popper{
  min-width: 60px !important;
}
// //对应子级，父级的样式
// .el-submenu.is-active > .el-submenu__title {
//   background: rgb(206, 169, 181) !important;
// }
// //当前选中子级的样式
// .is-active{
//   background: red !important;
// }

 src/styles/sidebar.scss

@@ -95,6 +95,10 @@
     .el-submenu__title{
        background-color: #ffffff !important;
        color: $menuActiveText !important;
        &:has(.is-active){
          background-color: #ffffff !important;
        color: $menuActiveText !important;
        }
      }

    }

 src/views/standardLibrary/SpecificationDetails.vue

@@ -2,12 +2,12 @@
  <div class="specificationDetail-main">
    <div class="page-header-tips">
      <div class="search-bar">
        <span :style="{marginRight:'12px', color:'#409EFF'}"> 产品名称：钢包钢心铝绞线</span>
        <el-tag type="primary"><i class="el-icon-info" :style="{marginRight:'4px', color:'#409EFF'}" />V12</el-tag>
        <span :style="{marginRight:'12px', color:'#409EFF'}"> 项目名称：{{ detailInfo.projectClassification }}</span>
        <!-- <el-tag type="primary"><i class="el-icon-info" :style="{marginRight:'4px', color:'#409EFF'}" />V12</el-tag> -->
      </div>
      <div class="serve-btn">
        <el-button type="primary" icon="el-icon-plus">编辑</el-button>
        <el-button type="primary" icon="el-icon-plus">删除</el-button>
        <!-- <el-button type="primary" icon="el-icon-plus">编辑</el-button>
        <el-button type="primary" icon="el-icon-plus">删除</el-button> -->
      </div>
    </div>
    <div class="content-main">
@@ -17,23 +17,52 @@
            <el-row>
              <el-col :span="19">
                <el-input
                  v-model="filterText"
                  v-model="searchData.keyword"
                  placeholder="输入关键字进行过滤"
                />
              </el-col>
              <el-col :span="5">
                <el-button type="primary" size="small"><i class="el-icon-plus" /></el-button>
                <el-button type="primary" size="small" @click="materialFormVisible = true"><i class="el-icon-plus" /></el-button>
              </el-col>
            </el-row>
          </div>
          <el-tree
            ref="tree"
            class="filter-tree"
            :data="data"
            :props="defaultProps"
            :data="materialTree"
            default-expand-all
            :filter-node-method="filterNode"
          />
            :highlight-current="true"
            node-key="id"
            :default-expanded-keys="materialTreeDefault"
            @node-click="materialTreeClick"
          >

            <span slot-scope="{ node, data }" class="custom-tree-node">
              <span>{{ node.label }}</span>
              <span>
                <el-popover
                  placement="top"
                  width="30"
                  trigger="click"
                >
                  <div style="text-align: center; margin: 0">
                    <div>
                      <el-button size="mini" type="text" @click="showChangeMaterial(data)">编辑</el-button>
                    </div>
                    <div>
                      <el-button size="mini" type="text">删除</el-button>
                    </div>
                  </div>
                  <el-button
                    slot="reference"
                    type="text"
                    size="mini"
                  ><i class="el-icon-more" /></el-button>
                </el-popover>
              </span>
            </span>
          </el-tree>
        </div>
        <div class="bom-item">
          <div class="bom-item-search">
@@ -45,18 +74,44 @@
                </div>
              </el-col>
              <el-col :span="5">
                <el-button type="primary" size="small" plain><i class="el-icon-plus" /></el-button>
                <el-button type="primary" size="small" plain @click="projectFormVisible = true"><i class="el-icon-plus" /></el-button>
              </el-col>
            </el-row>
          </div>
          <el-tree
            ref="tree"
            class="filter-tree"
            :data="item"
            :props="defaultProps"
            :data="projectTree"
            default-expand-all
            :filter-node-method="filterNode"
          />
            :highlight-current="true"
            :default-expanded-keys="projectTreeDefault"
            @node-click="projectTreeClick"
          >
            <span slot-scope="{ node,data }" class="custom-tree-node">
              <span>{{ node.label }}</span>
              <span>
                <el-popover
                  placement="top"
                  width="30"
                  trigger="click"
                >
                  <div style="text-align: center; margin: 0">
                    <div>
                      <el-button size="mini" type="text" @click="showChangeProject(data)">编辑</el-button>
                    </div>
                    <div>
                      <el-button size="mini" type="text">删除</el-button>
                    </div>
                  </div>
                  <el-button
                    slot="reference"
                    type="text"
                    size="mini"
                  ><i class="el-icon-more" /></el-button>
                </el-popover>
              </span>
            </span>
          </el-tree>
        </div>
      </div>
      <div class="specificationDetail-card">
@@ -66,23 +121,20 @@
              <span />
              <div>项目详情</div>
            </div>
            <div class="tips-btn">
            <!-- <div class="tips-btn">
              <span><i class="el-icon-edit" />操作：</span>
              <el-button type="text">编辑</el-button>
            </div>
            </div> -->
          </div>
          <div class="message">
            <div class="message-item"><span><i class="el-icon-edit" />用户名：</span>121212121212</div>
            <div class="message-item"><span><i class="el-icon-edit" />试验方法：{{ detailInfo.method }}</span></div>
            <div class="message-item">
              <span><i class="el-icon-edit" />姓名：</span>
              <el-tag type="primary"><i class="el-icon-info" :style="{marginRight:'4px', color:'#409EFF'}"/>{{ 'jack' }}</el-tag>
              <span><i class="el-icon-edit" />项目分类：{{ detailInfo.projectClassification }}</span>
            </div>
            <div class="message-item">
              <span><i class="el-icon-edit" />电话号码：</span>
              19825217196</div>
              <span><i class="el-icon-edit" />更新人：{{ detailInfo.userName }}</span></div>
            <div class="message-item">
              <span><i class="el-icon-edit" />邮箱：</span>
              1212112</div>
              <span><i class="el-icon-edit" />更新时间：{{ detailInfo.updateTime }}</span></div>
          </div>
        </div>
        <div class="card-main">
@@ -91,84 +143,449 @@
              <span />
              <div>测试标准</div>
            </div>
            <div class="tips-btn">
            <!-- <div class="tips-btn">
              <span><i class="el-icon-edit" />操作：</span>
              <el-button type="text">编辑</el-button>
            </div>
            </div> -->
          </div>
          <div class="message">
            <div class="message-item">
              <el-tag type="primary"><i class="el-icon-info" :style="{marginRight:'4px', color:'#409EFF'}"/>单位：欧姆</el-tag>
              单位：<el-tag type="primary">{{ detailInfo.unit }}</el-tag>
            </div>
            <div class="message-item">
              <span><i class="el-icon-edit" />招标人员要求：＜3444</span>
              <span><i class="el-icon-edit" />招标人员要求：{{ detailInfo.required }}</span>
            </div>
            <div class="message-item">
              <span><i class="el-icon-edit" />内控值：＜3444</span>
              1212112</div>
              <span><i class="el-icon-edit" />内控值：{{ detailInfo.internal }}</span></div>
          </div>
        </div>
      </div>
    </div>
    <!-- 添加以及修改的模态框 -->
    <el-dialog title="添加物料" :visible.sync="materialFormVisible">
      <el-form :model="addMaterialForm">
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="物料ID：" label-width="100px">
              <el-input v-model="addMaterialForm.id" autocomplete="off" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="物料名称：" label-width="100px">
              <el-input v-model="addMaterialForm.name" autocomplete="off" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="批次：" label-width="100px">
              <el-input v-model="addMaterialForm.batch" autocomplete="off" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="存放地：" label-width="100px">
              <el-input v-model="addMaterialForm.location" autocomplete="off" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="盘号：" label-width="100px">
              <el-input v-model="addMaterialForm.reelNumber" autocomplete="off" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="数量：" label-width="100px">
              <el-input v-model="addMaterialForm.num" autocomplete="off" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="12">
            <!-- <el-form-item label="关联规格：" label-width="100px">
              <el-input v-model="addMaterialForm.specificationsId" autocomplete="off" />
            </el-form-item> -->
          </el-col>
          <el-col :span="12">
            <el-form-item label="供应商：" label-width="100px">
              <el-input v-model="addMaterialForm.supplier" autocomplete="off" />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="addNewMaterial">确 定</el-button>
        <el-button @click="dialogFormVisible = false">取 消</el-button>
      </div>
    </el-dialog>
    <el-dialog title="添加子项目" :visible.sync="projectFormVisible">
      <el-form :model="addProjectForm">
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="父项目：" label-width="100px">
              <el-select
                v-model="addProjectForm.father"
                clearable
                filterable
                :allow-create="true"
                placeholder="请选择或输入父项目"
                @blur="productSelect"
              >
                <el-option
                  v-for="item in fatherOpetions"
                  :key="item.id"
                  :label="item.label"
                  :value="item.label"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="关联物料：" label-width="100px">
              <el-select
                v-model="addProjectForm.materialId"
                clearable
                placeholder="请选择或输入父项目"
              >
                <el-option
                  v-for="item in materialTree"
                  :key="item.id"
                  :label="item.label"
                  :value="item.id"
                />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="项目名称：" label-width="100px">
              <el-input v-model="addProjectForm.name" autocomplete="off" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="单位：" label-width="100px">
              <el-input v-model="addProjectForm.unit" autocomplete="off" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="招标人要求值：" label-width="100px">
              <el-input v-model="addProjectForm.required" autocomplete="off" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="内控值：" label-width="100px">
              <el-input v-model="addProjectForm.internal" autocomplete="off" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="试验方法：" label-width="100px">
              <el-input v-model="addProjectForm.method" autocomplete="off" />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="addNewProject">确 定</el-button>
        <el-button @click="projectFormVisible = false">取 消</el-button>
      </div>
    </el-dialog>
    <el-dialog title="修改物料" :visible.sync="changeMaterialFormVisible">
      <el-form :model="changeMaterialForm">
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="物料名称：" label-width="100px">
              <el-input v-model="changeMaterialForm.name" autocomplete="off" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="供应商：" label-width="100px">
              <el-input v-model="changeMaterialForm.supplier" autocomplete="off" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="批次：" label-width="100px">
              <el-input v-model="changeMaterialForm.batch" autocomplete="off" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="存放地：" label-width="100px">
              <el-input v-model="changeMaterialForm.location" autocomplete="off" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="盘号：" label-width="100px">
              <el-input v-model="changeMaterialForm.reelNumber" autocomplete="off" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="数量：" label-width="100px">
              <el-input v-model="changeMaterialForm.num" autocomplete="off" />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="changeMaterial">确 定</el-button>
        <el-button @click="changeMaterialFormVisible = false">取 消</el-button>
      </div>
    </el-dialog>
    <el-dialog title="修改子项目" :visible.sync="changeProjectFormVisible">
      <el-form :model="changeProjectForm">
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="父项目：" label-width="100px">
              <el-select
                v-model="changeProjectForm.father"
                clearable
                filterable
                :allow-create="true"
                placeholder="请选择或输入父项目"
                @blur="productSelect"
              >
                <el-option
                  v-for="item in fatherOpetions"
                  :key="item.id"
                  :label="item.label"
                  :value="item.label"
                />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="项目名称：" label-width="100px">
              <el-input v-model="changeProjectForm.name" autocomplete="off" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="单位：" label-width="100px">
              <el-input v-model="changeProjectForm.unit" autocomplete="off" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="招标人要求值：" label-width="100px">
              <el-input v-model="changeProjectForm.required" autocomplete="off" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="内控值：" label-width="100px">
              <el-input v-model="changeProjectForm.internal" autocomplete="off" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="试验方法：" label-width="100px">
              <el-input v-model="changeProjectForm.method" autocomplete="off" />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="changeProject">确 定</el-button>
        <el-button @click="projectFormVisible = false">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { getMaterialList, getProductList, getProductProductId, addMaterial, addProduct, getMaterialDetail, updateMaterial, updateProduct } from '@/api/standardLibrary'
export default {
  name: 'SpecificationDetail',
  data() {
    return {
      // 查找对应详情id
      id: '',
      specificationsId: '',
      // 默认值
      defaultProps: {
      materialDefaultProps: {
        children: 'children',
        label: 'label'
      },
      // 物料tree数据
      materialTree: [],
      // 标准详情分类
      data: [
        {
          id: 1,
          label: '一级 1'
        },
        {
          id: 2,
          label: '一级 1'
        },
        {
          id: 3,
          label: '一级 1'
        },
        {
          id: 4,
          label: '一级 1'
        }
      ],
      item: [{
        id: 1,
        label: '一级 1',
        children: [{
          id: 4,
          label: '二级 1-1',
          children: [{
            id: 9,
            label: '三级 1-1-1'
          }, {
            id: 10,
            label: '三级 1-1-2'
          }]
        }]
      }],
      projectTree: [],
      searchData: {
        keyword: ''
      },
      // 详情信息
      detailInfo: {},
      // 物料tree默认选中值
      materialTreeDefault: [],
      projectTreeDefault: [],
      materialFormVisible: false,
      changeMaterialFormVisible: false,
      projectFormVisible: false,
      changeProjectFormVisible: false,
      addMaterialForm: {},
      changeMaterialForm: {},
      addProjectForm: {},
      changeProjectForm: {},
      fatherOpetions: []
    }
  },
  // 为了选中第一层级下的第一个节点
  watch: {
    projectTreeDefault(newVal, oldVal) {
      // console.log(newVal)
      if (newVal) {
        this.$nextTick(() => {
          // console.log(document.querySelector('.el-tree-node__children .el-tree-node__content'))

          document
            .querySelector('.el-tree-node__children .el-tree-node__content')
            ?.click()
        })
      }
    },
    materialTreeDefault(newVal, oldVal) {
      // console.log(newVal)
      if (newVal) {
        this.$nextTick(() => {
          // console.log(document.querySelector('.el-tree-node__content'))
          document
            .querySelector('.el-tree-node__content')
            ?.click()
        })
      }
    }
  },
  created() {
    console.log(this.$route.params)
    // console.log(this.$route.params)
    // 这里加一个校验，如果没有params.id 返回标准库页面
    this.specificationsId = this.$route.params.id
    this.addMaterialForm.specificationsId = this.$route.params.id
    this.refreshData()
  },
  methods: {

    productSelect(e) {
      const value = e.target.value // 输入框值
      if (value) { // 你输入才有这个值 不为空，如果你下拉框选择的话 这个值为空
        this.addProjectForm.pcode = value
      }
    },
    // 刷新或初次获得数据
    refreshData() {
      this.getMaterialTreeData()
    },
    // tree树的过滤查询
    filterNode(value, data) {
      if (!value) return true
      return data.label.indexOf(value) !== -1
    },
    // 获取物料tree
    async getMaterialTreeData() {
      const { data } = await getMaterialList({ specificationsId: this.specificationsId })
      // console.log(data)
      this.materialTree = data.map(item => ({ ...item, label: item.name }))
      this.materialTreeDefault = [this.materialTree[0].id]
      console.log(this.materialTree, this.materialTreeDefault)
    },
    // 获取项目tree
    async getProjectTreeData(data) {
      //
      const { data: projectArr } = await getProductList({ materialId: data.id })
      // console.log(projectArr)
      projectArr.map((item, index) => {
        item.label = item.father
        item.id = index
        item.children = item.sonProduct.map(item => ({ ...item, label: item.name }))
      })
      this.projectTree = projectArr
      // 项目中默认选中的子项目
      console.log(this.projectTree)
      this.fatherOpetions = this.projectTree.map(item => ({ id: item.id, label: item.label }))
      console.log(this.fatherOpetions)
      this.projectTreeDefault = [this.projectTree[0]?.children[0]?.id]
    },
    // 物料库的节点点击
    materialTreeClick(data, node, element) {
      // 点击物料节点，查询对应的项目tree数据
      console.log(data)
      this.getProjectTreeData(data)
    },
    // 项目库的节点点击
    async projectTreeClick(data, node, element) {
      // 先判断点击的是父节点还是子节点
      if (('children' in data)) return
      console.log('子项目节点', data)
      //
      const { data: detailInfo } = await getProductProductId({ productId: data.id })
      // console.log('详情信息', detailInfo)
      this.detailInfo = detailInfo
      this.changeProjectForm = { ...detailInfo }
    },
    // 新增物料
    async addNewMaterial() {
      // console.log('产看添加物料参数：', this.addMaterialForm)
      // const res = await addMaterial(this.addMaterialForm)
      await addMaterial(this.addMaterialForm)
      // console.log(res)
      this.$message.success('添加物料成功')
      this.materialFormVisible = false
      this.refreshData()
    },
    // 新增项目
    async addNewProject() {
      console.log('查看添加的子项目参数', this.addProjectForm)
      const res = await addProduct(this.addProjectForm)
      console.log(res)
      this.$message.success('添加新项目成功')
      this.projectFormVisible = false
      this.refreshData()
    },
    // 修改物料
    async changeMaterial() {
      console.log('修改物料参数', this.changeMaterialForm)
      const res = await updateMaterial(this.changeMaterialForm)
      this.changeMaterialFormVisible = false
      this.$message.success('修改成功')
      this.refreshData()
      console.log(res)
    },
    // 修改项目
    async changeProject() {
      console.log('修改项目参数', this.changeProjectForm)
      const { data } = await updateProduct(this.changeProjectForm)
      console.log(data)
      this.changeMaterialFormVisible = false
      this.$message.success('修改成功')
      this.refreshData()
    },
    // 显示修改物料模态框同时获取需要修改物料信息
    async  showChangeMaterial(data) {
      const { data: materialInfo } = await getMaterialDetail({ materialId: data.id })
      for (const key in materialInfo) {
        // console.log(key, materialInfo[key])
        if (!materialInfo[key]) {
          // console.log(materialInfo[key])
          delete materialInfo[key]
        }
      }
      console.log(materialInfo)
      this.changeMaterialForm = materialInfo
      this.changeMaterialFormVisible = true
    },
    // 显示修改项目模态框
    showChangeProject(data) {
      // console.log('修改前', this.changeProjectForm)
      this.changeProjectForm.name = data.name
      // console.log('修改后', this.changeMaterialForm)
      this.changeProjectFormVisible = true
    }
  }
}
</script>
@@ -356,4 +773,20 @@
        }
    }
}

// 树节点的样式
.custom-tree-node {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 14px;
    padding-right: 8px;
    &>:nth-child(2){
      display: none;
    }
    &:hover >:nth-child(2){
      display: block;
    }
  }
</style>