Merge branch 'master' of https://gitee.com/yuanchu_code/lims-front-end

yuyu

2023-08-08 0d452c10ee16e40a3ca3d176e5ebebcb4bd16a87

Merge branch 'master' of https://gitee.com/yuanchu_code/lims-front-end

 package.json

@@ -14,6 +14,7 @@
    "test:ci": "npm run lint && npm run test:unit"
  },
  "dependencies": {
    "af-table-column": "^1.0.3",
    "amfe-flexible": "^2.2.1",
    "axios": "0.18.1",
    "core-js": "3.6.5",

 src/api/rawMaterials/reportForInspection.js

@@ -10,9 +10,23 @@
}

// æ·»åŠ æ£€éªŒç”³è¯·å•
export function addInspection() {
export function addInspection(data) {
  return request({
    url: '/inspection/addInspection',
    method: 'post'
    method: 'post',
    headers: {
      'Content-Type': 'multipart/form-data'
    },
    data
  })
}

// æŸ¥è¯¢æ‰€æœ‰ç”³è¯·å•id查询样品列表
export function getInspectionMaterialListById(params) {
  return request({
    url: '/inspectionMaterialList/selectInspectionMaterialListById/' + params.inspectionId,
    method: 'get',
    params
  })
}


 src/api/standardLibrary.js

@@ -1,88 +1,5 @@
import request from '@/utils/request'

// æŸ¥è¯¢æ‰€æœ‰æ ‡å‡†æ•°æ®
export function getStandardsList() {
  return request({
    url: '/standards/list',
    method: 'get'
  })
}

// åˆ†é¡µæŸ¥è¯¢æ‰€æœ‰æ ‡å‡†æ•°æ®
export function getStandardsListOfPage(params) {
  return request({
    url: '/standards/list_page',
    method: 'get',
    params
  })
}

// æ·»åŠ ç±»åž‹
export function addStandards(data) {
  return request({
    url: '/standards/add',
    method: 'post',
    data
  })
}

// æ ¹æ®æ ‡å‡†æŸ¥è¯¢æ‰€æœ‰åž‹å· å‚æ•°IdOrNameOfSerialNumber， standardsId
export function getSerialNumberList(params) {
  return request({
    url: '/serial-number/list',
    method: 'get',
    params
  })
}

// æ·»åŠ åž‹å·
export function addSerialNumber(data) {
  return request({
    url: '/serial-number/add',
    method: 'post',
    data
  })
}

// æ ¹æ®åž‹å·æŸ¥è¯¢æ‰€æœ‰äº§å“è§„æ ¼ å‚æ•°serialNumberId， specificationsName
export function getSpecificationsList(params) {
  return request({
    url: '/specifications/list',
    method: 'get',
    params
  })
}

// æ·»åŠ äº§å“è§„æ ¼
export function addSpecifications(data) {
  return request({
    url: '/specifications/add',
    method: 'post',
    data
  })
}

// ç¼–辑产品规格
export function updateSpecifications(data) {
  return request({
    url: '/specifications/update',
    method: 'put',
    data
  })
}

// æ›´æ–°è§„格状态
export function updateSpeState(data) {
  return request({
    url: '/specifications/update_spe_state',
    method: 'put',
    data
  })
}

// è§„格详情页接口

// æ ¹æ®è§„æ ¼id查询所有物料 specificationsId
export function getMaterialList(params) {
  return request({
    url: '/material/list',
@@ -91,10 +8,19 @@
  })
}

// æ ¹æ®ç‰©æ–™id，获取对应的物料详情
export function getMaterialDetail(params) {
// èŽ·å–所有项目
export function getProductList(params) {
  return request({
    url: '/material/list_id',
    url: '/product/page',
    method: 'get',
    params
  })
}

// èŽ·å–所有父项目对应的子项目
export function getProductSonList(params) {
  return request({
    url: '/product/father',
    method: 'get',
    params
  })
@@ -109,65 +35,20 @@
  })
}

// ç¼–辑物料信息
export function updateMaterial(data) {
// æ·»åŠ æ ‡å‡†
export function addStandards(data) {
  return request({
    url: '/material/update',
    method: 'put',
    data
  })
}

// åˆ é™¤ç‰©æ–™ä¿¡æ¯
export function deleteMaterial(params) {
  return request({
    url: '/material/delete',
    method: 'delete',
    params
  })
}

// æ ¹æ®ç‰©æ–™id查询所有标准分类 specificationsId
export function getProductList(params) {
  return request({
    url: '/product/list',
    method: 'get',
    params
  })
}

// æ·»åŠ æ ‡å‡†åˆ†ç±»
export function addProduct(data) {
  return request({
    url: '/product/add',
    url: '/standards/add',
    method: 'post',
    data
  })
}

// æŸ¥è¯¢æ ‡å‡†åˆ†ç±»è¯¦æƒ…，对应的标准详情
export function getProductProductId(params) {
// æ·»åŠ è§„æ ¼
export function addSpecifications(data) {
  return request({
    url: '/product/productId',
    method: 'get',
    params
  })
}

// ç¼–辑子项目信息
export function updateProduct(data) {
  return request({
    url: '/product/update',
    method: 'put',
    url: '/specifications/add',
    method: 'post',
    data
  })
}

// åˆ é™¤å­é¡¹ç›®ä¿¡æ¯
export function deleteProduct(params) {
  return request({
    url: '/product/delete',
    method: 'delete',
    params
  })
}

 src/main.js

@@ -2,7 +2,8 @@

import 'normalize.css/normalize.css' // A modern alternative to CSS resets
import 'amfe-flexible'

import AFTableColumn from 'af-table-column'
Vue.use(AFTableColumn)
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
import locale from 'element-ui/lib/locale/lang/zh-CN' // lang i18n

 src/utils/request.js

@@ -47,11 +47,12 @@

    // if the custom code is not 20000, it is judged as an error.
    if (res.code !== 200) {
      Message({
        message: res.message || 'Error',
        type: 'error',
        duration: 5 * 1000
      })
      console.log(res.message || 'Error')
      // Message({
      //   message: res.message || 'Error',
      //   type: 'error',
      //   duration: 5 * 1000
      // })
      // 50008: Illegal token; 50012: Other clients logged in; 50014: Token expired;
      if (res.code === 50008 || res.code === 50012 || res.code === 50014) {
        // to re-login

 src/views/rawMaterials/reportForInspection/forInspectionDetail.vue

@@ -26,14 +26,18 @@
            </div> -->
        </div>
        <div class="message">
          <div class="message-item"><span><i class="el-icon-edit" />试验方法：</span></div>
          <!-- <div class="message-item"><span><i class="el-icon-edit" />试验方法：</span></div> -->
          <div class="message-item">
            <span><i class="el-icon-edit" />项目分类：</span>
            <span><i class="el-icon-edit" />检验类型：
              <span v-if="inspectionDetail.type===0">原材料检验</span>
              <span v-else-if="inspectionDetail.type===1">半成品检验</span>
              <span v-else-if="inspectionDetail.type===2">成品检验</span>
            </span>
          </div>
          <div class="message-item">
            <span><i class="el-icon-edit" />更新人：</span></div>
            <span><i class="el-icon-edit" />登记人：<el-tag>{{ inspectionDetail.userName }}</el-tag></span></div>
          <div class="message-item">
            <span><i class="el-icon-edit" />更新时间：</span></div>
            <span><i class="el-icon-edit" />登记日期：{{ inspectionDetail.createTime }}</span></div>
        </div>
      </div>
      <div class="card-main sample-list">
@@ -57,53 +61,58 @@
            style="width: 100%"
          >
            <el-table-column
              prop="applicationOrdernumber"
              label="申请单号"
              prop="materialNum"
              label="物料编号"
              min-width="200"
            />
            <el-table-column
              prop="typeofInspection"
              label="检验类型"
              prop="materialName"
              label="物料名称"
              min-width="200"
            />
            <el-table-column
              prop="objectofInspection"
              label="检验对象"
              label="物料属性"
              min-width="200"
            />
            <el-table-column
              prop="palceofObject"
              label="对象位置"
              prop="materialBatch"
              label="批次"
              min-width="200"
            />
            <el-table-column
              prop="name"
              label="对象名称"
              prop="materialReelNumber"
              label="盘号"
              min-width="200"
            />
            <el-table-column
              prop="date"
              label="登记日期"
              prop="specificationsSerialNumber"
              label="型号"
              min-width="200"
            />
            <el-table-column
              prop="registrant"
              label="登记人"
              label="规格"
              min-width="200"
            />
            <el-table-column
              prop="applicationTime"
              label="申请时间"
              label="入库数量"
              min-width="200"
            />
            <el-table-column
              prop="materialNum"
              label="送样数量"
              min-width="200"
            />
            <el-table-column
              label="操作"
              min-width="200"
              :fixed="true"
              fixed="right"
            >
              <template slot-scope="scope">
                <el-button type="text" size="small" @click="handleClick(scope.row)">查看</el-button>
                <el-button type="text" size="small">作废</el-button>
                <el-button type="text" size="small" @click="openChangeMaterial(scope.row)">编辑</el-button>
                <el-button type="text" size="small">删除</el-button>
              </template>
            </el-table-column>
          </el-table>
@@ -165,7 +174,7 @@
              </el-col>
            </el-row>
          </div>
          <el-row gutter="100" :style="{marginTop:'24px'}">
          <el-row :gutter="100" :style="{marginTop:'24px'}">
            <el-col :span="12">
              <el-form-item label="批次">
                <el-input placeholder="" />
@@ -177,7 +186,7 @@
              </el-form-item>
            </el-col>
          </el-row>
          <el-row gutter="100">
          <el-row :gutter="100">
            <el-col :span="12">
              <el-form-item label="盘号">
                <el-input placeholder="" />
@@ -189,7 +198,7 @@
              </el-form-item>
            </el-col>
          </el-row>
          <el-row gutter="100">
          <el-row :gutter="100">
            <el-col :span="12">
              <el-form-item label="规格/型号名称">
                <el-input placeholder="" />
@@ -201,7 +210,7 @@
              </el-form-item>
            </el-col>
          </el-row>
          <el-row gutter="100">
          <el-row :gutter="100">
            <el-col :span="12">
              <el-form-item label="生产指令号">
                <el-input placeholder="" />
@@ -213,14 +222,14 @@
              </el-form-item>
            </el-col>
          </el-row>
          <el-row gutter="100">
          <el-row :gutter="100">
            <el-col :span="12">
              <el-form-item label="电压等级">
                <el-input placeholder="" />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row gutter="100" :style="{flex:'1'}">
          <el-row :gutter="100" :style="{flex:'1'}">
            <el-col :span="24">
              <el-form-item label="备注">
                <el-input
@@ -232,7 +241,7 @@
            </el-col>
          </el-row>
          <el-form-item>
            <el-button type="primary" @click="onSubmit">立即创建</el-button>
            <el-button type="primary">立即创建</el-button>
            <el-button>取消</el-button>
          </el-form-item>
        </el-form>
@@ -243,7 +252,7 @@
        <!-- Left side tree structure -->
        <div class="tree-container">
          <span class="all"> å…¨éƒ¨</span>
          <el-tree :data="treeData" @node-click="handleNodeClick" ></el-tree>
          <el-tree :data="treeData" />
        </div>
        <!-- Right side material list -->
        <div class="table-container">
@@ -252,26 +261,27 @@
            :data="selectedNodeMaterials"
            style="width: 100%"
            highlight-current-row
            @row-click="handleSelectionChange"
            :header-row-class-name="headerBg"
            @row-click="handleSelectionChange"
            >
            <el-table-column
              label="物料编号"
              prop="number">
              prop="number"
            >
              <template slot-scope="scope">
                <el-radio v-model="radioSelected" :label="scope.row.number" @change.native='handleSelectionChange(scope.row)'>&nbsp;  </el-radio>
                <el-radio v-model="radioSelected" :label="scope.row.number" @change.native="handleSelectionChange(scope.row)">&nbsp;  </el-radio>
              </template>
            </el-table-column>
            <el-table-column prop="name" label="物料名称"></el-table-column>
            <el-table-column prop="name" label="物料名称" />
        </el-table>
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="pageParams.pageNo"
          :page-sizes="[10, 20, 30, 40]"
          :page-size="pageParams.pageSize"
          :total="pageParams.total"
          layout="total, sizes, prev, pager, next, jumper"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
        />
      </div>
      </div>
@@ -284,6 +294,7 @@
</template>

<script>
import { getInspectionMaterialListById } from '@/api/rawMaterials/reportForInspection'
export default {
  data() {
    return {
@@ -337,10 +348,24 @@
          name: '测试数据2'
        }],
      radioSelected: null,
      multipleSelection: ''
      multipleSelection: '',
      inspectionDetail: {}
    }
  },
  created() {
    // console.log(this.$route.query) ä¼ é€’的申请单对象详情
    this.inspectionDetail = JSON.parse(this.$route.query.inspectionDetail)
    this.getMaterialList()
  },
  methods: {
    openChangeMaterial(row) {
      console.log(row)
    },
    async getMaterialList() {
      const res = await getInspectionMaterialListById({ inspectionId: this.inspectionDetail.id })
      // console.log(res)
      this.sampleTable = res.data
    },
    handleSelectionChange(val) {
      console.log(val)
      this.radioSelected = val.number // é€‰ä¸­è¡Œçš„number

 src/views/rawMaterials/reportForInspection/index.vue

@@ -63,7 +63,13 @@
                prop="type"
                label="检验类型"
                min-width="200"
              />
              >
                <template slot-scope="scope">
                  <span v-if="scope.row.type===0">原材料检验</span>
                  <span v-else-if="scope.row.type===1">半成品检验</span>
                  <span v-else-if="scope.row.type===2">成品检验</span>
                </template>
              </el-table-column>
              <el-table-column
                prop="createTime"
                label="创建时间"
@@ -75,7 +81,7 @@
                min-width="200"
              />
              <el-table-column
                prop="registrant"
                prop="inspectUserId"
                label="检验人"
                min-width="200"
              />
@@ -131,7 +137,7 @@
            width="40%"
          >
            <div class="check-box">
              <el-radio-group v-model="type">
              <el-radio-group v-model="addInspectionType">
                <el-radio :label="0" border>原材料检验</el-radio>
                <el-radio :label="1" border>半成品检验</el-radio>
                <el-radio :label="2" border>成品检验</el-radio>
@@ -152,7 +158,7 @@
</template>

<script>
import { getInspectionList } from '@/api/rawMaterials/reportForInspection'
import { getInspectionList, addInspection } from '@/api/rawMaterials/reportForInspection'
export default {
  data() {
    return {
@@ -179,7 +185,7 @@
      pageSize: 10, // æ¯é¡µçš„数据条数
      radioValue: '全部',
      checkTypeVisible: false,
      type: 0
      addInspectionType: 0
    }
  },
  watch: {
@@ -192,26 +198,6 @@
      deep: true
    }
  },
  // beforeRouteEnter(to, from, next) {
  //   console.log(to, from)
  //   next()
  //   // åœ¨æ¸²æŸ“该组件的对应路由被 confirm å‰è°ƒç”¨
  //   // ä¸ï¼èƒ½ï¼èŽ·å–组件实例 `this`
  //   // å› ä¸ºå½“钩子执行前，组件实例还没被创建
  // },
  // beforeRouteUpdate(to, from, next) {
  //   console.log(to, from)
  //   if (to.name === 'ForInspectionDetail') this.showDetail = true
  //   this.$nextTick(() => {
  //     console.log(1)
  //     this.showDetail = true
  //   })
  //   next()
  //   // åœ¨å½“前路由改变，但是该组件被复用时调用
  //   // ä¸¾ä¾‹æ¥è¯´ï¼Œå¯¹äºŽä¸€ä¸ªå¸¦æœ‰åŠ¨æ€å‚数的路径 /foo/:id，在 /foo/1 å’Œ /foo/2 ä¹‹é—´è·³è½¬çš„时候，
  //   // ç”±äºŽä¼šæ¸²æŸ“同样的 Foo ç»„件，因此组件实例会被复用。而这个钩子就会在这个情况下被调用。
  //   // å¯ä»¥è®¿é—®ç»„件实例 `this`
  // },
  created() {
    this.getInspectionTableData()
  },
@@ -223,12 +209,26 @@
      const res = await getInspectionList({ pageSize: this.currentPage, countSize: this.pageSize })
      // this.inspectionTable = data
      console.log(res)
      this.inspectionTable = res.data
    },
    goToForInspectionDetail() {
      this.$router.push('/rawMaterials/reportForInspection/forInspectionDetail')
    async goToForInspectionDetail() {
      try {
        //
        const form = new FormData()
        form.append('type', this.addInspectionType)
        let { data: inspectionDetail } = await addInspection(form)
        // console.log(res)
        inspectionDetail = JSON.stringify(inspectionDetail)
        this.$message.success('添加成功')
        this.$router.push({ path: '/rawMaterials/reportForInspection/forInspectionDetail', query: { inspectionDetail }})
      } catch (error) {
        this.$message.error('添加失败')
      }
    },
    // æŸ¥çœ‹å¯¹åº”申请单详情
    handleClick(row) {
      console.log(row)
      const inspectionDetail = JSON.stringify(row)
      this.$router.push({ path: '/rawMaterials/reportForInspection/forInspectionDetail', query: { inspectionDetail }})
    },
    // æ¯é¡µæ¡æ•°æ”¹å˜æ—¶è§¦å‘ é€‰æ‹©ä¸€é¡µæ˜¾ç¤ºå¤šå°‘è¡Œ
    handleSizeChange(val) {
@@ -281,6 +281,8 @@
    height: 100%;
    display: flex;
    flex-direction: column;
    min-height: calc(100vh - 88px);
    padding: 15px;
  }
  .top-bar{
    margin: -25px;
@@ -333,6 +335,11 @@
          flex-direction: column;
          .el-table {
            flex: 1;
            display: flex;
            flex-direction: column;
            ::v-deep .el-table__body-wrapper{
              flex: 1;
            }
          }
          >div:nth-child(2){
            display: flex;

 src/views/standardLibrary/SpecificationDetails.vue

@@ -420,7 +420,7 @@
</template>

<script>
import { getMaterialList, getProductList, getProductProductId, addMaterial, addProduct, getMaterialDetail, updateMaterial, updateProduct, deleteMaterial, deleteProduct } from '@/api/standardLibrary'
import { getMaterialList, getProductProductId, addMaterial, addProduct, getMaterialDetail, updateMaterial, updateProduct, deleteMaterial, deleteProduct } from '@/api/standardLibrary'
export default {
  name: 'SpecificationDetail',
  data() {
@@ -516,29 +516,12 @@
      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)
      // å¾—到物料Id
      this.materialId = data.id
      this.getProjectTreeData(data)
    },
    // é¡¹ç›®åº“的节点点击
    async projectTreeClick(data, node, element) {

 src/views/standardLibrary/index.vue

@@ -6,12 +6,14 @@
          v-model="filterText"
          placeholder="输入关键字进行过滤"
        />
        <el-button type="text" @click="getAllStandard">全部</el-button>
        <el-button type="text">全部</el-button>
        <el-tree
          ref="tree"
          class="filter-tree"
          :data="standardTree"
          :props="defaultProps"
          node-key="id"
          highlight-current
          default-expand-all
          :filter-node-method="filterNode"
          :render-content="renderContent"
@@ -33,223 +35,68 @@
              <el-form-item>
                <el-button type="primary" @click="filteredTableData">查询</el-button>
                <el-button type="primary" plain @click="resetBtn">重置</el-button>
                <!-- <el-button type="text">高级搜索<i class="el-icon-arrow-down el-icon--right" /></el-button> -->
              </el-form-item>
            </el-form>
          </div>
          <div class="serve-btn">
            <el-button type="primary" icon="el-icon-plus" @click="showFormInfo">{{ selectedNodeType }}</el-button>
            <el-button type="primary" icon="el-icon-plus" @click="addTreeFormVisible = true">新增</el-button>
          </div>
        </div>
        <div class="table-box">
          <el-table
            ref="tableData"
            :cell-style="{textAlign: 'center'}"
            :header-cell-style="{border:'0px',background:'#f5f7fa',color:'#606266',boxShadow: 'inset 0 1px 0 #ebeef5',textAlign: 'center'}"
            row-key="id"
            max-height="680"
            :tree-props="{children: 'children', hasChildren: 'hasChildren'}"
            :cell-style="{textAlign: 'left'}"
            :header-cell-style="{border:'0px',background:'#f5f7fa',color:'#606266',boxShadow: 'inset 0 1px 0 #ebeef5',textAlign: 'left'}"
            :data="tableData"
            style="width: 100%"
          >
            <el-table-column
              type="index"
              label="序号"
              min-width="50"
            />
            <!-- å¤ç”¨ -->
            <el-table-column
              v-for="(item,index) in tablespecifications"
              :key="index"
              :prop="item.prop"
              :label="item.label"
              :min-width="item.minWidth"
            />
            <template v-if="showTableCurrent===2">
              <el-table-column
                prop="spe_state"
                label="状态"
                min-width="150"
              width="100px"
              >
                <template slot-scope="scope">
                  <el-tag
                    :type="scope.row.spe_state === 0 ? 'primary' : 'success'"
                    disable-transitions
                  >{{ scope.row.spe_state === 0 ? '已停用' : '已启用' }}</el-tag>
              <template v-if="scope.row.index+1" slot-scope="scope">
                {{ scope.row.index+1 }}
                </template>
              </el-table-column>
              <el-table-column
                label="操作"
                min-width="150"
              prop="father"
              label="名称"
              width="320px"
              >
                <template slot-scope="scope">
                  <el-button
                    type="text"
                    size="small"
                    :style="{marginRight:'8px'}"
                    @click="specificationDetails(scope.row)"
                  >查看</el-button>
                  <el-popover
                    v-model="scope.row.visible"
                    placement="top"
                    width="30"
                  >
                    <div style="text-align: center; margin: 0" @click=" getRowID(scope.row)">
                      <div>
                        <el-button size="mini" type="text" @click="dialogFormVisible4=true">编辑</el-button>
                      </div>
                      <div>
                        <el-button size="mini" type="text" @click="dialogFormVisible5 = true">停用</el-button>
                      </div>
                    </div>
                    <el-button slot="reference" type="text"><i class="el-icon-more" /></el-button>
                  </el-popover>
                <el-tag size="mini" :type="scope.row.father? '':'success'" :style="{borderRadius: '40%',marginRight: '12px'}">{{ scope.row.father? '01':'02' }}</el-tag> {{ scope.row.father || scope.row.name }}
                </template>
              </el-table-column>
            </template>
            <el-table-column
              prop="unit"
              label="单位"
              width="300px"
            />
            <el-table-column
              prop="required"
              label="标准"
              width="300px"
            />
            <el-table-column
              prop="internal"
              label="内控制"
              width="300px"
            />
          </el-table>
          <!-- å¼¹å‡ºè¡¨å•é¡µ -->
          <div>
            <!-- æ·»åŠ æ ‡å‡† -->
            <el-dialog title="添加标准" :visible.sync="dialogFormVisible1" width="33%">
              <el-form :model="standardForm" :rules="rulesStandard">
                <el-form-item label="标准号" label-width="100px" prop="standardnumber">
                  <el-input v-model="standardForm.standardnumber" autocomplete="off" />
                </el-form-item>
                <el-form-item label="标准名称" label-width="100px" prop="standardname">
                  <el-input v-model="standardForm.standardname" autocomplete="off" />
                </el-form-item>
                <el-form-item label="英文名称" label-width="100px" prop="standardenname">
                  <el-input v-model="standardForm.engname" autocomplete="off" />
                </el-form-item>
                <el-form-item label="父级分类" label-width="100px">
                  <el-select v-model="standardForm.type" placeholder="请选择">
                    <el-option label="原材料" value="0" />
                    <el-option label="电线电缆" value="1" />
                  </el-select>
                </el-form-item>
              </el-form>
              <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible1 = false">取 æ¶ˆ</el-button>
                <el-button type="primary" @click="submitForm">ç¡® å®š</el-button>
              </div>
            </el-dialog>
            <!-- æ·»åŠ åž‹å· -->
            <el-dialog title="添加型号" :visible.sync="dialogFormVisible2" width="30%">
              <el-form ref="form" :model="modelForm" :rules="rulesModel">
                <el-form-item label="型号" :label-width="formLabelWidth" prop="model">
                  <el-input v-model="modelForm.model" autocomplete="off" />
                </el-form-item>
                <el-form-item label="型号名称" :label-width="formLabelWidth" prop="modelname">
                  <el-input v-model="modelForm.modelname" autocomplete="off" />
                </el-form-item>
              </el-form>
              <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible2 = false">取 æ¶ˆ</el-button>
                <el-button type="primary" @click="submitForm()">ç¡® å®š</el-button>
              </div>
            </el-dialog>
            <!-- æ·»åŠ è§„æ ¼ -->
            <el-dialog title="添加规格" :visible.sync="dialogFormVisible3" width="30%">
              <el-form ref="form" :model="specificationForm" :rules="rulesspecification">
                <el-form-item label="规格名称" :label-width="formLabelWidth" prop="name">
                  <el-input v-model="specificationForm.name" autocomplete="off" />
                </el-form-item>
                <el-form-item label="规格编号" :label-width="formLabelWidth" prop="number">
                  <el-input v-model="specificationForm.number" autocomplete="off" />
                </el-form-item>
                <el-form-item label="上方填写生产指令号" :label-width="formLabelWidth" prop="instruct">
                  <el-input v-model="specificationForm.instruct" autocomplete="off" />
                </el-form-item>
                <el-form-item label="电压等级" :label-width="formLabelWidth">
                  <el-select v-model="specificationForm.voltageLevel" placeholder="请选择电压等级">
                    <el-option label="分类1" value="test" />
                    <el-option label="分类2" value="2" />
                    <el-option label="分类3" value="3" />
                  </el-select>
                </el-form-item>
                <el-form-item label="主线芯截面" :label-width="formLabelWidth">
                  <el-select v-model="specificationForm.crossSection" placeholder="请选择主线芯截面">
                    <el-option label="分类1" value="test" />
                    <el-option label="分类2" value="2" />
                    <el-option label="分类3" value="3" />
                  </el-select>
                </el-form-item>
                <el-form-item label="主线芯芯数" :label-width="formLabelWidth">
                  <el-select v-model="specificationForm.numberOfCores" placeholder="请选择主线芯芯数">
                    <el-option label="分类1" value="test" />
                    <el-option label="分类2" value="2" />
                    <el-option label="分类3" value="3" />
                  </el-select>
                </el-form-item>
              </el-form>
              <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible3 = false">取 æ¶ˆ</el-button>
                <el-button type="primary" @click="submitForm()">ç¡® å®š</el-button>
              </div>
            </el-dialog>
            <!-- ç¼–辑规格 -->
            <el-dialog title="编辑规格" :visible.sync="dialogFormVisible4" width="30%">
              <el-form ref="form" :model="editSpeForm" :rules="rulesspecification">
                <el-form-item label="规格名称" :label-width="formLabelWidth" prop="name">
                  <el-input v-model="editSpeForm.name" autocomplete="off" />
                </el-form-item>
                <el-form-item label="规格编号" :label-width="formLabelWidth" prop="number">
                  <el-input v-model="editSpeForm.number" autocomplete="off" />
                </el-form-item>
                <el-form-item label="上方填写生产指令号" :label-width="formLabelWidth" prop="instruct">
                  <el-input v-model="editSpeForm.instruct" autocomplete="off" />
                </el-form-item>
                <el-form-item label="电压等级" :label-width="formLabelWidth">
                  <el-select v-model="editSpeForm.voltageLevel" placeholder="请选择电压等级">
                    <el-option label="分类1" value="test" />
                    <el-option label="分类2" value="2" />
                    <el-option label="分类3" value="3" />
                  </el-select>
                </el-form-item>
                <el-form-item label="主线芯截面" :label-width="formLabelWidth">
                  <el-select v-model="editSpeForm.crossSection" placeholder="请选择主线芯截面">
                    <el-option label="分类1" value="test" />
                    <el-option label="分类2" value="2" />
                    <el-option label="分类3" value="3" />
                  </el-select>
                </el-form-item>
                <el-form-item label="主线芯芯数" :label-width="formLabelWidth">
                  <el-select v-model="editSpeForm.numberOfCores" placeholder="请选择主线芯芯数">
                    <el-option label="分类1" value="test" />
                    <el-option label="分类2" value="2" />
                    <el-option label="分类3" value="3" />
                  </el-select>
                </el-form-item>
                <el-form-item label="规格状态" :label-width="formLabelWidth">
                  <el-select v-model="editSpeForm.spe_state" placeholder="请选择规格状态">
                    <el-option label="停用" value="0" />
                    <el-option label="正常" value="1" />
                    <el-option label="草稿" value="-1" />
                  </el-select>
                </el-form-item>
              </el-form>
              <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible4 = false">取 æ¶ˆ</el-button>
                <el-button type="primary" @click="handleEdit">ç¡® å®š</el-button>
              </div>
            </el-dialog>
            <!-- åœç”¨ -->
            <el-dialog
              title="提示"
              :visible.sync="dialogFormVisible5"
              width="30%"
            >
              <span>确认停用吗？</span>
              <span slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible5 = false">取 æ¶ˆ</el-button>
                <el-button type="primary" @click="updateSpeState">ç¡® å®š</el-button>
              </span>
            </el-dialog>
            <!--  -->
          </div>
          <div>
            <!-- åˆ†é¡µå™¨ -->
            <el-pagination
              :current-page="pageParams.pageNo"
              :page-sizes="[10, 15, 20, 25]"
              :page-size="pageParams.pageNo"
              :page-size="pageParams.pageSize"
              layout="total, sizes, prev, pager, next, jumper"
              :total="pageParams.total"
              @size-change="handleSizeChange"
@@ -259,27 +106,51 @@
        </div>
      </div>
    </div>
    <el-dialog class="addTree" title="添加指标" width="28%" :visible.sync="addTreeFormVisible" @close="closeAddTreeForm">
      <el-form v-model="addTreeForm" label-position="top">
        <el-form-item label="上级">
          <el-cascader
            v-model="addTreeForm.addTypeArr"
            :options="formTypeOptions"
            :props="{ ...defaultProps,checkStrictly: true }"
            clearable
            @change="changeCascader"
          />
        </el-form-item>
        <el-form-item v-show="addTreeForm.addTypeArr.length<2" label="物料名称">
          <el-input v-model="addTreeForm.materialName" />
        </el-form-item>
        <el-form-item v-show="addTreeForm.addTypeArr.length<3" label="执行标准">
          <el-input v-model="addTreeForm.standardName" />
        </el-form-item>
        <el-form-item v-show="addTreeForm.addTypeArr.length<4" label="规格型号">
          <el-input v-model="addTreeForm.specificationsName" />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="subAddTreeForm">ç¡® å®š</el-button>
        <el-button @click="addTreeFormVisible = false">取 æ¶ˆ</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { getStandardsList, getSerialNumberList, getSpecificationsList, getStandardsListOfPage, addStandards, addSerialNumber, addSpecifications, updateSpecifications, updateSpeState } from '@/api/standardLibrary'
import { getMaterialList, getProductList, getProductSonList,
  addMaterial, addStandards, addSpecifications
} from '@/api/standardLibrary'
export default {
  data() {
    return {
      dialogFormVisible1: false,
      dialogFormVisible2: false,
      dialogFormVisible3: false,
      dialogFormVisible4: false,
      dialogFormVisible5: false,
      visible: false,
      addTreeFormVisible: false,
      filterText: '',
      // æ ‡å‡†åº“bom树
      standardTree: [],
      // bom的,默认值
      // bom的,默认配置值
      defaultProps: {
        children: 'children',
        label: 'label'
        label: 'name',
        value: 'id'
      },
      // æŸ¥è¯¢æ¡ä»¶
      searchData: {
@@ -291,83 +162,17 @@
      // åˆ†é¡µå‚æ•°
      pageParams: {
        pageNo: 1,
        pageSize: 10,
        pageSize: 12,
        total: 0
      },
      tablespecifications: [
      ],
      // é€‰ä¸­èŠ‚点对应的表格 0 æ˜¯æ ‡å‡†è¡¨ 1是型号表 2规格表
      showTableCurrent: 0,
      // é€‰ä¸­çš„节点数据
      selectNode: {},
      selectedNodeType: '添加标准',
      standardForm: [{
        standardnumber: '',
        standardname: '',
        engname: '',
        type: ''
      }],
      modelForm: [{
        model: '',
        modelname: ''
      }],
      specificationForm: [{
        name: '', // äº§å“è§„格名称
        number: '', // è§„格编号
        crossSection: '',
        numberOfCores: '',
        instruct: '',
        voltageLevel: ''
      }],
      editSpeForm: [{
        crossSection: '',
        instruct: '',
        name: '', // è§„格名称
        number: '', // è§„格编号
        numberOfCores: '',
        serialId: '', // åž‹å·ID
        spe_state: '',
        voltageLevel: ''
      }],
      formLabelWidth: '100px',
      rulesStandard: {
        standardnumber: [
          {
            required: true, message: '请输入标准号', trigger: 'blur'
      selectData: {},
      formTypeOptions: [],
      addTreeForm: {
        addTypeArr: []
          }
        ],
        standardname: [{
          required: true, message: '请输入标准名称', trigger: 'blur'
        }],
        standardenname: [
          { required: false, message: '请输入英文名称', trigger: 'blur' }
        ]
      },
      rulesModel: {
        model: [
          { required: true, message: '请输入型号', trigger: 'blur'
          }],
        modelname: [{
          required: true, message: '请输入型号名称', trigger: 'blur'
        }],
        parentclassification: [
          { required: true, message: '请输入', trigger: 'blur' }
        ]
      },
      rulesspecification: {
        number: [
          { required: true, message: '请输入规格编号', trigger: 'blur'
          }],
        name: [{
          required: true, message: '请输入规格名称', trigger: 'blur'
        }],
        instruct: [
          { required: true, message: '请输入上方填写生产指令号', trigger: 'blur' }
        ]
      },
      standardId: '', // èŽ·å–当前标准ID
      modelId: '', // èŽ·å–当前型号ID
      rowId: '' // èŽ·å–当前规格所在行ID
    }
  },
  watch: {
@@ -377,7 +182,6 @@
  },
  created() {
    this.getStandardTree()
    this.getAllStandard()
  },
  methods: {
    filterNode(value, data) {
@@ -386,175 +190,100 @@
    },
    // èŽ·å–bom树的标准数据
    async getStandardTree() {
      this.selectedNodeType = '添加标准'
      const { data: standard } = await getStandardsList()// èŽ·å–所有标准
      // console.log(standard)// èŽ·å–所有标准
      this.standardTree = standard.map(item => {
        item.serialNumber = item.serialNumber?.map(childrenItem => ({ ...childrenItem, label: childrenItem.name }))
        return { ...item, label: item.name, children: item.serialNumber }
      const { data } = await getMaterialList()
      console.log(data)
      this.standardTree = data.map(item => {
        let name = null
        switch (item.type) {
          case 1:
            name = '原材料'
            break
          case 2:
            name = '半成品'
            break
          case 3:
            name = '成品'
            break
        }
        return {
          ...item, id: item.type, name
        }
      })
      // console.log(this.standardTree)
      console.log(this.standardTree)
      // formTypeOptions
      // é»˜è®¤ç¬¬ä¸€ä¸ªå››çº§èŠ‚点搜索，新增配置项
      const treeOptions = JSON.parse(JSON.stringify(this.standardTree))
      this.getDefault(treeOptions, 0)
      console.log(treeOptions)
      this.formTypeOptions = treeOptions
      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)
      })
    },
    getDefault(arr, index) {
      for (const item of arr) {
        if (item.children && item.children?.length > 0) {
        // æœ‰å­èŠ‚点
          this.getDefault(item.children, index + 1)
          if (index === 2) {
            item.children = null
          }
        }
        // else {
        //   // if ('children' in item) {
        //   //   //
        //   // } else {
        //   //   // console.log(index, item)
        //   // }
        // }
      }
    },
    // ç‚¹å‡»bom树节点方法
    async nodeClick(data, node, element) {
      // console.log('data', data)
      // console.log('children' in data)
      // æ˜¯å­èŠ‚点
      if (node.level === 4) {
        // console.log(data, node)
        // å­˜ä¸‹é€‰ä¸­èŠ‚点
        this.selectData = data
        // eslint-disable-next-line prefer-const
        this.getTableByClick(data)
      }
      if (!('children' in data)) {
        // console.log('点击子节点', data)
        this.selectedNodeType = '添加规格'
        this.modelId = data.id
        this.selectNode = data
        // èŽ·å–点击子节点的表格
        await this.getSpecifications(data)
        return
      }
      // ä¸æ˜¯å­èŠ‚点
      this.selectedNodeType = '添加型号'
      this.standardId = data.id
      this.selectNode = data
      await this.getSerialNumber(data)
    },
    async getTableByClick(data) {
      // eslint-disable-next-line prefer-const
      let { data: { row, total }} = await getProductList({ pageNo: this.pageParams.pageNo, pageSize: this.pageParams.pageSize, specificationsId: data.id })
      // console.log(row)
      this.pageParams.total = total
      row = row.map((item, index) => ({ ...item, index }))
      for (const item of row) {
        if (item.children) {
          const res = await getProductSonList({ fatherName: item.father })
          item.children = res.data
          item.id = item.father
        }
      }
      this.tableData = row
    },
    specificationDetails(row) {
      // è·³è½¬äº§å“è§„格详情页
      this.$router.push(`/standardLibrary/SpecificationDetails/${row.id}`)
    },
    // èŽ·å–当前规格的行id
    getRowID(row) {
      // console.log(row.id)
      this.id = row.id
    },
    // èŽ·å–所有标准table
    async getAllStandard() {
      this.selectedNodeType = '添加标准'
      // console.log(this.pageParams)
      const { data: { row, total }} = await getStandardsListOfPage({ ...this.pageParams })
      // console.log('得到所有标准==>', row)
      this.pageParams.total = total
      this.tableData = row
      this.tablespecifications = [
        {
          prop: 'name',
          label: '标准名称',
          minWidth: '150px'
        },
        {
          prop: 'eng_name',
          label: '标准英文名称',
          minWidth: '150px'
        },
        {
          prop: 'createTime',
          label: '创建时间',
          minWidth: '150px'
        }
      ]
      this.showTableCurrent = 0
    },
    // èŽ·å–对应型号下的所有规格
    async getSerialNumber(data) {
      const { data: { row, total }} = await getSerialNumberList({ standardsId: data.id, ...this.pageParams })
      console.log('点击父节点', row)// æ ¹æ®æ ‡å‡†èŽ·å–对应标准下的规格
      this.tableData = row
      this.pageParams.total = total
      this.tablespecifications = [
        {
          prop: 'name',
          label: '型号名称',
          minWidth: '150px'
        }
      ]
      this.showTableCurrent = 1
    },
    // èŽ·å–标准下对应的所有型号
    async getSpecifications(data) {
      const { data: { row, total }} = await getSpecificationsList({ serialNumberId: data.id, ...this.pageParams })
      // console.log(row)
      this.tableData = row
      this.pageParams.total = total
      this.tablespecifications = [
        {
          prop: 'name',
          label: '产品名称',
          minWidth: '150px'
        },
        {
          prop: 'username',
          label: '更新人',
          minWidth: '100px'
        },
        {
          prop: 'updateTime',
          label: '更新时间',
          minWidth: '150px'
        },
        {
          prop: 'vel',
          label: '版本',
          minWidth: '150px'
        }
      ]
      this.showTableCurrent = 2
    },
    // å±•ç¤ºå¼¹å‡ºæ¡†
    showFormInfo() {
      if (this.selectedNodeType === '添加标准') {
        this.dialogFormVisible1 = true
      } else if (this.selectedNodeType === '添加型号') {
        this.dialogFormVisible2 = true
      } else {
        this.dialogFormVisible3 = true
      }
    },
    async submitForm() {
      if (this.showTableCurrent === 0) {
        await addStandards({ engName: this.standardForm.engname,
          id: this.standardForm.standardnumber,
          name: this.standardForm.standardname,
          type: parseInt(this.standardForm.type) })
        this.dialogFormVisible1 = false
      } else if (this.showTableCurrent === 1) {
        await addSerialNumber({ id: this.modelForm.model,
          name: this.modelForm.modelname,
          standardsId: this.standardId // å…³è”标准ID
        })
        this.dialogFormVisible2 = false
      } else {
        await addSpecifications({ crossSection: this.specificationForm.crossSection,
          instruct: this.specificationForm.instruct,
          name: this.specificationForm.name,
          number: this.specificationForm.number,
          numberOfCores: this.specificationForm.numberOfCores,
          serialId: this.modelId, // å…³è”型号ID
          voltageLevel: this.specificationForm.voltageLevel
        })
        this.dialogFormVisible3 = false
      }
    },

    // åˆ†é¡µæ¡ä»¶æ”¹å˜æ—¶åˆ¤æ–­éœ€è¦åˆ†é¡µæŸ¥è¯¢çš„方法
    judgment() {
      switch (this.showTableCurrent) {
        case 0:
          this.getAllStandard()
          break
        case 1:
          this.getSerialNumber(this.selectNode)
          break
        case 2:
          this.getSpecifications(this.selectNode)
          break
      }
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} æ¡`)
      this.pageParams.pageSize = val
      this.judgment()
      this.getTableByClick(this.selectData)
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`)
      this.pageParams.pageNo = val
      this.judgment()
      this.getTableByClick(this.selectData)
    },
    // æŸ¥è¯¢æŒ‰é’®
    filteredTableData() {
@@ -571,33 +300,13 @@
      this.searchData.keyword = ''
      this.tableData = this.oldtableData
    },
    // å¤„理编辑规格
    async handleEdit() {
      // console.log(this.id)
      await updateSpecifications({ crossSection: this.editSpeForm.crossSection,
        id: this.rowId,
        instruct: this.editSpeForm.instruct,
        name: this.editSpeForm.name,
        number: this.editSpeForm.number,
        numberOfCores: this.editSpeForm.numberOfCores,
        serialId: this.modelId, // å…³è”型号ID
        spe_state: this.editSpeForm.spe_state,
        voltageLevel: this.editSpeForm.spe_state })
      this.dialogFormVisible4 = false
    },
    // åœç”¨
    async updateSpeState() {
      await updateSpeState({ id: this.rowId,
        spe_state: '0' })
      this.dialogFormVisible5 = false
    },
    renderContent(h, { node, data, store }) {
      // console.log('data', data)
      // console.log('node', node)
      // åˆ¤æ–­æ˜¯å¦æ˜¯çˆ¶èŠ‚点或文件夹
      const isFolder = ('children') in data
      return (
        <span>
        <span class='tree-node'>
          {isFolder ? (
            <i
              class={node.expanded ? 'el-icon-folder-opened blue-folder' : 'el-icon-folder blue-folder'}
@@ -605,15 +314,68 @@
          ) : (
            <i class='el-icon-document blue-folder'></i>
          )}
          <span> {data.label}</span>
          <div class='tree-lable'>[{node.level}]  {data.name}</div>
        </span>
      )
    },
    async subAddTreeForm() {
      this.addTreeFormVisible = false
      console.log(this.addTreeForm.addTypeArr.length)
      let res = null
      try {
        switch (this.addTreeForm.addTypeArr.length) {
          case 1:
            console.log(this.addTreeForm)
            res = await addMaterial({ ...this.addTreeForm, type: this.addTreeForm.addTypeArr.pop() })
            break
          case 2:
            console.log(this.addTreeForm)
            res = await addStandards({ ...this.addTreeForm, materialId: this.addTreeForm.addTypeArr.pop() })
            break
          case 3:
            console.log(this.addTreeForm)
            res = await addSpecifications({ ...this.addTreeForm, standardId: this.addTreeForm.addTypeArr.pop() })
            break
    }
      } catch (error) {
        this.$message.error('添加失败')
      }

      console.log(res)
      this.$message.success('添加成功')
      this.addTreeForm = {}
      this.getStandardTree()
      this.getTableByClick(this.selectData)
    },
    changeCascader(data) {
      console.log(data)
      this.addTreeForm.addTypeArr = data
    },
    closeAddTreeForm() {
      this.addTreeForm = {
        addTypeArr: []
      }
      console.log(this.addTreeForm)
    }
    /** è¡¨æ ¼æŸè¡Œç‚¹å‡»äº‹ä»¶ */
    // handleRowClick(row, column, event) {
    //   // åˆ¤æ–­å½“前行是否有子集，若没有则结束处理
    //   // console.log(row)
    //   if (!row.children) return
    //   this.$refs.tableData.toggleRowExpansion(row)
    // }
  }
}
</script>

<style lang="scss" scoped>

// el-table表格对齐
::v-deep .el-table__row:not([class*="el-table__row--level-"]) {
  td:nth-child(2){
    padding-left: 23px !important;
  }
}
// .dialogform {
//   transform: translate(-50%, -50%);
//   top: 50% !important;
@@ -629,6 +391,7 @@
    display: flex;
    height: 100%;
    min-height: calc(100vh - 88px);
    max-height: calc(100vh - 88px);
    padding: 15px;
    >div{
      padding: 20px;
@@ -636,15 +399,30 @@
    }
    .library-bom{
      flex: 2;
      // width: 20%;
      // height: 100%;
      max-height: 100%;
      margin-right: 12px;
      overflow-y: scroll;
      .el-tree {
        // margin-top: 12px;
        ::v-deep .el-tree-node__content{
          height: 24px !important;
          font-size: 16px;
          display: inline-block !important;
          font-size: 18px;
          // display: inline-block !important;
          padding: 2px;
          color: #333;
          // color: #333;
          .tree-node{
            display: flex;
            align-items: center;
            height: 20px;
          }
          .tree-lable{
            height: 100%;
            line-height: 23px;
            font-size: 12px;
            padding-left: 8px;
          }
          .blue-folder{
            color: rgb(64, 158, 255)
          }
@@ -674,11 +452,14 @@
      // }
    }
    .library-table{
      // height: 100%;
      flex: 8;
      max-height: 100%;
      // flex: 8;
      margin-left: 12px;
      display: flex;
      flex-direction: column;

      // overflow-y: scroll;
      .table-header{
        display: flex;
        justify-content: space-between;
@@ -692,10 +473,15 @@
          // padding: 20px 20px 10px 20px;
          display: flex;
          flex-direction: column;
          justify-content: space-between;

          .el-table {
            flex: 1;
            // flex: 1;
            // max-height: 680px;
            // overflow-y: scroll;
          }
          >div:nth-child(2){
          >div:nth-child(3){
            // height: 20px;
            display: flex;
            justify-content: end;
            margin: 10px 0;
@@ -703,5 +489,13 @@
      }
    }
  }
  .addTree{
    .el-form-item{
      margin-bottom: 10px;
    }
    .el-cascader{
      width: 100%;
    }
  }
}
</style>

 src/views/trialManagement/entrust.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,15 @@
<template>
  <div class="entrust">
    å§”托检验
  </div>
</template>

<script>
export default {

}
</script>

<style>

</style>

 src/views/trialManagement/rawMaterials.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,228 @@
<template>
  <div class="raw-materials">
    <div class="content-main">
      <div class="top-bar">
        <el-form ref="form" v-model="searchData" :inline="true">
          <el-form-item label="材料编码">
            <el-input
              v-model="searchData.keyword"
              class="input-form"
              placeholder="请输入材料编码"
            >
              <i slot="prefix" class="el-input__icon el-icon-search" />
            </el-input>
          </el-form-item>
          <el-form-item label="材料名称">
            <el-input
              v-model="searchData.keyword"
              class="input-form"
              placeholder="请输入材料名称"
            >
              <i slot="prefix" class="el-input__icon el-icon-search" />
            </el-input>
          </el-form-item>
          <el-form-item label="状态">
            <el-select
              placeholder="请选择状态"
            />
          </el-form-item>
          <el-form-item label="来料日期">
            <el-select
              placeholder="请选择状态"
            />
          </el-form-item>
          <el-form-item>
            <el-button type="primary">查询</el-button>
            <el-button type="primary" plain>重置</el-button>
          </el-form-item>
        </el-form>
      </div>
      <div class="raw-materials-table">
        <!-- <div class="table-header">
          <div class="search-bar">
          </div>
        </div> -->
        <div class="table-box">
          <el-table
            ref="rawMaterialsTable"
            :max-height="800"
            :cell-style="{textAlign: 'center'}"
            :header-cell-style="{border:'0px',background:'#f5f7fa',color:'#606266',boxShadow: 'inset 0 1px 0 #ebeef5',textAlign: 'center'}"
            :data="rawMaterialsTable"
            style="width: 100%"
          >
            <el-table-column
              type="selection"
              max-width="55"
            />
            <el-table-column
              type="index"
              label="序号"
              max-width="200"
            />
            <el-table-column
              prop="createTime"
              label="来料日期"
              max-width="200"
            />
            <el-table-column
              prop="userName"
              label="供应商名称"
              max-width="200"
            />
            <el-table-column
              prop="inspectUserId"
              label="材料编码"
              max-width="200"
            />
            <el-table-column
              prop="inspectionStatus"
              label="材料名称"
              max-width="200"
            />
            <el-table-column
              prop="qualifiedState"
              label="规格型号"
              max-width="200"
            />
            <el-table-column
              prop="inspectStartTime"
              label="单位"
              max-width="200"
            />
            <el-table-column
              prop="inspectEndTime"
              label="数量"
              max-width="200"
            />
            <el-table-column
              prop="inspectEndTime"
              label="报检日期"
              max-width="200"
            />
            <el-table-column
              prop="inspectEndTime"
              label="检验人"
              max-width="200"
            />
            <el-table-column
              prop="inspectEndTime"
              label="检验日期"
              max-width="200"
            />
            <el-table-column
              prop="inspectEndTime"
              label="状态"
              max-width="200"
            />
          </el-table>
          <!-- åˆ†é¡µå™¨ -->
          <div>
            <el-pagination
              :current-page="currentPage"
              :page-sizes="[100, 200, 300, 400]"
              :page-size="pageSize"
              layout="total, sizes, prev, pager, next, jumper"
              :total="total"
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
            />
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      searchData: '',
      rawMaterialsTable: []
    }
  }
}
</script>

<style lang="scss" scoped>
.content-main{
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    min-height: calc(100vh - 88px);
    padding: 15px;
  }
  .top-bar{
    margin: -25px;
    background: #fff;
    display: flex;
    justify-content: space-between;
    padding: 5px 24px 0px 24px;
    .el-form{
        width: 100%;
        display: flex;
        >div{
            flex: 1;
        }
    }
  }
  .input-form{
    // width: 300px;
  }
  .retrieval{
  float: right;
  font-size: 14px;
  color: rgb(0, 120, 255);
  line-height: 40px;
 }
 .rightBtn {
  display: flex;
  justify-content: flex-end;
}

.getDataBtn, .createBtn {
  margin-left: 10px; /* Optional: Add some space between the buttons */
}
.raw-materials-table{
      background-color: #fff;
      flex: 1;
      max-width: 100%;
      margin-left: 0px;
      margin-right: 0px;
      margin-top: 50px;
      display: flex;
      flex-direction: column;
      .table-header{
        padding: 20px;
        display: flex;
        justify-content: space-between;
        .el-form-item{
          margin-bottom: 30px !important;
        }
      }
      .table-box{
          padding: 0px 20px;
          margin-top: 20px;
          flex: 1;
          background: #fff;
          // padding: 20px 20px 10px 20px;
          display: flex;
          flex-direction: column;
          .el-table {
            flex: 1;
            display: flex;
            flex-direction: column;
            ::v-deep .el-table__body-wrapper{
              flex: 1;
            }
          }
          >div:nth-child(2){
            display: flex;
            justify-content: end;
            margin: 10px 0;
          }
      }
    }
</style>