kd-aiot-frontend/src/views/ledgerAssets/turnoverCar/edit.vue

<template>
  <div class="page-container equipment-container">
    <div class="basic-details-title">
      <span class="border-span">编辑周转车信息</span>
      <div>
        <el-button size="small" @click="$router.go(-1)">取消</el-button>
        <el-button size="small" type="primary" @click="toSave">确定</el-button>
      </div>
    </div>
    <div label-width="120px">
      <div class="content">
        <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.assetCode }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label"> 周转车名称 </template>
            {{ info.assetName }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label"> 材质 </template>
            {{ info.textureInfo.texture ? info.textureInfo.texture : '' }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label"> 型号 </template>
            {{ info.information.modelType }}
          </el-descriptions-item>
          <el-descriptions-item :span="2">
            <template slot="label"> 分类 </template>
            {{ info.information.classificationUrl }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label"> 采购日期 </template>
            {{ info.warehouseDetail.procurementTime }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label"> 过保日期 </template>
            {{ info.warehouseDetail.expirationTime }}
          </el-descriptions-item>
        </el-descriptions>

        <div class="basic-details-title border-none">
          <span class="border-span">资产信息</span>
        </div>

        <el-form label-width="90px">
          <el-row>
            <el-col :md="8" :xs="8" :sm="8">
              <el-form-item label="固资编码" prop="fixAssetCode">
                <el-input
                  v-model="info.fixAssetCode"
                  type="text"
                  size="small"
                  placeholder="请输入"
                ></el-input
              ></el-form-item>
            </el-col>
            <el-col :md="8" :xs="8" :sm="8">
              <el-form-item label="权属部门" prop="name" class="qsbm">
                <el-input
                  v-model="info.ownershipDeptCode"
                  v-show="false"
                ></el-input>
<!--                <selectTree
                  ref="tree2"
                  class="input"
                  :value="info.ownershipDeptCode"
                  :options="deptList"
                  :props="{
                    value: 'code',
                    label: 'name',
                    children: 'children'
                  }"
                  @getValue="qsDeptClick"
                /> -->
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
        <div class="basic-details-title border-none">
          <span class="border-span">文档信息</span>
        </div>
        <div class="upload-container">
          <!-- <UploadImg
            @getImgs="cbUploadImg"
            :assetName="`周转车`"
            ref="UploadImg"
          /> -->
        </div>
        <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>
  </div>
</template>

<script>
  // import selectUpload from '@/components/selectUpload'
  // import UploadImg from '@/components/uploadImg/WithView.vue'
  // import {getAssetInfo,toSaveAsset} from "@/api/ledgerAssets/asset"
  // import { imageView } from "@/utils";
  // import org from "@/api/main/org";
  // import selectTree from "@/components/selectTree";
  import {
    getAssetInfo
  } from '@/api/ledgerAssets';
  export default {
    // components: { selectUpload, UploadImg , selectTree},
    data () {
      return {
        formData: {},
        info: {
          textureInfo: {},
          information: {},
          warehouseDetail: {},
          extendField: []
        },
        customRule: {},
        itemForm: {
          addList: []
        },

        imageUrl: null,
        deptList: []
      };
    },
    created () {
      let id = this.$route.query.id;
      this.getDetilInfo(id);
      // this.getTreeList();
    },
    methods: {
      // 树形结构数据
      // getTreeList () {
      //   org.tree().then((res) => {
      //     this.deptList = res.data;
      //   });
      // },
      // 权属部门点击回调
      qsDeptClick (info) {
        this.info.ownershipDeptCode = info.code;
        this.info.ownershipDeptName = info.name;
      },
      async getDetilInfo (id) {
        const res = await getAssetInfo(id);
        if (res.success) {
          this.info = res.data;
          this.$set(this.info, 'information', res.data.information);
          this.$set(this.info, 'warehouseDetail', res.data.warehouseDetail);
          this.$set(
            this.info,
            'textureInfo',
            JSON.parse(res.data.information.extendField)
          );
          this.$set(this.info, 'extendField', JSON.parse(res.data.extendField));
          // this.$set(this.info, 'imgUrl', res.data.imageUrl)
          this.itemForm.addList = this.info.extendField
            ? this.info.extendField
            : [];
          // 设备图片
          this.imageUrl = res.data.imageUrl;
          if (this.imageUrl) {
            imageView(this.imageUrl).then((res) => {
              this.$refs.UploadImg.setImg(res);
            });
          }
        }
      },

      // 删除自定义参数
      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条');
        }
      },

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

      // 点击确定保存
      toSave () {
        let extendField = this.itemForm.addList;
        let params = {
          id: this.info.id,
          assetCode: this.info.assetCode,
          imageUrl: this.imageUrl,
          extendField: JSON.stringify(extendField),
          fixAssetCode: this.info.fixAssetCode,
          isIotEnable: false,
          ownershipDeptCode: this.info.ownershipDeptCode,
          ownershipDeptName: this.info.ownershipDeptName
        };
        this.$refs['formCustom'].validate((valid) => {
          if (valid) {
            toSaveAsset(params).then((res) => {
              if (res.success) {
                this.$message.success('周转车编辑成功');
                this.$router.go(-1);
              }
            });
          } else {
            return false;
          }
        });
      }

      // //使用说明书
      // operatingManual (info) {
      //   if (info.length > 0) {
      //     console.log(info, '------info-----')
      //     this.formData.operatingManual = info[0]
      //     console.log(this.formData.operatingManual, 'getImgs')
      //   } else {
      //     this.formData.operatingManual = null
      //     console.log(this.formData.operatingManual, 'getImgs')
      //   }
      // },
      // productionLicence (info) {
      //   this.formData.productionLicence = info[0]
      // },
      // explosionProofCertificate (info) {
      //   this.formData.explosionProofCertificate = info[0]
      // },
      // surveyReport (info) {
      //   this.formData.surveyReport = info[0]
      // },
      // inspectionCycleManual (info) {
      //   this.formData.inspectionCycleManual = info[0]
      // },
      // informationDrawing (info) {
      //   this.formData.informationDrawing = info[0]
      // },
      // productCertificate (info) {
      //   this.formData.productCertificate = info[0]
      // }
    }
  };
</script>

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