标准库第二次修改的bug补交

hailin

2023-07-19 57edffda445efc23fd17752dbb36fc1b91c0716a

 src/views/standardLibrary/index.vue

@@ -6,24 +6,25 @@
          v-model="filterText"
          placeholder="输入关键字进行过滤"
        />
        <el-button type="text" @click="getAllStandard">全部</el-button>
        <el-tree
          ref="tree"
          class="filter-tree"
          :data="data"
          :data="standardTree"
          :props="defaultProps"
          default-expand-all
          :filter-node-method="filterNode"
        >
        </el-tree>
          @node-click="nodeClick"
        />
      </div>
      <div class="library-table">
        <div class="table-header">
          <div class="search-bar">
            <el-form ref="form" inline="true" :model="searchData">
            <el-form ref="form" :inline="true" :model="searchData">
              <el-form-item>
                <el-input
                  placeholder="请输入人员名称/原材料名称"
                  v-model="searchData.keyword"
                  placeholder="请输入人员名称/原材料名称"
                >
                  <i slot="prefix" class="el-input__icon el-icon-search" />
                </el-input>
@@ -41,10 +42,10 @@
        </div>
        <div class="table-box">
          <el-table
            ref="standardLibraryTable"
            ref="tableData"
            :cell-style="{textAlign: 'center'}"
            :header-cell-style="{border:'0px',background:'#f5f7fa',color:'#606266',boxShadow: 'inset 0 1px 0 #ebeef5',textAlign: 'center'}"
            :data="standardLibraryTable"
            :data="tableData"
            style="width: 100%"
          >
            <el-table-column
@@ -53,61 +54,66 @@
              min-width="50"
            />
            <el-table-column
              prop="name"
              label="产品名称"
              min-width="150"
              v-for="(item,index) in tablespecifications"
              :key="index"
              :prop="item.prop"
              :label="item.label"
              :min-width="item.minWidth"
            />
            <el-table-column
              prop="username"
              label="更新人"
              min-width="100"
            />
            <el-table-column
              prop="updateTime"
              label="更新时间"
              min-width="150"
            />
            <el-table-column
              prop="vel"
              label="版本"
              min-width="100"
            />
            <el-table-column
              prop="spe_state"
              label="状态"
              min-width="150"
            >
              <template slot-scope="scope">
                <el-tag
                  :type="scope.row.spe_state === 0 ? 'primary' : 'success'"
                  disable-transitions
                >{{ scope.row.spe_state === 0 ? '未同意' : '已同意' }}</el-tag>
              </template>
            </el-table-column>
            <el-table-column
              label="操作"
              min-width="150"
            >
              <template slot-scope="scope">
                <el-button
                  type="text"
                  size="small"
                  @click="handleClick(scope.row)"
                >查看</el-button>
                <el-button type="text" size="small"><i class="el-icon-more" /></el-button>
              </template>
            </el-table-column>
            <template v-if="showTableCurrent===2">
              <el-table-column
                prop="spe_state"
                label="状态"
                min-width="150"
              >
                <template slot-scope="scope">
                  <el-tag
                    :type="scope.row.spe_state === 0 ? 'primary' : 'success'"
                    disable-transitions
                  >{{ scope.row.spe_state === 0 ? '未同意' : '已同意' }}</el-tag>
                </template>
              </el-table-column>
              <el-table-column
                label="操作"
                min-width="150"
              >
                <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">
                      <div>
                        <el-button size="mini" type="text">编辑</el-button>
                      </div>
                      <div>
                        <el-button size="mini" type="text">停用</el-button>
                      </div>
                    </div>
                    <el-button slot="reference" type="text"><i class="el-icon-more" /></el-button>
                  </el-popover>
                </template>
              </el-table-column>
            </template>

          </el-table>
          <div>
            <el-pagination
              :current-page="pageParams.pageNo"
              :page-sizes="[1, 2, 3, 4]"
              :page-size="pageParams.pageNo"
              layout="total, sizes, prev, pager, next, jumper"
              :total="pageParams.total"
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="currentPage"
              :page-sizes="[100, 200, 300, 400]"
              :page-size="100"
              layout="total, sizes, prev, pager, next, jumper"
              :total="400">
            </el-pagination>
            />
          </div>
        </div>
      </div>
@@ -116,26 +122,15 @@
</template>

<script>
import { getStandardsList, getSerialNumberList, getSpecificationsList, getStandardsListOfPage } from '@/api/standardLibrary'
export default {
  data() {
    return {
      visible: false,
      filterText: '',
      // 标准库bom树
      data: [{
        id: 1,
        label: '一级 1',
        children: [{
          id: 4,
          label: '二级 1-1',
          children: [{
            id: 9,
            label: '三级 1-1-1'
          }, {
            id: 10,
            label: '三级 1-1-2'
          }]
        }]
      }],
      // 默认值
      standardTree: [],
      // bom的,默认值
      defaultProps: {
        children: 'children',
        label: 'label'
@@ -144,16 +139,49 @@
      searchData: {
        keyword: ''
      },
      standardLibraryTable: [
      tableData: [
        {
          id: 2,
          name: 'AB',
          updateTime: '2023-07-12 00:00:12',
          username: '小小',
          vel: 'V1.0',
          spe_state: 1
          spe_state: 1,
          visible: false
        },
        {
          id: 3,
          name: 'AB',
          updateTime: '2023-07-12 00:00:12',
          username: '小小',
          vel: 'V1.0',
          spe_state: 1,
          visible: false

        },
        {
          id: 4,
          name: 'AB',
          updateTime: '2023-07-12 00:00:12',
          username: '小小',
          vel: 'V1.0',
          spe_state: 1,
          visible: false

        }
      ]
      ],
      // 分页参数
      pageParams: {
        pageNo: 1,
        pageSize: 1,
        total: 3
      },
      tablespecifications: [
      ],
      // 选中节点对应的表格 0 是标准表 1是型号表 2规格表
      showTableCurrent: 0,
      // 选中的节点数据
      selectNode: {}
    }
  },
  watch: {
@@ -161,16 +189,144 @@
      this.$refs.tree.filter(val)
    }
  },
  created() {
    this.getStandardTree()
    this.getAllStandard()
  },
  methods: {
    filterNode(value, data) {
      if (!value) return true
      return data.label.indexOf(value) !== -1
    },
    // 获取bom树的标准数据
    async getStandardTree() {
      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 }
      })
      // console.log(this.standardTree)
    },
    // 点击bom树节点方法
    async nodeClick(data, node, element) {
      console.log(data)
      // console.log('children' in data)
      if (!('children' in data)) {
        // console.log('点击子节点', data)
        this.selectNode = data
        await this.getSpecifications(data)
        return
      }
      this.selectNode = data
      await this.getSerialNumber(data)
    },
    specificationDetails(row) {
      // 跳转产品规格详情页
      console.log(row)
      this.$router.push(`/standardLibrary/SpecificationDetails/${row.id}`)
    },
    // 获取所有标准table
    async getAllStandard() {
      // 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
    },
    // 分页条件改变时判断需要分页查询的方法
    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()
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`)
      this.pageParams.pageNo = val
      this.judgment()
    }
  }
}
</script>

<style lang="scss" scoped>

.standard-library-main{
  width: 100%;
  height: 100%;
@@ -188,27 +344,30 @@
      flex: 2;
      margin-right: 12px;
      .el-tree {
        margin-top: 12px;
        ::v-deep .el-tree-node__content{
          height: 24px !important;
          font-size: 14px;
          display: inline-block !important;
          padding: 2px;
          color: #333;
        }
        ::v-deep .el-tree-node__content:hover{
          background: rgba(58,124,253,0.1) ;
          // opacity: 0.31;
          border-radius: 3px;
          color: #333 !important;
        }
        ::v-deep .el-tree-node:focus>.el-tree-node__content{
          background: rgba(58,124,253,0.1) ;
          // opacity: 0.31;
          border-radius: 3px;
          color: #333 !important;
        }
        // margin-top: 12px;
      }
      // .el-tree {
      //   margin-top: 12px;
      //   ::v-deep .el-tree-node__content{
      //     height: 24px !important;
      //     font-size: 14px;
      //     display: inline-block !important;
      //     padding: 2px;
      //     color: #333;
      //   }
      //   ::v-deep .el-tree-node__content:hover{
      //     background: rgba(58,124,253,0.1) ;
      //     // opacity: 0.31;
      //     border-radius: 3px;
      //     color: #333 !important;
      //   }
      //   ::v-deep .el-tree-node:focus>.el-tree-node__content{
      //     background: rgba(58,124,253,0.1) ;
      //     // opacity: 0.31;
      //     border-radius: 3px;
      //     color: #333 !important;
      //   }
      // }
    }
    .library-table{
      flex: 8;