krd-srm-vue/src/views/modules/srmPart/com_part_BasicInfo.vue

<template>
  <div class="customer-css">

    <div
      :style="{ minHeight: searchData.height + 'px', padding: '20px' }"
      v-loading="dataListLoading"
    >
      <!-- 产品信息 -->
      <el-form
        :model="currentpart"
        ref="partForm"
        label-position="top"
        class="part-form"
      >
        <div class="form-section">
          <el-row :gutter="20">
            <el-col :span="6">
              <el-form-item label="产品编码" prop="partNo">
                <el-input v-model="currentpart.partNo" disabled></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="NPC货号" prop="npc">
                <el-input v-model="currentpart.npc" disabled></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="产品分类" prop="category">
                <el-input v-model="currentpart.category" disabled></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="计量单位" prop="unit">
                <el-input v-model="currentpart.unit" disabled></el-input>
              </el-form-item>
            </el-col>
          </el-row>

          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label="产品名称" prop="partDesc">
                <el-input v-model="currentpart.partDesc" disabled></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="产品规格" prop="partSpec">
                <el-input v-model="currentpart.partSpec" disabled></el-input>
              </el-form-item>
            </el-col>
          </el-row>
        </div>

        <div class="form-section">
          <el-row :gutter="20">
            <el-col :span="6">
              <el-form-item label="采购员" prop="buyerName">
                <el-input v-model="currentpart.buyerName" disabled></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="sourcing专员" prop="sourcingName">
                <el-input v-model="currentpart.sourcingName" disabled></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="属性模板" prop="codeNo">
                <el-input v-model="currentpart.codeNo" disabled></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="是否在用">
                <el-input v-model="statusText" disabled></el-input>
              </el-form-item>
            </el-col>
          </el-row>
        </div>

        <div class="form-section">
          <el-row :gutter="20">
            <el-col :span="24">
              <el-form-item label="备注">
                <el-input
                  v-model="currentpart.remark"
                  disabled
                  type="textarea"
                  :rows="2"
                  resize="none"
                ></el-input>
              </el-form-item>
            </el-col>
          </el-row>
        </div>
      </el-form>
    </div>
  </div>
</template>
<script>
import { searchPartInfo } from '@/api/part/partInfo.js'

export default {
  data() {
    return {
      searchData: {
        site: '',
        partNo:'',
        partDesc:'',
        height: 200
      },
      tagNo: '',
      tagNo1: '',
      dataListLoading: false,
      currentpart: {
        partNo: '',
        npc: '',
        partDesc: '',
        partSpec: '',
        buyerName: '',
        sourcingName: '',
        category: '',
        unit: '',
        status: '',
        codeNo: '',
        createBy: '',
        remark: '',
        site: ''
      }
    }
  },
  computed: {
    // 状态显示转换
    statusText() {
      return this.currentpart.status === 'Y' ? '在用' :
             this.currentpart.status === 'N' ? '禁用' : ''
    }
  },
  methods: {
    // 获取基础数据列表
    getBaseList(val, type) {
      this.tagNo = val
      this.tagNo1 = type
      this.$nextTick(() => {
        let strVal = ''
        this.$refs.baseList.init(val, strVal)
      })
    },
    /* 列表方法的回调 */
    getBaseData(val) {
      // 基础数据选择回调，可根据需要实现
    },
    // 初始化组件的参数
    init(inData) {
      // 初始化参数
      this.searchData = JSON.parse(JSON.stringify(inData))
      // 查询数据
      this.getPartData()
    },
    getPartData() {
      if (!this.searchData.partNo) {
        return
      }

      this.dataListLoading = true

      searchPartInfo(this.searchData)
        .then(({ data }) => {
          if (data && data.code === 0 && data.data) {
            // 将查询到的数据赋值给currentpart对象
            this.currentpart = {
              partNo: data.data.partNo || '',
              npc: data.data.npc || '',
              partDesc: data.data.partDesc || '',
              partSpec: data.data.partSpec || '',
              buyerName: data.data.buyerName || '',
              sourcingName: data.data.sourcingName || '',
              category: data.data.category || '',
              unit: data.data.unit || '',
              status: data.data.status || '',
              codeNo: data.data.codeNo || '',
              createBy: data.data.createBy || '',
              remark: data.data.remark || '',
              site: data.data.site || ''
            }
          } else {
            this.$message.error('查询产品信息失败：' + (data ? data.msg : '网络错误'))
            // 清空数据
            this.resetPartData()
          }
          this.dataListLoading = false
        })
        .catch((error) => {
          this.$message.error('查询产品信息失败：' + error.message)
          this.resetPartData()
          this.dataListLoading = false
        })
    },
    // 重置产品数据
    resetPartData() {
      this.currentpart = {
        partNo: '',
        npc: '',
        partDesc: '',
        partSpec: '',
        buyerName: '',
        sourcingName: '',
        category: '',
        unit: '',
        status: '',
        codeNo: '',
        createBy: '',
        remark: '',
        site: ''
      }
    }
  }
}
</script>

<style scoped lang="scss">
.customer-css {
  width: 100%;
}

.form-section {
  margin-bottom: 20px;
}

.part-form {
  width: 100%;
}
</style>