标准库第一次编辑

hailin

2023-07-18 8eb564d8a9bb62cdfac2fe65152389e3b74da02d

 src/views/standardLibrary/index.vue

@@ -6,24 +6,25 @@
          v-model="filterText"
          placeholder="输入关键字进行过滤"
        />
        <el-button type="text">全部</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,78 +42,71 @@
        </div>
        <div class="table-box">
          <el-table
            ref="personnerlTable"

            ref="standardLibraryTable"
            :cell-style="{textAlign: 'center'}"
            :header-cell-style="{border:'0px',background:'#f5f7fa',color:'#606266',boxShadow: 'inset 0 1px 0 #ebeef5',textAlign: 'center'}"
            :data="personnerlTable"
            :data="standardLibraryTable"
            style="width: 100%"
          >
            <el-table-column
              prop="roleName"
              label="角色名称"
              min-width="120"
              type="index"
              label="序号"
              min-width="50"
            />
            <el-table-column
              prop="rolePermissions"
              label="角色权限"
              min-width="120"
            />
            <el-table-column
              prop="age"
              label="年龄"
              prop="name"
              label="产品名称"
              min-width="150"
            />
            <el-table-column
              prop="creatTime"
              label="创建时间"
              min-width="180"
              prop="username"
              label="更新人"
              min-width="100"
            />
            <el-table-column
              prop="phone"
              label="电话"
              min-width="200"
              prop="updateTime"
              label="更新时间"
              min-width="150"
            />
            <el-table-column
              prop="mailbox"
              label="邮箱"
              min-width="200"
              prop="vel"
              label="版本"
              min-width="100"
            />
            <el-table-column
              prop="incumbentStatus"
              label="在职状态"
              min-width="120"
              :filters="[{ text: 0, value: 0 }, { text: 1, value: 1 }]"
              :filter-method="filterTag"
              filter-placement="bottom-end"
              prop="spe_state"
              label="状态"
              min-width="150"
            >
              <template slot-scope="scope">
                <el-tag
                  :type="scope.row.businessStatus === 0 ? 'primary' : 'success'"
                  :type="scope.row.spe_state === 0 ? 'primary' : 'success'"
                  disable-transitions
                >{{ scope.row.businessStatus === 0 ? '未同意' : '已同意' }}</el-tag>
                >{{ scope.row.spe_state === 0 ? '未同意' : '已同意' }}</el-tag>
              </template>
            </el-table-column>
            <el-table-column
              label="操作"
              min-width="120"
              min-width="150"
            >
              <template slot-scope="scope">
                <el-button @click="handleClick(scope.row)" type="text" size="small">编辑</el-button>
                <!-- <el-button type="text" size="small">编辑</el-button> -->
                <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>
          </el-table>
          <div>
            <el-pagination
              @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>
              :total="400"
            />
          </div>
        </div>
      </div>
@@ -121,10 +115,13 @@
</template>

<script>
import { getStandardsList, getSerialNumberList, getSpecificationsList } from '@/api/standardLibrary'
export default {
  data() {
    return {
      data: [{
      filterText: '',
      // 标准库bom树
      standardTree: [{
        id: 1,
        label: '一级 1',
        children: [{
@@ -139,13 +136,27 @@
          }]
        }]
      }],
      // 默认值
      defaultProps: {
        children: 'children',
        label: 'label'
      },
      // 查询条件
      searchData: {
        keyword: ''
      }
      },
      standardLibraryTable: [
        {
          id: 2,
          name: 'AB',
          updateTime: '2023-07-12 00:00:12',
          username: '小小',
          vel: 'V1.0',
          spe_state: 1
        }
      ],
      currentPage: 1

    }
  },
  watch: {
@@ -153,10 +164,38 @@
      this.$refs.tree.filter(val)
    }
  },
  created() {
    this.getStandardTree()
  },
  methods: {
    filterNode(value, data) {
      if (!value) return true
      return data.label.indexOf(value) !== -1
    },
    async getStandardTree() {
      const { data: standard } = await getStandardsList()// 获取所有标准
      // console.log(standard)// 获取所有标准
      for (const standardItem of standard) {
        const { data: serialNumber } = await getSerialNumberList({ IdOrNameOfSerialNumber: standardItem.name, standardsId: standardItem.id })
        // console.log(children) //所有型号
        // for (const serialNumberItem of serialNumber) {
        //   // const {data} = await getSpecificationsList({})
        // }
        standardItem.children = serialNumber.map(item => ({ id: item.id, label: item.name }))
      }
      this.standardTree = standard.map(item => ({ ...item, label: item.name }))
      console.log(this.standardTree)// 获取所有标准
    },
    async nodeClick(data, node, element) {
      // 数据 节点node对象 节点组件对象
      // console.log(data, node, element)
      // console.log(data.children && data.children?.length !== 0)
      if (!data.children && data.children?.length !== 0) {
        console.log('点击子节点', data)
        const res = await getSpecificationsList({ serialNumberId: data.id, specificationsName: data.label, pageNo: 1, pageSize: 10 })
        console.log(res)
      }
      console.log('点击父节点')
    }
  }
}
@@ -180,27 +219,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) !important;
          // 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) !important; 
          // 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;
@@ -228,9 +270,7 @@
            display: flex;
            justify-content: end;
            margin: 10px 0;
            // ::v-deep 
          }
        
      }
    }
  }