Merge branch 'master' of https://gitee.com/yuanchu_code/frontend-zhongtian-...

yuyu

2023-08-02 192a6c1536d3f9017343634c17dc300c6fd98ff6

Merge branch 'master' of https://gitee.com/yuanchu_code/frontend-zhongtian-ocean

 README.md

@@ -1,44 +1,3 @@
<<<<<<< HEAD
# å‰ç«¯ä¸­å¤©æµ·æ´‹

#### ä»‹ç»
{**以下是 Gitee å¹³å°è¯´æ˜Žï¼Œæ‚¨å¯ä»¥æ›¿æ¢æ­¤ç®€ä»‹**
Gitee æ˜¯ OSCHINA æŽ¨å‡ºçš„基于 Git çš„代码托管平台（同时支持 SVN）。专为开发者提供稳定、高效、安全的云端软件开发协作平台
无论是个人、团队、或是企业，都能够用 Gitee å®žçŽ°ä»£ç æ‰˜ç®¡ã€é¡¹ç›®ç®¡ç†ã€åä½œå¼€å‘。企业项目请看 [https://gitee.com/enterprises](https://gitee.com/enterprises)}

#### è½¯ä»¶æž¶æž„
软件架构说明


#### å®‰è£…教程

1.  xxxx
2.  xxxx
3.  xxxx

#### ä½¿ç”¨è¯´æ˜Ž

1.  xxxx
2.  xxxx
3.  xxxx

#### å‚与贡献

1.  Fork æœ¬ä»“库
2.  æ–°å»º Feat_xxx åˆ†æ”¯
3.  æäº¤ä»£ç 
4.  æ–°å»º Pull Request


#### ç‰¹æŠ€

1.  ä½¿ç”¨ Readme\_XXX.md æ¥æ”¯æŒä¸åŒçš„语言，例如 Readme\_en.md, Readme\_zh.md
2.  Gitee å®˜æ–¹åšå®¢ [blog.gitee.com](https://blog.gitee.com)
3.  ä½ å¯ä»¥ [https://gitee.com/explore](https://gitee.com/explore) è¿™ä¸ªåœ°å€æ¥äº†è§£ Gitee ä¸Šçš„优秀开源项目
4.  [GVP](https://gitee.com/gvp) å…¨ç§°æ˜¯ Gitee æœ€æœ‰ä»·å€¼å¼€æºé¡¹ç›®ï¼Œæ˜¯ç»¼åˆè¯„定出的优秀开源项目
5.  Gitee å®˜æ–¹æä¾›çš„使用手册 [https://gitee.com/help](https://gitee.com/help)
6.  Gitee å°é¢äººç‰©æ˜¯ä¸€æ¡£ç”¨æ¥å±•ç¤º Gitee ä¼šå‘˜é£Žé‡‡çš„栏目 [https://gitee.com/gitee-stars/](https://gitee.com/gitee-stars/)
=======
# vue_model

> A Vue.js project
@@ -60,4 +19,3 @@
```

For a detailed explanation on how things work, check out the [guide](http://vuejs-templates.github.io/webpack/) and [docs for vue-loader](http://vuejs.github.io/vue-loader).
>>>>>>> c1c41a4 (首次提交)

 src/App.vue

@@ -115,4 +115,76 @@
  .el-popper .popper__arrow{
    display: none ;
  }
/**修改全局的滚动条*/
/**滚动条的宽度*/
::-webkit-scrollbar {
    width: 8px;

}
::-webkit-scrollbar-thumb {
    background-color: #bdbfc4;
    border-radius: 3px;
}
/* å…¨å±€è¡¨æ ¼æ ·å¼ */
  .el-table th.el-table__cell ,
  .has-gutter .el-table__cell {
    background-color: #F0F1F5 !important;
    color: #333;
  }
  .has-gutter .el-table__cell .cell {
    font-size: 16px;
    font-weight: 500;
  }
   .cell {
    color:rgb(51, 51, 51);
    padding-left: 17px !important;
    font-size: 14px;
  }
  .cell span{
    font-size: 14px;
    font-weight: 400;
  }
  .el-table th.el-table__cell>.cell{
    font-size: 16px;
    font-weight: 400;
    color:rgb(51, 51, 51);
  }
/* å…¨å±€åˆ†é¡µå™¨æ ·å¼ */
  .el-pager .number {
    font-size: 14px;
    border: 1px solid rgba(0, 0, 0, 0.2);
    border-radius: 4px;
    margin: 0 2px;
    color: #999;
    font-weight: 500;
  }
  .el-pager .number.active {
    background-color: #004EA2;
    color: #fff;
    border: 0;
  }
  /* å…¨å±€æ¨¡æ€æ¡†æ ·å¼ */
  .el-dialog__header{
    box-sizing: border-box;
    height: 56px;
    border-bottom: 1px solid rgb(238, 238, 238);
    padding: 0px;
    display: flex;
    align-items: center;
  }
  .el-dialog__header::before{
    content: '';
    display: inline-block;
    width: 4px;
    height: 30.24px;
    background: rgb(0, 95, 201);
    border-radius:10px;
    margin-left: 32px;
    margin-right: 8.5px;
  }
  .el-dialog__header .el-dialog__title{
    font-size: 18px !important;
  }
  /* å…¨å±€è¾“入框样式 */
  /* å…¨å±€æŒ‰é’®æ ·å¼ */
</style>

 src/assets/api/controller.js

@@ -1,8 +1,18 @@
// æŠ€æœ¯ç®¡ç†-标准Bom
const standard = {
  selectTreeByMaterial: "material/selectTreeByMaterial", //查询物料的树
  selectRawInspectsList: "rawInspect/selectRawInspectsList",//查询原材料检验单列表
  selectProductByMaterial: "product/selectTreeByMaterial",//根据物料查询项目表格
  selectTechnologyByMaterial: "technology/select"
}


const url = {
  "enter": "user/enter", //登录
  "selectTreeByMaterial": "material/selectTreeByMaterial" //查询物料的树
  ...standard
}


export default function(Vue) {
  //添加全局API
  Vue.prototype.$api = {

 src/components/view/raw-ins.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,228 @@
<style scoped>
  .raw_ins {}

  .raw_ins .title .el-button {
    height: 32px;
    border: 1px solid rgba(190, 190, 190, 0.44);
    box-shadow: 0px 2px 4px rgba(220, 220, 220, 0.41);
    padding: 0 12px;
  }

  .raw_ins .title {
    margin-bottom: 10px;
    padding: 0 20px;
  }

  .choose {
    padding: 21px 24px;
    display: flex;
    align-items: center;
    background-color: #fff;
    border-bottom: 3px solid rgb(245, 247, 251);
  }

  .choose * {
    font-size: 14px;
  }

  .choose .el-button {
    height: 32px;
    border: 1px solid rgba(190, 190, 190, 0.44);
    box-shadow: 0px 2px 4px rgba(220, 220, 220, 0.41);
    padding: 0 12px;
  }

  .thing {
    width: calc(100% - 44px);
    height: calc(100% - 42px - 82px - 66px);
    background-color: #fff;
    overflow: auto;
    padding: 33px 22px;
  }

  .table_do {
    color: #004ea0;
    cursor: pointer;
  }
</style>
<style>
  .raw_ins .thing * {
    font-size: 14px;
  }

  .raw_ins .has-gutter .el-table__cell {
    background-color: #F0F1F5 !important;
    color: #333;
  }

  .raw_ins .has-gutter .el-table__cell .cell {
    font-size: 16px;
    font-weight: 500;
  }

  .raw_ins .cell {
    color: #333;
    padding-left: 17px !important;
  }

  .raw_ins .el-table__body-wrapper {
    height: 100%;
  }

  .raw_ins .el-table__body {
    height: 100%;
  }
</style>

<template>
  <div class="raw_ins">
    <div class="title">
      <el-row>
        <el-col :span="12" style="line-height: 32px;">原材料检验</el-col>
        <el-col :span="12" style="text-align: right;">
          <el-button type="primary" icon="el-icon-plus" style="background: #004EA2;">新增</el-button>
          <el-button icon="el-icon-download">删除</el-button>
        </el-col>
      </el-row>
    </div>
    <div class="choose">
      <span>来料日期：</span>
      <el-date-picker v-model="search.formTime" size="small" placeholder="请输入" style="width: 224px;margin-right: 30px;"
        clearable value-format="yyyy-MM-dd"></el-date-picker>
      <span>报检日期：</span>
      <el-date-picker v-model="search.createTime" size="small" placeholder="请输入"
        style="width: 224px;margin-right: 30px;" clearable value-format="yyyy-MM-dd"></el-date-picker>
      <span>检测状态：</span>
      <el-select v-model="search.insState" size="small" placeholder="请选择" style="width: 224px;margin-right: 30px;">
        <el-option label="全部" :value="2"></el-option>
        <el-option label="未检测" :value="0"></el-option>
        <el-option label="已检测" :value="1"></el-option>
      </el-select>
      <span>合格状态：</span>
      <el-select v-model="search.judgeState" size="small" placeholder="请选择" style="width: 224px;margin-right: 30px;">
        <el-option label="全部" :value="2"></el-option>
        <el-option label="不合格" :value="0"></el-option>
        <el-option label="合格" :value="1"></el-option>
      </el-select>
      <el-button size="mini" @click="clean()"><span>重 ç½®</span></el-button>
      <el-button size="mini" type="primary" style="background: #004EA2;" @click="selectRawInspectsList()"><span>查
          è¯¢</span></el-button>
    </div>
    <div class="thing">
      <el-table :data="tableData" border style="width: 100%;overflow-y: auto;min-height: calc(100% - 50px)"
        max-height="calc(100% - 50px)" @selection-change="handleSelectionChange" border default-expand-all
        :tree-props="{children: 'children', hasChildren: 'hasChildren'}" row-key="id">
        <el-table-column type="selection" width="50">
        </el-table-column>
        <el-table-column type="index" label="序号" width="70">
        </el-table-column>
        <el-table-column prop="formTime" label="来料日期">
        </el-table-column>
        <el-table-column prop="code" label="原材料编码">
        </el-table-column>
        <el-table-column prop="name" label="原材料名称">
        </el-table-column>
        <el-table-column prop="specifications" label="规格型号">
        </el-table-column>
        <el-table-column prop="unit" label="单位">
        </el-table-column>
        <el-table-column prop="number" label="数量">
        </el-table-column>
        <el-table-column prop="createTime" label="报检日期">
        </el-table-column>
        <el-table-column prop="userName" label="报检人">
        </el-table-column>
        <el-table-column prop="judgeState" label="合格状态" width="100">
          <template slot-scope="scope">
            <span style="color: #34BD66;" v-if="scope.row.judgeState==1">合格</span>
            <span style="color: #E84738;" v-else-if="scope.row.judgeState==0">不合格</span>
          </template>
        </el-table-column>
        <el-table-column prop="insState" label="检测状态" width="100">
          <template slot-scope="scope">
            <span style="color: #34BD66;" v-if="scope.row.insState==1">已检测</span>
            <span style="color: #E84738;" v-else-if="scope.row.insState==0">未检测</span>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="100">
          <template slot-scope="scope">
            <span class="table_do" @click="changeShowDetail">查看</span>
            <span class="table_do">打印</span>
          </template>
        </el-table-column>
      </el-table>
      <el-col style="height: 50px;display: flex;align-items: center;justify-content: right;">
        <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage"
          :page-sizes="[1,10, 20, 30, 50]" :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper"
          :total="countSize">
        </el-pagination>
      </el-col>
    </div>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        search: {
          formTime: null,
          createTime: null,
          insState: 2,
          judgeState: 2
        },
        tableData: [],
        selects: [],
        currentPage: 1,
        countSize: 0,
        pageSize: 10
      }
    },
    props:['goDetail'],
    mounted() {
      this.selectRawInspectsList()
    },
    methods: {
      handleSelectionChange(val) {
        this.selects = val;
      },
      handleSizeChange(val) {
        this.pageSize = val
        this.selectRawInspectsList()
      },
      handleCurrentChange(val) {
        this.currentPage = val
        this.selectRawInspectsList()
      },
      selectRawInspectsList() {
        this.axios.post(this.$api.url.selectRawInspectsList, {
          pageSize: this.currentPage,
          countSize: this.pageSize,
          formTime: this.search.formTime,
          createTime: this.search.createTime,
          insState: this.search.insState,
          judgeState: this.search.judgeState
        }).then(res => {
          this.tableData = res.data.data
          this.countSize = res.data.count
        })
      },
      clean() {
        this.selects = []
        this.currentPage = 1
        this.countSize = 0
        this.pageSize = 10
        this.search = {
            formTime: null,
            createTime: null,
            insState: 2,
            judgeState: 2
          },
          this.selectRawInspectsList()
      },
      changeShowDetail(){
        this.goDetail()
      }
    }
  }
</script>

 src/components/view/rawInsBox.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,34 @@

<style scoped>

</style>

<template>
  <div class="rawInsBox">
    <RawIns v-show="!showDetail" :goDetail="goDetail"></RawIns>
    <RawInsDetail v-show="showDetail" :goBack="goBack" :detail="detail"></RawInsDetail>
  </div>
</template>

<script>
import RawIns from './raw-ins.vue'
import RawInsDetail from './rawInsDetail.vue'
export default {
    components:{RawIns,RawInsDetail},
    data() {
        return {
            showDetail: false,
            detail:{}
        }
    },
    methods:{
        goDetail(detail) {
            this.showDetail = true
            this.detail = detail
        },
        goBack() {
            this.showDetail = false
        }
    }
}
</script>

 src/components/view/rawInsDetail.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,271 @@
<style scoped>
  .rawInsBox{
        height: 100%;
        width: 100%;
        overflow-y: scroll;
        display: flex;
        flex-direction: column;
  }
  .rawInsBox .title .el-button {
    height: 32px;
    border: 1px solid rgba(190, 190, 190, 0.44);
    box-shadow: 0px 2px 4px rgba(220, 220, 220, 0.41);
    padding: 0 12px;
  }
  .rawInsBox .title {
    margin-bottom: 10px;
    padding: 0 20px;
  }
  /* æ£€éªŒè¯¦æƒ… */
  .raw-detail-info{
    background: #fff;
    padding: 26px 0px 11px 80px;
  }
  .raw-detail-info >>>.el-form-item__label{

        color: rgb(51, 51, 51);
        font-family: å¾®è½¯é›…黑;
        font-size: 16px;
        font-weight: 400;
        letter-spacing: 0px;
  }
  .raw-detail-info .el-input{
        width: auto;
  }
  .raw-detail-info >>>.el-input__inner{
    width: 224px;
    height: 32px;
    box-sizing: border-box;
    background: rgb(238, 238, 238);
    border: 1px solid rgb(221, 221, 221);
    border-radius:4px;
  }
  .raw-detail-info .el-form-item{
    margin-bottom: 24px;
  }

  /* æ£€éªŒé¡¹ç›® */
  .raw-project-table{
    padding: 24px 14px;
    background: #fff;
    flex: 1;
    /* max-height: 360px; */
    /* overflow-y: hidden; */
  }
  /* æ£€éªŒç»“论 */
  .raw-conclusion-table{
    padding: 9px 14px;
    background: #fff;
  }
</style>


<template>
  <div class="rawInsBox">
    <div class="title">
      <el-row>
        <el-col :span="12" style="line-height: 32px;">原材料检验</el-col>
        <el-col :span="12" style="text-align: right;">
          <el-button icon="el-icon-download" @click="()=>{goBack()}">返 å›ž</el-button>
        </el-col>
      </el-row>
    </div>
    <div class="raw-detail-info">
        <el-form v-model="detail" label-position="right" label-width="120px" >
            <el-row>
                <el-col :span="7">
                    <el-form-item label="来料日期:">
                        <el-input></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="7">
                    <el-form-item label="规格型号:">
                        <el-input></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="7">
                    <el-form-item label="原材料编码:">
                        <el-input></el-input>
                    </el-form-item>
                </el-col>
            </el-row>
             <el-row>
                <el-col :span="7">
                    <el-form-item label="原材料名称:">
                        <el-input></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="7">
                    <el-form-item label="报检日期:">
                        <el-input></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="7">
                    <el-form-item label="单位:">
                        <el-input></el-input>
                    </el-form-item>
                </el-col>
            </el-row>
             <el-row>
                <el-col :span="7">
                    <el-form-item label="数量:">
                        <el-input></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="7">
                    <el-form-item label="报检人:">
                        <el-input></el-input>
                    </el-form-item>
                </el-col>
                
            </el-row>
        </el-form>
    </div>
    <div class="title">
      <el-row>
        <el-col :span="12" style="line-height: 32px;">检验项目</el-col>
      </el-row>
    </div>
    <div class="raw-project-table">
        <el-table
            :data="projectTable"
            style="width: 100%"
            max-height="320"
            >
            <el-table-column
                type="index"
                label="序号"
                width="100"
                >
            </el-table-column>
            <el-table-column
                prop="name"
                label="项目"
                width="212">
            </el-table-column>
            <el-table-column
                prop="address"
                label="单位"
                width="148">
            </el-table-column>
            <el-table-column
                prop="address"
                label="标准"
                width="254">
            </el-table-column>
            <el-table-column
                prop="address"
                label="内控值"
                width="291">
            </el-table-column>
            <el-table-column
                prop="address"
                label="检查值"
                width="371">
            </el-table-column>
            <el-table-column
                prop="address"
                label="试验设备"
                width="248"
                >
            </el-table-column>
            <el-table-column
                prop="address"
                label="结论"
                 width="98"
                >
            </el-table-column>
    </el-table>
    </div>
    <div class="title">
      <el-row>
        <el-col :span="12" style="line-height: 32px;">检验结论</el-col>
      </el-row>
    </div>
    <div class="raw-conclusion-table">
        <el-table :data="conclusionTable">
            <el-table-column
                prop="number"
                label="物料编号"
                width="353">
            </el-table-column>
            <el-table-column
                prop="number"
                label="物料名称"
                width="353">
            </el-table-column>
            <el-table-column
                prop="number"
                label="检验员"
                width="542">
            </el-table-column>
            <el-table-column
                prop="number"
                label="检验结论"
                width="362">
            </el-table-column>
             <el-table-column
                fixed="right"
                label="操作"
                width="120">
                <template slot-scope="scope">
                    <el-button type="text" size="small">上报</el-button>
                </template>
            </el-table-column>
        </el-table>
    </div>
  </div>
</template>

<script>
import RawIns from './raw-ins.vue'
export default {
    components:{RawIns},
    props:['goBack','detail'],
    created(){
        console.log(this.detail)
    },
    data() {
        return {
            conclusionTable:[
                {number:'物料名称'}
            ],
            projectTable:[
                {
            date: '2016-05-02',
            name: '王小虎',
            address: '上海市'
          }, {
            date: '2016-05-04',
            name: '王小虎',
            address: '上海市'
          }, {
            date: '2016-05-04',
            name: '王小虎',
            address: '上海市'
          }, {
            date: '2016-05-04',
            name: '王小虎',
            address: '上海市'
          }, {
            date: '2016-05-04',
            name: '王小虎',
            address: '上海市'
          }, {
            date: '2016-05-04',
            name: '王小虎',
            address: '上海市'
          }, {
            date: '2016-05-04',
            name: '王小虎',
            address: '上海市'
          }, {
            date: '2016-05-04',
            name: '王小虎',
            address: '上海市'
          }
            ]
        }
    },
}
</script>

 src/components/view/standard-table/technology.vue

@@ -37,24 +37,49 @@
  .standard .el-table__body {
    height: 100%;
  }
  .standard .el-table .el-table__row:not([class*="el-table__row--level-"]) td:nth-child(3){
    padding-left: 23px !important;
   }
</style>

<template>
  <div class="standard">
    <el-table :data="tableData" border style="width: 100%" @selection-change="handleSelectionChange" row-key="id" border
      default-expand-all :tree-props="{children: 'children', hasChildren: 'hasChildren'}">
    <el-table  :data="tableData" border style="width: 100%"  row-key="id" 
      :tree-props="{children: 'children', hasChildren: 'hasChildren'}">
      <el-table-column type="selection" width="50">
      </el-table-column>
      <el-table-column type="index" label="序号" width="75">
      <template v-if="tableType==1">
        <el-table-column type="index" label="序号" width="70">
        <template slot-scope="scope">
                {{ scope.row.index }}
        </template>
      </el-table-column>
      <el-table-column prop="date" label="项目" width="350">
      <el-table-column prop="name" label="项目">
        <template slot-scope="scope">
                <el-tag size="mini" :type="scope.row.index? '':'success'" :style="{borderRadius: '40%',marginRight: '12px'}">{{ scope.row.index? '01':'02'}}</el-tag>
                {{scope.row.name}}
        </template>
      </el-table-column>
      <el-table-column prop="name" label="单位" width="180">
      <el-table-column prop="unit" label="单位">
      </el-table-column>
      <el-table-column prop="address" label="标准值">
      <el-table-column prop="required" label="标准值">
      </el-table-column>
      <el-table-column prop="address" label="内控值">
      <el-table-column prop="internal" label="内控值">
      </el-table-column>
      </template>
      <template v-else>
        <el-table-column prop="name" label="工艺名称">
        </el-table-column>
        <el-table-column prop="device_group" label="设备组">
        </el-table-column>
        <el-table-column  label="匹配设备">
          <template>
            <el-button type="text">选择</el-button>
          </template>
        </el-table-column>
        <el-table-column prop="quota" label="工时定额">
        </el-table-column>
      </template>
    </el-table>
  </div>
</template>
@@ -63,68 +88,20 @@
  export default {
    data() {
      return {
        tableData: [{
          id: 1,
          date: '2016-05-02',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 å¼„'
        }, {
          id: 2,
          date: '2016-05-04',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1517 å¼„'
        }, {
          id: 3,
          date: '2016-05-01',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1519 å¼„',
          children: [{
              id: 31,
              date: '2016-05-01',
              name: '王小虎',
              address: '上海市普陀区金沙江路 1519 å¼„'
            }, {
              id: 32,
              date: '2016-05-01',
              name: '王小虎',
              address: '上海市普陀区金沙江路 1519 å¼„'
          }]
        }, {
          id: 4,
          date: '2016-05-03',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1516 å¼„'
        }],
        tableData1: [{
          id: 1,
          date: '2016-05-02',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 å¼„'
        }, {
          id: 2,
          date: '2016-05-04',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1517 å¼„'
        }, {
          id: 3,
          date: '2016-05-01',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1519 å¼„',
          hasChildren: true
        }, {
          id: 4,
          date: '2016-05-03',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1516 å¼„'
        }],
        selects: []
      }
    },
    mounted() {},
    props:['tableData','tableType'],
    created() {
      console.log(this.tableData,this.tableType)
    },
    mounted() {
      
    },
    methods: {
      handleSelectionChange(val) {
        this.selects = val;
      }
    }
  }
</script>
</script>

 src/components/view/standard.vue

@@ -12,6 +12,10 @@
    margin-bottom: 10px;
    padding: 0 20px;
  }
  
  .standard .title *{
    font-size: 16px;
  }

  .thing {
    width: 100%;
@@ -85,6 +89,10 @@
  .standard .title .el-button * {
    font-size: 14px;
  }
  
  .standard .title .el-button--default{
    color: #004EA2;
  }

  .standard .thing .left .el-tree--highlight-current .el-tree-node.is-current>.el-tree-node__content {
    background: rgba(58, 124, 253, 0.3);
@@ -101,9 +109,9 @@
  <div class="standard">
    <div class="title">
      <el-row>
        <el-col :span="12">标准BOM</el-col>
        <el-col :span="12" style="line-height: 32px;">标准BOM</el-col>
        <el-col :span="12" style="text-align: right;">
          <el-button type="primary" icon="el-icon-plus" style="background: #004EA2;">新增</el-button>
          <el-button type="primary" icon="el-icon-plus" style="background: #004EA2;" @click="bomAddModelVisible= true">新增</el-button>
          <el-button icon="el-icon-edit-outline">修改</el-button>
          <el-button icon="el-icon-delete">删除</el-button>
        </el-col>
@@ -128,18 +136,33 @@
        <div class="choose">
          <span>类型：</span>
          <el-select v-model="tableType" size="small" placeholder="请选择" style="width: 224px;margin-right: 52px;">
            <el-option value="工艺文件"></el-option>
            <el-option value="技术指标"></el-option>
            <el-option :value="0" label="工艺文件"></el-option>
            <el-option :value="1" label="技术指标"></el-option>
          </el-select>
          <span>{{tableType=='技术指标'?'项目：':'工艺名称：'}}</span>
          <span>{{tableType==1?'项目：':'工艺名称：'}}</span>
          <el-input v-model="searchName" size="small" placeholder="请输入" style="width: 224px;margin-right: 24px;" clearable></el-input>
          <el-button size="mini"><span>重 ç½®</span></el-button>
          <el-button size="mini" type="primary" style="background: #004EA2;"><span>查 è¯¢</span></el-button>
          <el-button size="mini" @click="()=>{searchName='';selectProductTableData()}"><span>重 ç½®</span></el-button>
          <el-button size="mini" type="primary" style="background: #004EA2;" @click="selectProductTableData"><span>查 è¯¢</span></el-button>
        </div>
        <div class="table">
          <technology></technology>
          <technology v-if="tableData.length!==0" :tableType="tableType" :tableData="tableData"></technology>
        </div>
      </div>
    </div>
    <div class="bom-add-model">
      <el-dialog
        title="BOM新增"
        :visible.sync="bomAddModelVisible"
        width="30%"
        :before-close="handleClose">
        <el-form>
          
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button @click="bomAddModelVisible = false">取 æ¶ˆ</el-button>
          <el-button type="primary" @click="bomAddModelVisible = false">ç¡® å®š</el-button>
        </span>
      </el-dialog>
    </div>
  </div>
</template>
@@ -150,6 +173,7 @@
    components: {technology},
    data() {
      return {
        // BOM树数据结构
        list: [{
          id: 0,
          name: "原材料",
@@ -167,13 +191,24 @@
          children: []
        }],
        search: null,
        tableType: "技术指标",
        searchName: ""
        // è¡¨æ ¼ç±»åž‹ 1：技术指标，0：工艺路线
        tableType: 1,
        // æŸ¥è¯¢æ¡ä»¶-名称
        searchName: "",
        // ç‚¹å‡»é€‰ä¸­æ ‘节点
        checkTreeNode: {},
        tableData:[],
        // æŽ§åˆ¶bom新增模态框是否显示
        bomAddModelVisible: false
      }
    },
    watch: {
      search(val) {
        this.$refs.tree.filter(val);
      },
      tableType(val){
        console.log(val)
        this.selectProductTableData()
      }
    },
    mounted() {
@@ -181,7 +216,10 @@
    },
    methods: {
      handleNodeClick(data) {
        console.log(data);
        // console.log(data);
        this.checkTreeNode = data
        // this.selectMaterialTree()
        this.selectProductTableData()
      },
      filterNode(value, data) {
        if (!value) return true;
@@ -210,7 +248,34 @@
              if (a.type == b.id) b.children = [a]
            })
          })
          this.$nextTick().then(() => {
          const firstNode = document.querySelector('.el-tree-node .el-tree-node__children .el-tree-node .el-tree-node__children .el-tree-node .el-tree-node__children .el-tree-node')
          firstNode.click()
          // console.log(firstNode)
          })
        })
        
      },
      async selectProductTableData() {
        switch (this.tableType) {
          case 0:
        const {data:technologyList} = await this.$axios.get(this.$api.url.selectTechnologyByMaterial,{params:{specificationId:this.checkTreeNode.id,technologyName:this.searchName}})
        this.tableData = technologyList    
            break;
          case 1:
        const {data:productList} = await this.$axios.get(this.$api.url.selectProductByMaterial,{params:{specifications:this.checkTreeNode.id,project:this.searchName}})
        productList.forEach((item,index)=>{
          item.name = item.father
          item.index = index+1
          item.id = item.father
          if(item.children.length===1){
            productList[index] = {...item.children[0],index: index+1,name:item.father}
          }
        })
        this.tableData = productList
            break;
        }
        console.log(this.tableData)
      }
    }
  }

 src/components/view/technical.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,265 @@

<style scoped>
  .technical{
    height: 100%;
    width: 100%;
  }
  .technical .title .el-button {
    height: 32px;
    border: 1px solid rgba(190, 190, 190, 0.44);
    box-shadow: 0px 2px 4px rgba(220, 220, 220, 0.41);
    padding: 0 12px;
  }

  .technical .title {
    margin-bottom: 10px;
    padding: 0 20px;
  }

/* æœç´¢å¤´éƒ¨æ ·å¼ */
.search-header{
  background: #fff;
  padding: 24px 32px;
}
.search-header .el-form-item{
  margin: 0px;
  font-size: 14px;
}
.search-header .el-form-item:nth-child(1){
  margin-right: 48px;
} 
.search-header .el-form-item:nth-child(2){
  margin-right: 24px;
} 
/* é‡ç½®å’ŒæŸ¥è¯¢ä¸¤ä¸ªæŒ‰é’®æ ·å¼ */
.search-header .el-form-item .el-button{
width: 65px;
height: 32px;
box-sizing: border-box;
background: rgb(255, 255, 255);
border: 1px solid rgb(217, 217, 217);
border-radius:2px;
padding: 0;
font-size: 14px;
}
.search-header .el-form-item .el-button:nth-child(2){
/* Rectangle 77 */
background: rgb(0, 78, 162);
color: #fff;
}
/* è¾“入框的样式 */
>>>.search-header .el-form-item .el-input .el-input__inner{
width: 224px;
height: 32px ;
box-sizing: border-box;
background: rgb(255, 255, 255);
border: 1px solid rgb(217, 217, 217);
border-radius:2px;
}


/* æŠ€æœ¯æ–‡ä»¶è¡¨æ ¼æ ·å¼ */
.technical-table{
  margin-top: 11px;
  height: calc(100% - 140px);
  background: #fff;
  padding: 23px 21px ;
  font-size: 14px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
}
/* .technical-table .el-table{
  overflow-y:scroll;
} */
.technical-table .table-box {
  flex: 1;
  overflow-y: scroll;
}
.technical-table .el-pagination{
  margin-top: 23px;
  display: flex;
  justify-content: end;
}
</style>


<template>
  <div class="technical">
    <div class="title">
      <el-row>
        <el-col :span="12">技术文件</el-col>
        <el-col :span="12" style="text-align: right;">
          <el-button  icon="el-icon-plus">生成项目书</el-button>
        </el-col>
      </el-row>
    </div>
    <div class="search-header">
      <el-form v-model="searchData" :inline="true">
        <el-form-item label="订单号:">
          <el-input v-model="searchData.number"></el-input>
        </el-form-item>
        <el-form-item label="下单日期:">
          <el-date-picker
            v-model="searchData.date"
            type="date"
            placeholder="选择日期">
          </el-date-picker>
        </el-form-item>
        <el-form-item>
                <el-button  plain @click="resetBtn">重 ç½®</el-button>
                <el-button  @click="filteredTableData">查 è¯¢</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div class="technical-table">
      <div class="table-box">
        <el-table
          border style="width: 100%"
          :data="technicalTable"
          >
          <el-table-column
          type="selection"
          width="78">
        </el-table-column>
          <el-table-column
            prop="date"
            label="订单号"
            width="124">
          </el-table-column>
          <el-table-column
            prop="name"
            label="工程名称"
            width="160">
          </el-table-column>
          <el-table-column
            prop="address"
            label="产品编码"
            width="168"
            >
          </el-table-column>
          <el-table-column
            prop="name"
            label="产品大类"
            width="128">
          </el-table-column>
          <el-table-column
            prop="address"
            label="规格型号"
            width="170">
          </el-table-column>
          <el-table-column
            prop="name"
            label="单位"
            width="100">
          </el-table-column>
          <el-table-column
            prop="address"
            label="数量"
            width="118"
            >
          </el-table-column>
          <el-table-column
            prop="name"
            label="下单人"
            width="114">
          </el-table-column>
          <el-table-column
            prop="address"
            label="下单日期"
            width="153"
            >
          </el-table-column>
          <el-table-column
            prop="address"
            label="交货日期"
            width="137">
          </el-table-column>
          <el-table-column
            prop="address"
            label="状态"
            width="85"
            >
          </el-table-column>
          <el-table-column
              fixed="right"
              label="操作"
              width="194">
              <template>
                <el-button type="text" size="small">查看详情</el-button>
                <el-button type="text" size="small">编辑附件</el-button>
              </template>
            </el-table-column>
      </el-table>
      </div>
      
      
    <el-pagination
      :current-page="1"
      :page-sizes="[100, 200, 300, 400]"
      :page-size="100"
      layout="total, sizes, prev, pager, next, jumper"
      :total="400">
    </el-pagination>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
       searchData:{
        number:'',
        date:''
       },
       technicalTable: [{
            date: '2016-05-02',
            name: '王小虎',
            address: '上海市'
          }, {
            date: '2016-05-04',
            name: '王小虎',
            address: '上海市'
          }, {
            date: '2016-05-01',
            name: '王小虎',
            address: '上海市'
          }, {
            date: '2016-05-03',
            name: '王小虎',
            address: '上海市'
          }, {
            date: '2016-05-03',
            name: '王小虎',
            address: '上海市'
          }, {
            date: '2016-05-03',
            name: '王小虎',
            address: '上海市'
          }, {
            date: '2016-05-03',
            name: '王小虎',
            address: '上海市'
          }, {
            date: '2016-05-03',
            name: '王小虎',
            address: '上海市'
          }, {
            date: '2016-05-03',
            name: '王小虎',
            address: '上海市'
          }, {
            date: '2016-05-03',
            name: '王小虎',
            address: '上海市'
          }, {
            date: '2016-05-03',
            name: '王小虎',
            address: '上海市'
          }
          ]
    }
  },
}
</script>

 src/main.js

@@ -89,18 +89,18 @@
})

// è·¯ç”±æ‹¦æˆªå™¨
router.beforeEach((to, from, next) => {
  // è·¯å¾„为product时验证是否登录，没有跳转至登录页面
  if (to.path.indexOf('/') > -1 && to.path.indexOf('/enter') != 0) {
    if (sessionStorage.getItem('token') == null || sessionStorage.getItem('token') == '' || sessionStorage.getItem(
        'token') == undefined) {
      next({
        path: '/enter'
      })
    }
  }
  next()
});
// router.beforeEach((to, from, next) => {
//   // è·¯å¾„为product时验证是否登录，没有跳转至登录页面
//   if (to.path.indexOf('/') > -1 && to.path.indexOf('/enter') != 0) {
//     if (sessionStorage.getItem('token') == null || sessionStorage.getItem('token') == '' || sessionStorage.getItem(
//         'token') == undefined) {
//       next({
//         path: '/enter'
//       })
//     }
//   }
//   next()
// });

new Vue({
  el: '#app',

 src/view/index.vue

@@ -282,7 +282,7 @@
            k: 2,
            v: "技术文件",
            i: "font icon-shouye",
            u: ""
            u: "technical"
          }]
        }, {
          k: 2,
@@ -292,7 +292,7 @@
            k: 3,
            v: "原材料检验",
            i: "font icon-shouye",
            u: ""
            u: "rawInsBox"
          }, {
            k: 4,
            v: "原材料不合格品",
@@ -330,14 +330,14 @@
            u: ""
          }]
        }],
        activeBox: 1,
        activeP: 1,
        tabActive: 1,
        activeBox: 0,
        activeP: 0,
        tabActive: 0,
        tabs: [{
          k: 1,
          v: "标准BOM",
          k: 0,
          v: "首页",
          i: "font icon-shouye",
          u: "standard"
          u: "index-index"
        }],
        upIndex: 0
      };