标准库的第三次提交

hailin

2023-07-21 17e62da2a097844b0f6f7a58926e7d0a40598d2c

 src/views/standardLibrary/SpecificationDetails.vue

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

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

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

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

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

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