kd-aiot-frontend-eam/src/views/ledgerAssets/office/edit.vue

<template>
  <div class="ele-body">
     <el-card :body-style="{ padding: 0 }">
         <div class="page-container equipment-container">
           <div class="page-title basic-details-title">
             <el-page-header @back="$router.go(-1)">
               <div slot="content" class="pageContent">
                 <div>编辑模具信息</div>
               </div>
             </el-page-header>
             <div>
               <el-button size="small" @click="$router.go(-1)">取消</el-button>
               <el-button
                 size="small"
                 type="primary"
                  @click="toSave"
                 v-loading="btnLoading"
                 >确定</el-button
               >
             </div>
           </div>
           <div class="content">
             <el-form label-width="100px">
               <div class="basic-details-title border-none">
                 <span class="border-span">基本信息</span>
               </div>
               <el-descriptions title="" :column="4" size="medium" border>
                 <el-descriptions-item>
                   <template slot="label"> 模具编码 </template>
                   {{info.code}}
                 </el-descriptions-item>
                 <el-descriptions-item>
                   <template slot="label"> 模具名称 </template>
                   {{info.name}}
                 </el-descriptions-item>
                 <el-descriptions-item>
                   <template slot="label"> 牌号 </template>
                   {{info.baseInfo.brandNum}}
                 </el-descriptions-item>
                 <el-descriptions-item>
                   <template slot="label"> 型号 </template>
                   {{info.baseInfo.modelType}}
                 </el-descriptions-item>
                 <el-descriptions-item>
                   <template slot="label"> 大模体型号 </template>
                   {{info.extraInfo.maxMoldType}}
                 </el-descriptions-item>
                 <el-descriptions-item>
                   <template slot="label"> 芯杆数量 </template>
                   {{info.extraInfo.coreBarNum}}
                 </el-descriptions-item>
                 <el-descriptions-item>
                   <template slot="label"> 模孔数量 </template>
                   {{info.extraInfo.dieHoleNum}}
                 </el-descriptions-item>
                 <el-descriptions-item>
                   <template slot="label"> 收缩系数 </template>
                   {{info.extraInfo.shrinkEffictive}}
                 </el-descriptions-item>
                 <el-descriptions-item>
                   <template slot="label"> 下冲头数量 </template>
                   {{info.extraInfo.downPunchNum}}
                 </el-descriptions-item>
                 <el-descriptions-item>
                   <template slot="label"> 上冲头数量 </template>
                   {{info.extraInfo.upperPunchNum}}
                 </el-descriptions-item>
                 <el-descriptions-item>
                   <template slot="label"> 最大冲压次数 </template>
                   {{info.extraInfo.maxCyTimes}}
                 </el-descriptions-item>
                 <el-descriptions-item>
                   <template slot="label"> 计量单位 </template>
                   {{info.baseInfo.measuringUnit}}
                 </el-descriptions-item>
                 <el-descriptions-item :span="2">
                   <template slot="label"> 分类 </template>
                   {{info.baseInfo.categoryLevelPath}}
                 </el-descriptions-item>
                 <el-descriptions-item>
                   <template slot="label"> 采购日期 </template>
                   <!-- {{info.category.procurementTime}} -->
                 </el-descriptions-item>
                 <el-descriptions-item>
                   <template slot="label"> 过保日期 </template>
                   <!-- {{info.category.expirationTime}} -->
                 </el-descriptions-item>
               </el-descriptions>

               <div class="basic-details-title border-none">
                 <span class="border-span">资产信息</span>
               </div>
               <el-row>
                 <el-col :md="8" :xs="8" :sm="8">
                   <el-form-item label="固资编码">
                     <el-input size="small" v-model="info.fixCode"></el-input>
                   </el-form-item>
                 </el-col>
                 <el-col :md="8" :xs="8" :sm="8">
                   <el-form-item label="权属部门" prop="ownershipGroupId" class="qsbm">
                      <ele-tree-select
                          clearable
                          :data="treeData"
                          v-model="info.ownershipGroupId"
                          placeholder="请选择"
                          default-expand-all
                          labelKey="name"
                          valueKey="id"
                      />
                   </el-form-item>
                 </el-col>
               </el-row>


               <div class="basic-details-title border-none">
                 <span class="border-span">文档信息</span>
               </div>
                 <div class="basic-details-title border-none">
                   <span class="border-span">文档信息</span>
                 </div>
                 <div class="upload-container">
                   <WithView v-model="imageUrl" :limit="1" :assetName="`模具`"/>
                   <div class="file-list">
                     <div>
                       <el-form-item prop="image" label="使用说明书">
                         <fileUpload
                           v-model="attUrl.operatingManual.value"
                           module="main"
                           :showLib="true"
                         />
                       </el-form-item>
                     </div>
                     <div>
                       <el-form-item prop="image" label="生产许可证书">
                         <fileUpload
                           v-model="attUrl.productionLicence.value"
                           module="main"
                           :showLib="true"
                         />
                       </el-form-item>
                     </div>
                     <div>
                       <el-form-item prop="image" label="防爆合格证书">
                         <fileUpload
                           v-model="attUrl.explosionProofCertificate.value"
                           module="main"
                           :showLib="true"
                         />
                       </el-form-item>
                     </div>
                     <div>
                       <el-form-item prop="image" label="检验报告">
                         <fileUpload
                           v-model="attUrl.surveyReport.value"
                           module="main"
                           :showLib="true"
                         />
                       </el-form-item>
                     </div>
                     <div>
                       <el-form-item prop="image" label="检验周期说明">
                         <fileUpload
                           v-model="attUrl.inspectionCycleManual.value"
                           module="main"
                           :showLib="true"
                         />
                       </el-form-item>
                     </div>
                     <div>
                       <el-form-item prop="image" label="图纸资料">
                         <fileUpload
                           v-model="attUrl.informationDrawing.value"
                           module="main"
                           :showLib="true"
                         />
                       </el-form-item>
                     </div>
                     <div>
                       <el-form-item prop="image" label="产品合格证">
                         <fileUpload
                           v-model="attUrl.productCertificate.value"
                           module="main"
                           :showLib="true"
                         />
                       </el-form-item>
                     </div>
                   </div>
                 </div>
             </el-form>
               <div class="basic-details-title border-none">
                 <span class="border-span">扩展信息</span>
               </div>
               <el-row>
                  <el-form :model="itemForm" :rules="customRule" ref="formCustom" class="row-form">
                       <el-col :span="8" v-for="(item,index) in itemForm.addList" :key="index">
                            <el-form-item
                               :prop="'addList.' + index + '.key'"
                               :rules="{
                                  required: true, message: '自定义参数名称不能为空', trigger: 'blur'
                              }"
                            >
                              <div  class="add-col">
                                  <el-input class="col-input" v-model="item.key" placeholder="参数名称"></el-input>
                                  <el-input class="col-input" v-model="item.value" placeholder="参数值"></el-input>
                                  <el-button type="text" @click="delt(item,index)"> 删除 </el-button>
                              </div>
                            </el-form-item>
                       </el-col>
                       <el-col :span="8" v-if="itemForm.addList.length<10">
                           <el-form-item label-width="20px">
                                <el-button type="primary" @click="addItem">增加自定义参数</el-button>
                           </el-form-item>
                       </el-col>
                  </el-form>
               </el-row>
             </div>
         </div>
     </el-card>
  </div>
</template>

<script>
  import { getAssetInfo , saveOrEdit } from '@/api/ledgerAssets';
  import { listOrganizations } from '@/api/system/organization';
  import fileUpload from '@/components/upload/fileUpload';
  import WithView from '@/components/upload/WithView';
  import imgUpload from '@/components/upload/imgUpload';
export default {
  components: {
    WithView,
    fileUpload,
    imgUpload,
  },
  data () {
    return {
      formData: {},
      info:{
        baseInfo:{},
        extraInfo:{}
      },
      customRule:{},
      itemForm:{
        addList:[]
      },
        // 图片
        imageUrl: null,
        // 文档信息
        attUrl: {
          operatingManual: {
            value: [],
            sort: 1
          },
          productionLicence: {
            value: [],
            sort: 2
          },
          explosionProofCertificate: {
            value: [],
            sort: 3
          },
          surveyReport: {
            value: [],
            sort: 4
          },
          inspectionCycleManual: {
            value: [],
            sort: 5
          },
          informationDrawing: {
            value: [],
            sort: 6
          },
          productCertificate: {
            value: [],
            sort: 7
          }
        },
      treeData:[],
      btnLoading:false
    }
  },
  created(){
    let id = this.$route.query.id;
    this.getDetilInfo(id);
    this.query();
  },
  methods: {
    // 树形结构数据
    query() {
      listOrganizations()
        .then((list) => {
          this.treeData = this.$util.toTreeData({
            data: list,
            idField: 'id',
            parentIdField: 'parentId'
          });
        })
        .catch((e) => {
        });
    },

    setImgs(type, sort, info) {
      if (info[0]) {
        this.attUrl[type] = info[0];
        this.attUrl[type].sort = sort;
      } else {
        this.attUrl[type] = null;
      }
    },
    // 处理文档信息
    setWd() {
      let attUrl = [];
      Object.entries(this.attUrl).forEach(([key, value], index) => {
        if (value) {
          attUrl.push(value);
        } else {
          attUrl.push({ sort: index + 1 });
        }
      });
      return attUrl;
    },
    async getDetilInfo(id){
      const data = await getAssetInfo(id)
      if (data){
         this.info = data
         this.$set(this.info, 'baseInfo', data.category.category)
         this.$set(this.info, 'extraInfo', data.category.categoryMold)
         this.itemForm.addList =  this.info.extInfoSelf
          ?  this.info.extInfoSelf
          : [];
         if (data.attUrl && data.attUrl.length > 0) {
           // 文档信息
           Object.keys(this.attUrl).forEach((n, index) => {
             this.attUrl[n].value =
               (data.attUrl[index]?.storePath && [data.attUrl[index]]) || [];
           });
         }

         // 设备图片
         this.imageUrl = data.imageUrl|| {};
      }
    },

    // 选择图片回调
    cbUploadImg(data) {
      if (data.length > 0) {
        this.imageUrl = data[0];
      } else {
        this.imageUrl = "";
      }
    },

    // 删除自定义参数
    delt(item,index){
        this.itemForm.addList.splice(index,1)
    },
    // 添加自定义参数
    addItem(){
      if(this.itemForm.addList.length<10){
        let item = {key:'',value:''}
         this.itemForm.addList.push(item)
      }else{
        this.$message.warning('自定义参数最多添加10条')
      }
    },

      // 点击确定保存
      toSave () {
        let extendField = this.itemForm.addList;
        let params = {
          id: this.info.id,
          code: this.info.code,
          fixCode: this.info.fixCode,
          extInfoSelf: extendField,
          ownershipGroupId: this.info.ownershipGroupId,
          rootCategoryLevelId:this.info.rootCategoryLevelId,
          categoryId:this.info.categoryId,
          // positionIds: JSON.parse(this.info.category.categoryLevelPathId).join(','),
          position: typeof this.info.positionList == 'string'?{}:this.info.positionList[0],
          // 文档信息
          attUrl: this.setWd() || [],
          // // 设备图片
          imageUrl: this.imageUrl || {},
        };
        this.btnLoading = true;
        this.$refs['formCustom'].validate((valid) => {
          if (valid) {
            saveOrEdit(params).then((res) => {
              if (res) {
                this.$message.success('模具编辑成功');
                this.$router.go(-1);
              }
            })
            .finally(() => {
              this.btnLoading = false;
            });
          } else {
            return false;
          }
        });
      },
    // 处理文档信息
    setWd () {
      return Object.values(this.attUrl).map((item) => ({
        ...(item.value[0] || {}),
        sort: item.sort
      }));
    },
  }
}
</script>

<style lang="scss" scoped>
.equipment-container {
  background-color: #fff;
  padding: 20px;
  .content {
    padding: 0 20px;
  }
  .page-title{
    width:100%;
    padding-bottom: 10px;
    border-bottom:1px solid #ccc;
  }
  .basic-details-title {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 15px 0px;
    font-size: 16px;
  }
  .label-none {
    .el-form-item__content {
      margin-left: 0 !important;
    }
  }
  .upload-container {
    display: flex;
    .file-list {
      margin-left: 50px;
      flex: 1;
    }
  }

  .row-form{
    width:100%;
    .add-col{
      display:flex;
      align-items:center;
      margin-left: 20px;
      .col-input{
        margin-right:5px;
      }
    }
  }
  .qsbm .el-select{
    width:100%
  }
}
</style>