修改

jinlin

2024-02-23 1772fc5e211f9e9e0ab4cdc6c29b436aac178c2a

 web/src/views/modules/project/Environ-AddOrUpdate.vue

@@ -1,32 +1,34 @@
<template>
  <zt-dialog ref="dialog" column="2" @confirm="formSubmit" append-to-body title="测试环境建立确认表">
      <el-form :model="dataForm" style="padding-top: 0" :inline="true"  ref="dataForm" :disabled="dataForm.disabled" label-width="130px" class="confirmFormAuto">
        <div class="DConfirmForm">
          <el-form-item label-width="60px" label="编号:" style="width:100%;margin-bottom: 0">
            <span>{{dataForm.environ.code}}</span>
          </el-form-item>
        </div>
        <div style="border: 1px solid rgba(0,0,0,.2);width: 99%" class="confirmDAuto DConfirmForm">
          <el-form-item class="marginTopAndMarginBottom" label="专业实验室名称" style="width: 49%">
            <el-input v-model="dataForm.testAgencyInfo.agencyName" placeholder="专业实验室名称"></el-input>
          </el-form-item>
          <el-form-item class="marginTopAndMarginBottom" label="测试地点" style="width: 49%">
            <el-input v-model="dataForm.testAgencyInfo.site" placeholder="测试地点"></el-input>
          </el-form-item>
          <el-form-item  label="被测软件" style="width: 49%">
            <el-input v-model="dataForm.project.softwareName" placeholder="被测软件"></el-input>
          </el-form-item>
          <el-form-item label="版本" style="width: 49%">
            <el-input v-model="dataForm.project.softwareIdentity" placeholder="版本"></el-input>
          </el-form-item>
          <div class="el-flexConfigDialog el-form-border">
            <div class="DFormWidth DAlign DHold">
              硬软件资源
            </div>
            <div class="el-wt-border-left" style="padding-left:5px;width: calc(100% - 130px)">
              <div style="padding: 5px">软件资源：</div>
              <div class="table-container">
              <el-table ref="tableSoftwareList" class="el-software el-margin-top-bot" border :data="dataForm.softwareResourcesList"
    <el-form :model="dataForm" style="padding-top: 0" :inline="true" ref="dataForm" :disabled="dataForm.disabled"
             label-width="130px" class="confirmFormAuto">
      <div class="DConfirmForm">
        <el-form-item label-width="60px" label="编号:" style="width:100%;margin-bottom: 0">
          <span>{{dataForm.environ.code}}</span>
        </el-form-item>
      </div>
      <div style="border: 1px solid rgba(0,0,0,.2);width: 99%" class="confirmDAuto DConfirmForm">
        <el-form-item class="marginTopAndMarginBottom" label="专业实验室名称" style="width: 49%">
          <el-input v-model="dataForm.testAgencyInfo.agencyName" placeholder="专业实验室名称"></el-input>
        </el-form-item>
        <el-form-item class="marginTopAndMarginBottom" label="测试地点" style="width: 49%">
          <el-input v-model="dataForm.testAgencyInfo.site" placeholder="测试地点"></el-input>
        </el-form-item>
        <el-form-item label="被测软件" style="width: 49%">
          <el-input v-model="dataForm.project.softwareName" placeholder="被测软件"></el-input>
        </el-form-item>
        <el-form-item label="版本" style="width: 49%">
          <el-input v-model="dataForm.project.version" placeholder="版本"></el-input>
        </el-form-item>
        <div class="el-flexConfigDialog el-form-border">
          <div class="DFormWidth DAlign DHold">
            硬软件资源
          </div>
          <div class="el-wt-border-left" style="padding-left:5px;width: calc(100% - 130px)">
            <div style="padding: 5px">软件资源：</div>
            <div class="table-container">
              <el-table ref="tableSoftwareList" class="el-software el-margin-top-bot" border
                        :data="dataForm.softwareResourcesList"
                        stripe>
                <el-table-column prop="no" align="center" width="80" label="序号">
                  <template slot-scope="scope">
@@ -48,20 +50,21 @@
                    <el-input v-model="row.purposes" placeholder="用途"></el-input>
                  </template>
                </el-table-column>
                <el-table-column prop="unit" label="提供单位" width="180"  align="center">
                <el-table-column prop="unit" label="提供单位" width="180" align="center">
                  <template v-slot="{ row }">
                    <el-input v-model="row.provideUnit" placeholder="提供单位"></el-input>
                  </template>
                </el-table-column>
              </el-table>
                <div class="icon-container" @click="addSoftwareRow()">
                  <!-- 放置固定的图标 -->
                  <i class="el-icon-plus"></i>
                </div>
              <div v-if="!dataForm.disabled" class="icon-container" @click="addSoftwareRow()">
                <!-- 放置固定的图标 -->
                <i class="el-icon-plus"></i>
              </div>
              <div style="padding: 5px">硬件资源：</div>
              <div class="table-container">
              <el-table ref="tableHardwareList" class="el-software el-margin-top-bot" border :data="dataForm.hardwareResourcesList"
            </div>
            <div style="padding: 5px">硬件资源：</div>
            <div class="table-container">
              <el-table ref="tableHardwareList" class="el-software el-margin-top-bot" border
                        :data="dataForm.hardwareResourcesList"
                        stripe>
                <el-table-column prop="no" align="center" width="80" label="序号">
                  <template slot-scope="scope">
@@ -94,36 +97,37 @@
                  </template>
                </el-table-column>
              </el-table>
                <div class="icon-container" @click="addHardwareRow()">
                  <!-- 放置固定的图标 -->
                  <i class="el-icon-plus"></i>
                </div>
              <div v-if="!dataForm.disabled" class="icon-container" @click="addHardwareRow()">
                <!-- 放置固定的图标 -->
                <i class="el-icon-plus"></i>
              </div>
            </div>
          </div>
          <div class="el-flexConfigDialog el-B-border">
            <div class="DFormWidth DAlign DHold">
              动态测试环境图
            </div>
            <div style="width: calc(100% - 120px);">
              <div  class="el-wt-border-left">
                <span>{{dataForm.environ.testEnvirontDiagram}}</span>
                <config-uploader busi-type="test_environt_diagram" model-name="dataForm" :dataForm="dataForm"
                                 @getImageUrl="getImageUrl"
                                 v-model="dataForm.files"/>
                <div v-if="dataForm.url">
                  <el-image :src="dataForm.url"></el-image>
                </div>
        </div>
        <div class="el-flexConfigDialog el-B-border">
          <div class="DFormWidth DAlign DHold">
            动态测试环境图
          </div>
          <div style="width: calc(100% - 120px);">
            <div class="el-wt-border-left">
              <span>{{dataForm.environ.testEnvirontDiagram}}</span>
              <config-uploader :lineHeight="true" busi-type="test_environ_diagram" model-name="dataForm" :dataForm="dataForm"
                               @getImageUrl="getImageUrl"
                               v-model="dataForm.files"/>
              <div v-if="dataForm.url">
                <el-image :src="dataForm.url"></el-image>
              </div>
            </div>
          </div>
          <div class="el-flexConfigDialog el-B-border">
            <div class="DFormWidth DAlign DHold">
              环境差异性分析
            </div>
            <div class="el-wt-border-left" style="padding-left:5px;width: calc(100% - 130px)">
              <div class="table-container">
              <el-table ref="tableEnvironeList" class="el-software el-margin-top-bot" border :data="dataForm.environAnalysisList"
        </div>
        <div class="el-flexConfigDialog el-B-border">
          <div class="DFormWidth DAlign DHold">
            环境差异性分析
          </div>
          <div class="el-wt-border-left" style="padding-left:5px;width: calc(100% - 130px)">
            <div class="table-container">
              <el-table ref="tableEnvironeList" class="el-software el-margin-top-bot" border
                        :data="dataForm.environAnalysisList"
                        stripe>
                <el-table-column prop="no" align="center" width="80" label="序号">
                  <template slot-scope="scope">
@@ -156,73 +160,86 @@
                  </template>
                </el-table-column>
              </el-table>
                <div class="icon-container" @click="addDiscrepancyRow()">
                  <!-- 放置固定的图标 -->
                  <i class="el-icon-plus"></i>
                </div>
              <div v-if="!dataForm.disabled" class="icon-container" @click="addDiscrepancyRow()">
                <!-- 放置固定的图标 -->
                <i class="el-icon-plus"></i>
              </div>
            </div>
          </div>
          <div class="el-flexConfigDialog el-B-border">
            <div class="DFormWidth DAlign DHold">
              环境建立
            </div>
            <div style="width: calc(100% - 120px)"  class="DConfirmForm el-wt-border-left">
              <el-form-item class="marginTopAndMarginBottom" label="人员" style="width: 49%">
                <el-input v-model="dataForm.environ.establishStaff" placeholder="人员"></el-input>
              </el-form-item>
              <el-form-item class="marginTopAndMarginBottom" label="日期" style="width: 48%">
                <el-date-picker
                  v-model="dataForm.environ.establishDate"
                  type="date"
                  placeholder="日期">
                </el-date-picker>
              </el-form-item>
              <el-form-item label-width="180px" class="isKill" label="是否进行环境病毒查杀" style="width: 49%">
                <zt-dict v-model="dataForm.environ.isVirusScan" dict="is_or_not" :radio="true"></zt-dict>
              </el-form-item>
              <el-form-item label="病毒库版本" style="width: 48%">
                <el-input v-model="dataForm.environ.virusDatabaseVersion" placeholder="请输入病毒库版本"></el-input>
              </el-form-item>
            </div>
        </div>
        <div class="el-flexConfigDialog el-B-border">
          <div class="DFormWidth DAlign DHold">
            环境建立
          </div>
          <div class="el-flexConfigDialog">
            <div class="DFormWidth DAlign DHold">
              环境确认
            </div>
            <div style="width: calc(100% - 120px)" class="DConfirmForm el-wt-border-left">
              <!-- 单位名称 -->
              <el-form-item class="marginTopAndMarginBottom" label="人员" style="width: 49%">
                <el-input v-model="dataForm.environ.confirmatStaff" placeholder="人员"></el-input>
              </el-form-item>
              <!-- 联系人 -->
              <el-form-item class="marginTopAndMarginBottom" label="日期" style="width: 48%">
                <el-date-picker
                  v-model="dataForm.environ.confirmatDate"
                  type="date"
                  placeholder="日期">
                </el-date-picker>
              </el-form-item>
            </div>
          <div style="width: calc(100% - 120px)" class="DConfirmForm el-wt-border-left">
            <el-form-item class="marginTopAndMarginBottom" label="人员" style="width: 49%">
              <el-input v-model="dataForm.environ.establishStaff" placeholder="人员"></el-input>
            </el-form-item>
            <el-form-item class="marginTopAndMarginBottom" label="日期" style="width: 48%">
              <el-date-picker
                v-model="dataForm.environ.establishDate"
                type="date"
                placeholder="日期">
              </el-date-picker>
            </el-form-item>
            <el-form-item label-width="180px" class="isKill" label="是否进行环境病毒查杀" style="width: 49%">
              <zt-dict v-model="dataForm.environ.isVirusScan" dict="is_or_not" :radio="true"></zt-dict>
            </el-form-item>
            <el-form-item label="病毒库版本" style="width: 48%">
              <el-input v-model="dataForm.environ.virusDatabaseVersion" placeholder="请输入病毒库版本"></el-input>
            </el-form-item>
          </div>
        </div>
      </el-form>
        <div class="el-flexConfigDialog">
          <div class="DFormWidth DAlign DHold">
            环境确认
          </div>
          <div style="width: calc(100% - 120px)" class="DConfirmForm el-wt-border-left">
            <!-- 单位名称 -->
            <el-form-item class="marginTopAndMarginBottom" label="人员" style="width: 49%">
              <el-input v-model="dataForm.environ.confirmatStaff" placeholder="人员"></el-input>
            </el-form-item>
            <!-- 联系人 -->
            <el-form-item class="marginTopAndMarginBottom" label="日期" style="width: 48%">
              <el-date-picker
                v-model="dataForm.environ.confirmatDate"
                type="date"
                placeholder="日期">
              </el-date-picker>
            </el-form-item>
          </div>
        </div>
      </div>
      <div class="el-flex environ-sc" style="height: 60px">
        <el-form-item class="marginTopAndMarginBottom" style="width: 100%">
          <config-uploader :lineHeight="true" :busiTypeVarName="busiTypeVarName" busi-type="test_environ" model-name="dataForm" :dataForm="dataForm"
                           v-model="dataForm.files2"/>
        </el-form-item>
      </div>
    </el-form>
    <template v-slot:footer>
      <el-button v-if="dataForm.disabled" type="primary" @click="print()">打印</el-button>
    </template>
  </zt-dialog>
</template>

<script>
  import qs from "qs";
  import Cookies from "js-cookie";

  export default {
    data() {
      return {
        busiTypeVarName: 'files2',
        dataForm: {
          id: '',
          url:'',
          environ:{
          url: '',
          environ: {
            code: '1',
            hardSoftwareRes: '',
            testEnvirontDiagram: '',
            establishStaff:'',
            establishDate:'',
            establishStaff: '',
            establishDate: '',
            environAnalysis: '',
            environEstablish: '',
            environConfirmat: '',
@@ -232,26 +249,27 @@
            virusDatabaseVersion: '',
          },
          project: {
            softwareIdentity: '',
            version: '',
            softwareName: '',
          },
          testAgencyInfo: {
            agencyName:'',
            site:'',
            agencyName: '',
            site: '',
          },
          softwareResourcesList:[],
          hardwareResourcesList:[],
          environAnalysisList:[]
          softwareResourcesList: [],
          hardwareResourcesList: [],
          environAnalysisList: []
        }
      }
    },
    methods: {
      init(id,row){
      init(id, row) {
        console.log(row, 'row')
        this.dataForm.id = row.id
        this.dataForm.projectId = row.projectId
        // this.dataForm.disabled
        this.dataForm.disabled
        this.getInfo()
        console.log(this.dataForm.id,this.dataForm.projectId,'params params')
        console.log(this.dataForm.id, this.dataForm.projectId, 'params params')
      },
      // 获取信息
      async getInfo() {
@@ -259,40 +277,70 @@
          environId: this.dataForm.id,
          projectId: this.dataForm.projectId
        }
        let res = await this.$http.get(`/project/Environ/getDto`,{params: params})
        this.dataForm = {
          ...this.dataForm,
          ...res.data
        let res = await this.$http.get(`/project/Environ/getDto`, {params: params})
        if (res.data) {
          this.dataForm = {
            ...this.dataForm,
            ...res.data
          }
          this.dataForm.project.version='1.0.0'
          this.getImageUrl()
        }
        console.log(this.dataForm,'this.dataForm')
      },
      indexFormat(index){
      indexFormat(index) {
        return index += 1
      },
      addSoftwareRow(){
      addSoftwareRow() {
        this.dataForm.softwareResourcesList.push({})
        this.$nextTick(()=>{
          const tableBody=this.$refs.tableSoftwareList.$el.querySelector('.el-table__body-wrapper')
        this.$nextTick(() => {
          const tableBody = this.$refs.tableSoftwareList.$el.querySelector('.el-table__body-wrapper')
          tableBody.scrollTop = tableBody.scrollHeight
        })
      },
      addHardwareRow(){
      addHardwareRow() {
        this.dataForm.hardwareResourcesList.push({})
        this.$nextTick(()=>{
          const tableBody=this.$refs.tableHardwareList.$el.querySelector('.el-table__body-wrapper')
        this.$nextTick(() => {
          const tableBody = this.$refs.tableHardwareList.$el.querySelector('.el-table__body-wrapper')
          tableBody.scrollTop = tableBody.scrollHeight;
        })
      },
      addDiscrepancyRow(){
      addDiscrepancyRow() {
        this.dataForm.environAnalysisList.push({})
        this.$nextTick(()=>{
          const tableBody=this.$refs.tableEnvironeList.$el.querySelector('.el-table__body-wrapper')
        this.$nextTick(() => {
          const tableBody = this.$refs.tableEnvironeList.$el.querySelector('.el-table__body-wrapper')
          tableBody.scrollTop = tableBody.scrollHeight;
        })
      },
      getImageUrl(url){
        this.image.url  = url
        console.log(this.image.url,' this.image.url')
       getImageUrl() {
         let pictureId = this.getFirstImageId(this.dataForm.files)
         this.dataForm.url = `${window.SITE_CONFIG['apiURL']}/sys/oss/content2?fileId=${pictureId}`
         console.log(this.dataForm.url, ' this.dataForm.url')
       },
       getFirstImageId(oss) {
         console.log(oss, ' getFirstImageId(oss)')
         let fileId = 0
         if (oss != null) {
           if (oss.groups.length > 0) {
             let group = oss.groups[0]
             if (group.fields.length > 0) {
               let field = group.fields[0]
               if (field.files.length > 0) {
                 let file = field.files[0]
                 fileId = file.id
               }
             }
           }
         }
         return fileId
       },
      async print() {
        console.log(this.dataForm)
        let params = qs.stringify({
          token: Cookies.get('token'),
          id: this.dataForm.id
        })
        let apiURL = `/project/Environ/exportEnviron/`
        window.location.href = `${window.SITE_CONFIG['apiURL']}${apiURL}?${params}`
      },
      // 表单提交
      async formSubmit() {
@@ -307,98 +355,87 @@
  }
</script>
<style>
.confirmFormAuto {
  width: 70%;
  margin: 0 auto;
}
.confirmDAuto{
  border: 1px solid rgba(0,0,0,.2);
}
  .confirmFormAuto {
    width: 70%;
    margin: 0 auto;
  }

.el-flexConfigDialog {
  display: flex;
  align-items: center;
}
  .confirmDAuto {
    border: 1px solid rgba(0, 0, 0, .2);
  }

.DFormWidth {
  width: 120px;
}
.DConfirmForm {
  /*border-left: 1px solid;*/
  width: 100%;
}
  .el-flexConfigDialog {
    display: flex;
    align-items: center;
  }

.DConfirmForm > .el-form-item > .el-form-item__content {
  width: calc(100% - 130px);
}
.DConfirmForm > .el-form-item.isKill > .el-form-item__content {
  width: calc(100% - 180px);
}
.el-form-border{
  border-top: 1px solid rgba(0,0,0,.2);
  border-bottom: 1px solid rgba(0,0,0,.2);
}
.el-B-border{
  border-bottom: 1px solid rgba(0,0,0,.2);
}
.el-margin-top-bot{
  margin-top:5px;
  margin-bottom:5px;
}
.el-wt-border-left{
  border-left:1px solid rgba(0,0,0,.2);
}
.zt .el-table.el-software th {
  background: transparent;
}
  .DFormWidth {
    width: 120px;
  }

.zt .el-table.el-software th > .cell {
  font-weight: 500;
}
.DHold{
  font-weight: 600;
}
.zt .el-table.el-software{
  font-size: 14px;
}
.confirmFormAuto .marginTopAndMarginBottom {
  margin-top: 10px !important;
  margin-bottom: 0 !important;
}
  .DConfirmForm {
    /*border-left: 1px solid;*/
    width: 100%;
  }

.confirmFormAuto .marginTopAndMarginBottom2 {
  margin-top: -10px !important;
  margin-bottom: 10px !important;
}
.confirmFormAuto .marginTopAndMarginBottom3 {
  margin-top: 0 !important;
  margin-bottom: 10px !important;
}
.table-container {
  position: relative;
}
.table-container:hover .icon-container {
  opacity: 1; /* 鼠标悬停时显示图标 */
}
.icon-container {
  z-index: 1;
  position: absolute;
  bottom: -20px;
  left: 50%;
  width: 40px;
  height: 30px;
  text-align: center;
  line-height: 30px;
  transform: translate3d(-50%, 0, -20px);
  border: 1px solid #EBEEF5;
  background-color: #fafafa;
  box-shadow: 0 3px 6px 0 rgba(72, 119, 232, 0.14);
  border-radius: 2px;
  transition: transform 0.3s ease,box-shadow 0.3s ease,opacity 0.3s ease;
  opacity: 0;
}
.icon-container:hover{
  transform: translate3d(-50%, 0, 0);
  box-shadow: 0 10px 10px 0 rgba(72, 119, 232, 0.34)
}
  .DConfirmForm > .el-form-item > .el-form-item__content {
    width: calc(100% - 130px);
  }

  .DConfirmForm > .el-form-item.isKill > .el-form-item__content {
    width: calc(100% - 180px);
  }

  .el-form-border {
    border-top: 1px solid rgba(0, 0, 0, .2);
    border-bottom: 1px solid rgba(0, 0, 0, .2);
  }

  .el-B-border {
    border-bottom: 1px solid rgba(0, 0, 0, .2);
  }

  .el-margin-top-bot {
    margin-top: 5px;
    margin-bottom: 5px;
  }

  .el-wt-border-left {
    border-left: 1px solid rgba(0, 0, 0, .2);
  }

  .zt .el-table.el-software th {
    background: transparent;
  }

  .zt .el-table.el-software th > .cell {
    font-weight: 500;
  }

  .DHold {
    font-weight: 600;
  }

  .zt .el-table.el-software {
    font-size: 14px;
  }

  .confirmFormAuto .marginTopAndMarginBottom {
    margin-top: 10px !important;
    margin-bottom: 0 !important;
  }

  .confirmFormAuto .marginTopAndMarginBottom2 {
    margin-top: -10px !important;
    margin-bottom: 10px !important;
  }

  .confirmFormAuto .marginTopAndMarginBottom3 {
    margin-top: 0 !important;
    margin-bottom: 10px !important;
  }
  .environ-sc > .el-form-item > .el-form-item__content {
    width:100%;
  }

</style>