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

<template>
  <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 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.code }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label"> 名称 </template>
            {{ info.name }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label"> 材质 </template>
            {{getDictValue('周转车材质',  info.category.materialQuality)}}
            <!-- {{ info.category.extendField && JSON.parse(info.category.extendField).texture }} -->
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label"> 型号 </template>
            {{ info.category.modelType }}
          </el-descriptions-item>
          <el-descriptions-item :span="2">
            <template slot="label"> 分类 </template>
            {{ info.category.categoryLevelPath }}
          </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="fixCode">
                <el-input
                  v-model="info.fixCode"
                  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">
                <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>
        </el-form>
        <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>
        <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 { getAssetInfo , saveOrEdit } from '@/api/ledgerAssets';
  import { listOrganizations } from '@/api/system/organization';
  import WithView from '@/components/upload/WithView';
  import dictMixins from '@/mixins/dictMixins';
  export default {
    mixins: [dictMixins],
    components: {
      WithView
    },
    data () {
      return {
        formData: {},
        info: {
          category: {},
          warehouseDetail: {},
        },
        customRule: {},
        itemForm: {
          addList: []
        },
        imageUrl: {},
        treeData:[],
        btnLoading: false,
      };
    },
    created () {
      let id = this.$route.query.id;
      this.getDetilInfo(id);
      this.query();
      this.requestDict('周转车材质');
    },
    methods: {
      // 树形结构数据
      query() {
        listOrganizations()
          .then((list) => {
            this.treeData = this.$util.toTreeData({
              data: list,
              idField: 'id',
              parentIdField: 'parentId'
            });
          })
          .catch((e) => {
          });
      },

      async getDetilInfo (id) {
        const res = await getAssetInfo(id);
        if (res) {
          this.info = res;
          this.$set(this.info, 'category', res.category);
          this.itemForm.addList = this.info.extInfoSelf
            ? this.info.extInfoSelf
            : [];
          // 设备图片
          this.imageUrl = res.imageUrl?res.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条');
        }
      },

      // 选择图片回调
      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,
          code: this.info.code,
          fixCode: this.info.fixCode,
          imageUrl: this.imageUrl || {},
          extInfoSelf: extendField,
          ownershipGroupId: this.info.ownershipGroupId,
          rootCategoryLevelId:this.info.rootCategoryLevelId,
          categoryId:this.info.categoryId,
          positionIds: typeof this.info.category.categoryLevelPathId == 'string'? this.info.category.categoryLevelPathId : JSON.parse(this.info.category.categoryLevelPathId).join(',')
        };
        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;
          }
        });
      }

      // //使用说明书
      // 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;
    .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;
    }
    .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>