项目表

wente

2023-11-20 68fa4972eb9c0b1aaff20d6f400f9105a7042b71

项目表

 web/src/views/modules/olderForm/confirmForm.vue

@@ -1,217 +1,294 @@
<!--<template>-->
<!--  <div class="fa-card-a" style="max-height: calc(100vh - 130px);overflow-y: auto">-->
<!--    <el-form ref="form" :inline="true" :model="form" label-width="120px" class="confirmFormAuto">-->
<!--      <div class="DConfirmForm">-->
<!--        <el-form-item label-width="60px" label="编号:" style="width: 99%">-->
<!--          <span>{{form.code}}</span>-->
<!--        </el-form-item>-->
<!--      </div>-->
<!--      <div class="confirmDAuto DConfirmForm">-->
<!--          <el-form-item label="专业实验室名称" style="width: 49%">-->
<!--            <el-input v-model="form.name" placeholder="请输入编号名称"></el-input>-->
<!--          </el-form-item>-->
<!--         <el-form-item label="测试地点" style="width: 49%">-->
<!--           <el-input v-model="form.place" placeholder="请输入编号名称"></el-input>-->
<!--         </el-form-item>-->
<!--          <el-form-item label="被测软件" style="width: 49%">-->
<!--            <el-input v-model="form.software" placeholder="请输入编号名称"></el-input>-->
<!--          </el-form-item>-->
<!--          <el-form-item label="版本" style="width: 49%">-->
<!--            <el-input v-model="form.versions" placeholder="请输入编号名称"></el-input>-->
<!--          </el-form-item>-->
<!--        <div class="el-flex 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>-->
<!--            <el-table class="el-software el-margin-top-bot" height="150" border :data="form.softwareData"-->
<!--                      stripe>-->
<!--              <el-table-column prop="code" align="center" width="80" label="序号"></el-table-column>-->
<!--              <el-table-column prop="name" min-width="300" label="软件项名称"></el-table-column>-->
<!--              <el-table-column prop="versions" align="center" width="180" label="版本"></el-table-column>-->
<!--              <el-table-column prop="use" align="center" width="180" label="用途"></el-table-column>-->
<!--              <el-table-column prop="unit" label="提供单位" width="180"  align="center"></el-table-column>-->
<!--            </el-table>-->
<!--            <div style="padding: 5px">硬件资源：</div>-->
<!--            <el-table class="el-software el-margin-top-bot" height="150" border :data="form.hardwareData"-->
<!--                      stripe>-->
<!--              <el-table-column prop="code" align="center" width="80" label="序号"></el-table-column>-->
<!--              <el-table-column prop="name" min-width="300" label="硬件和固件项目名称"></el-table-column>-->
<!--              <el-table-column prop="use" align="center" width="180" label="用途"></el-table-column>-->
<!--              <el-table-column prop="number" align="center" width="80" label="数量"></el-table-column>-->
<!--              <el-table-column prop="state" align="center" width="120" label="状态"></el-table-column>-->
<!--              <el-table-column prop="unit" align="center" width="180" label="提供单位"></el-table-column>-->
<!--            </el-table>-->
<!--          </div>-->
<!--        </div>-->
<!--        <div class="el-flex el-B-border">-->
<!--          <div class="DFormWidth DAlign DHold">-->
<!--            动态测试环境图-->
<!--          </div>-->
<!--          <div style="width: calc(100% - 120px);">-->
<!--           <div style="height:150px" class="el-wt-border-left">-->
<!--           </div>-->
<!--          </div>-->
<!--        </div>-->
<!--        <div class="el-flex el-B-border">-->
<!--          <div class="DFormWidth DAlign DHold">-->
<!--            环境差异性分析-->
<!--          </div>-->
<!--          <div class="el-wt-border-left" style="padding-left:5px;width: calc(100% - 130px)">-->
<!--            <el-table class="el-software el-margin-top-bot" height="150" border :data="form.analyzeData"-->
<!--                      stripe>-->
<!--              <el-table-column prop="code" align="center" width="80" label="序号"></el-table-column>-->
<!--              <el-table-column prop="realEnvironment" min-width="300" label="真实环境"></el-table-column>-->
<!--              <el-table-column prop="testEnvironment" align="center" width="100" label="测试环境"></el-table-column>-->
<!--              <el-table-column prop="environmentalDifference" align="center" width="100" label="环境差异"></el-table-column>-->
<!--              <el-table-column prop="influence" align="center" width="160" label="对测试结果影响"></el-table-column>-->
<!--              <el-table-column prop="measure" align="center" width="180" label="措施"></el-table-column>-->
<!--            </el-table>-->
<!--          </div>-->
<!--        </div>-->
<!--        <div class="el-flex el-B-border">-->
<!--          <div class="DFormWidth DAlign DHold">-->
<!--            环境建立-->
<!--          </div>-->
<!--          <div style="width: calc(100% - 120px)"  class="DConfirmForm el-wt-border-left">-->
<!--            <el-form-item label="人员" style="width: 49%">-->
<!--              <el-input v-model="form.buildPersonnel" placeholder="请输入单位名称"></el-input>-->
<!--            </el-form-item>-->
<!--            <el-form-item label="日期" style="width: 48%">-->
<!--              <el-input v-model="form.buildDate" placeholder="请输入联系人"></el-input>-->
<!--            </el-form-item>-->
<!--            <el-form-item label-width="160px" class="isKill" label="是否进行环境病毒查杀" style="width: 49%">-->
<!--              <el-radio-group v-model="form.isKill">-->
<!--                <el-radio :label="0">是</el-radio>-->
<!--                <el-radio :label="1">否</el-radio>-->
<!--              </el-radio-group>-->
<!--            </el-form-item>-->
<!--            <el-form-item label="病毒库版本" style="width: 48%">-->
<!--              <el-input v-model="form.VirusLibraryVersion" placeholder="请输入病毒库版本"></el-input>-->
<!--            </el-form-item>-->
<!--          </div>-->
<!--        </div>-->
<!--        <div class="el-flex">-->
<!--          <div class="DFormWidth DAlign DHold">-->
<!--            环境确认-->
<!--          </div>-->
<!--          <div style="width: calc(100% - 120px)" class="DConfirmForm el-wt-border-left">-->
<!--            &lt;!&ndash; 单位名称 &ndash;&gt;-->
<!--            <el-form-item label="人员" style="width: 49%">-->
<!--              <el-input v-model="form.verifyPersonnel" placeholder="请输入单位名称"></el-input>-->
<!--            </el-form-item>-->
<!--            &lt;!&ndash; 联系人 &ndash;&gt;-->
<!--            <el-form-item label="日期" style="width: 48%">-->
<!--              <el-input v-model="form.verifyDate" placeholder="请输入联系人"></el-input>-->
<!--            </el-form-item>-->
<!--          </div>-->
<!--        </div>-->
<!--      </div>-->
<!--    </el-form>-->
<!--  </div>-->
<!--</template>-->
<template>
  <div class="fa-card-a" style="max-height: calc(100vh - 130px);overflow-y: auto">
    <el-form ref="form" :inline="true" :model="form" label-width="120px" class="confirmFormAuto">
      <div class="DConfirmForm">
        <el-form-item label-width="60px" label="编号:" style="width: 99%">
          <span>{{ form.code }}</span>
        </el-form-item>
      </div>
      <div class="confirmDAuto DConfirmForm">
        <el-form-item label="专业实验室名称" style="width: 49%">
          <el-input v-model="form.name" placeholder="请输入编号名称"></el-input>
        </el-form-item>
        <el-form-item label="测试地点" style="width: 49%">
          <el-input v-model="form.place" placeholder="请输入编号名称"></el-input>
        </el-form-item>
        <el-form-item label="被测软件" style="width: 49%">
          <el-input v-model="form.software" placeholder="请输入编号名称"></el-input>
        </el-form-item>
        <el-form-item label="版本" style="width: 49%">
          <el-input v-model="form.versions" placeholder="请输入编号名称"></el-input>
        </el-form-item>
        <div class="el-flex 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 style="position:relative;" class="el-software el-margin-top-bot" height="150" border
                        :data="form.softwareData"
                        stripe>
                <el-table-column prop="code" align="center" width="80" label="序号"></el-table-column>
                <el-table-column prop="name" min-width="300" label="软件项名称">

<!--<script>-->
<!--  export default {-->
<!--    name: 'confirmForm',-->
<!--    data() {-->
<!--      return {-->
<!--        form: {-->
<!--          code: '719G19804/P3A-09-20XX-00X',-->
<!--          name: '',-->
<!--          place: '',-->
<!--          software: '',-->
<!--          versions: '',-->
<!--          buildPersonnel: '',-->
<!--          buildDate: '',-->
<!--          isKill:1,-->
<!--          VirusLibraryVersion: '',-->
<!--          verifyPersonnel: '',-->
<!--          verifyDate: '',-->
<!--          checkList: [1, 0],-->
<!--          softwareData:[-->
<!--            {code:'1',name:'awdas',versions:'1.3.1',use:'奥迪',unit:'单位1'},-->
<!--            {code:'2',name:'阿尔法',versions:'1.3.1',use:'奥迪',unit:'单位2'},-->
<!--            {code:'3',name:'awed',versions:'1.3.1',use:'奥迪',unit:'单位3'},-->
<!--            {code:'4',name:'国土部',versions:'1.3.1',use:'奥迪',unit:'单位4'},-->
<!--          ],-->
<!--          hardwareData:[-->
<!--            {code:'1',name:'awdas',use:'车上',number:'2',state:'21',unit:'单位1'},-->
<!--            {code:'2',name:'qe',use:'515',number:'1',state:'21',unit:'单位2'},-->
<!--            {code:'3',name:'123',use:'1234',number:'42',state:'11',unit:'单位4'},-->
<!--            {code:'4',name:'1515',use:'123',number:'1',state:'21',unit:'单位51'},-->
<!--          ],-->
<!--          analyzeData:[-->
<!--            {code:'1',realEnvironment:'真实环境1',testEnvironment:'测试环境1',environmentalDifference:'123',influence:'wu',measure:'12'},-->
<!--            {code:'1',realEnvironment:'真实环境1',testEnvironment:'测试环境1',environmentalDifference:'123',influence:'wu',measure:'14'},-->
<!--            {code:'1',realEnvironment:'真实环境1',testEnvironment:'测试环境1',environmentalDifference:'123',influence:'wu',measure:'15'},-->
<!--            {code:'1',realEnvironment:'真实环境1',testEnvironment:'测试环境1',environmentalDifference:'123',influence:'wu',measure:'16'},-->
<!--          ],-->
<!--        },-->
<!--      }-->
<!--    },-->
<!--  }-->
<!--</script>-->
                </el-table-column>
                <el-table-column prop="versions" align="center" width="180" label="版本">

<!--<style>-->
<!--.confirmFormAuto {-->
<!--  width: 70%;-->
<!--  margin: 0 auto;-->
<!--}-->
<!--.confirmDAuto{-->
<!--  border: 1px solid;-->
<!--}-->
                </el-table-column>
                <el-table-column prop="use" align="center" width="180" label="用途">

<!--.el-flex {-->
<!--  display: flex;-->
<!--  align-items: center;-->
<!--}-->
                </el-table-column>
                <el-table-column prop="unit" label="提供单位" width="180" align="center">

<!--.DFormWidth {-->
<!--  width: 120px;-->
<!--}-->
                </el-table-column>
              </el-table>
              <div class="icon-container" @click="addRow()">
                <!-- 放置固定的图标 -->
                <i class="el-icon-plus"></i>
              </div>
            </div>
            <div style="padding: 5px">硬件资源：</div>
            <el-table class="el-software el-margin-top-bot" height="150" border :data="form.hardwareData"
                      stripe>
              <el-table-column prop="code" align="center" width="80" label="序号"></el-table-column>
              <el-table-column prop="name" min-width="300" label="硬件和固件项目名称"></el-table-column>
              <el-table-column prop="use" align="center" width="180" label="用途"></el-table-column>
              <el-table-column prop="number" align="center" width="80" label="数量"></el-table-column>
              <el-table-column prop="state" align="center" width="120" label="状态"></el-table-column>
              <el-table-column prop="unit" align="center" width="180" label="提供单位"></el-table-column>
            </el-table>
          </div>
        </div>
        <div class="el-flex el-B-border">
          <div class="DFormWidth DAlign DHold">
            动态测试环境图
          </div>
          <div style="width: calc(100% - 120px);">
            <div style="height:150px" class="el-wt-border-left">
            </div>
          </div>
        </div>
        <div class="el-flex el-B-border">
          <div class="DFormWidth DAlign DHold">
            环境差异性分析
          </div>
          <div class="el-wt-border-left" style="padding-left:5px;width: calc(100% - 130px)">
            <el-table class="el-software el-margin-top-bot" height="150" border :data="form.analyzeData"
                      stripe>
              <el-table-column prop="code" align="center" width="80" label="序号"></el-table-column>
              <el-table-column prop="realEnvironment" min-width="300" label="真实环境"></el-table-column>
              <el-table-column prop="testEnvironment" align="center" width="100" label="测试环境"></el-table-column>
              <el-table-column prop="environmentalDifference" align="center" width="100"
                               label="环境差异"></el-table-column>
              <el-table-column prop="influence" align="center" width="160" label="对测试结果影响"></el-table-column>
              <el-table-column prop="measure" align="center" width="180" label="措施"></el-table-column>
            </el-table>
          </div>
        </div>
        <div class="el-flex el-B-border">
          <div class="DFormWidth DAlign DHold">
            环境建立
          </div>
          <div style="width: calc(100% - 120px)" class="DConfirmForm el-wt-border-left">
            <el-form-item label="人员" style="width: 49%">
              <el-input v-model="form.buildPersonnel" placeholder="请输入单位名称"></el-input>
            </el-form-item>
            <el-form-item label="日期" style="width: 48%">
              <el-input v-model="form.buildDate" placeholder="请输入联系人"></el-input>
            </el-form-item>
            <el-form-item label-width="160px" class="isKill" label="是否进行环境病毒查杀" style="width: 49%">
              <el-radio-group v-model="form.isKill">
                <el-radio :label="0">是</el-radio>
                <el-radio :label="1">否</el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item label="病毒库版本" style="width: 48%">
              <el-input v-model="form.VirusLibraryVersion" placeholder="请输入病毒库版本"></el-input>
            </el-form-item>
          </div>
        </div>
        <div class="el-flex">
          <div class="DFormWidth DAlign DHold">
            环境确认
          </div>
          <div style="width: calc(100% - 120px)" class="DConfirmForm el-wt-border-left">
            <!-- 单位名称 -->
            <el-form-item label="人员" style="width: 49%">
              <el-input v-model="form.verifyPersonnel" placeholder="请输入单位名称"></el-input>
            </el-form-item>
            <!-- 联系人 -->
            <el-form-item label="日期" style="width: 48%">
              <el-input v-model="form.verifyDate" placeholder="请输入联系人"></el-input>
            </el-form-item>
          </div>
        </div>
      </div>
    </el-form>
  </div>
</template>

<!--.DAlign {-->
<!--  text-align: center;-->
<!--}-->
<script>
export default {
  name: 'confirmForm',
  data() {
    return {
      form: {
        code: '719G19804/P3A-09-20XX-00X',
        name: '',
        place: '',
        software: '',
        versions: '',
        buildPersonnel: '',
        buildDate: '',
        isKill: 1,
        VirusLibraryVersion: '',
        verifyPersonnel: '',
        verifyDate: '',
        checkList: [1, 0],
        softwareData: [
          {code: '1', name: 'awdas', versions: '1.3.1', use: '奥迪', unit: '单位1'},
          {code: '2', name: '阿尔法', versions: '1.3.1', use: '奥迪', unit: '单位2'},
          {code: '3', name: 'awed', versions: '1.3.1', use: '奥迪', unit: '单位3'},
          {code: '4', name: '国土部', versions: '1.3.1', use: '奥迪', unit: '单位4'},
        ],
        hardwareData: [
          {code: '1', name: 'awdas', use: '车上', number: '2', state: '21', unit: '单位1'},
          {code: '2', name: 'qe', use: '515', number: '1', state: '21', unit: '单位2'},
          {code: '3', name: '123', use: '1234', number: '42', state: '11', unit: '单位4'},
          {code: '4', name: '1515', use: '123', number: '1', state: '21', unit: '单位51'},
        ],
        analyzeData: [
          {
            code: '1',
            realEnvironment: '真实环境1',
            testEnvironment: '测试环境1',
            environmentalDifference: '123',
            influence: 'wu',
            measure: '12'
          },
          {
            code: '1',
            realEnvironment: '真实环境1',
            testEnvironment: '测试环境1',
            environmentalDifference: '123',
            influence: 'wu',
            measure: '14'
          },
          {
            code: '1',
            realEnvironment: '真实环境1',
            testEnvironment: '测试环境1',
            environmentalDifference: '123',
            influence: 'wu',
            measure: '15'
          },
          {
            code: '1',
            realEnvironment: '真实环境1',
            testEnvironment: '测试环境1',
            environmentalDifference: '123',
            influence: 'wu',
            measure: '16'
          },
        ],
      },
    }
  },
  methods:{
    addRow(){

<!--.DConfirmForm {-->
<!--  /*border-left: 1px solid;*/-->
<!--  width: 100%;-->
<!--}-->
    }
  },
}
</script>

<!--.DConfirmForm > .el-form-item > .el-form-item__content {-->
<!--  width: calc(100% - 120px);-->
<!--}-->
<!--.DConfirmForm > .el-form-item.isKill > .el-form-item__content {-->
<!--  width: calc(100% - 160px);-->
<!--}-->
<!--.el-form-border{-->
<!--  border-top: 1px solid;-->
<!--  border-bottom: 1px solid;-->
<!--}-->
<!--.el-B-border{-->
<!--  border-bottom: 1px solid;-->
<!--}-->
<!--.el-margin-top-bot{-->
<!--  margin-top:5px;-->
<!--  margin-bottom:5px;-->
<!--}-->
<!--.el-wt-border-left{-->
<!--  border-left:1px solid;-->
<!--}-->
<!--.zt .el-table.el-software th {-->
<!--  background: transparent;-->
<!--}-->
<style>
.confirmFormAuto {
  width: 70%;
  margin: 0 auto;
}

<!--.zt .el-table.el-software th > .cell {-->
<!--  font-weight: 500;-->
<!--}-->
<!--.DHold{-->
<!--  font-weight: 600;-->
<!--}-->
<!--.zt .el-table.el-software{-->
<!--  font-size: 14px;-->
<!--}-->
<!--</style>-->
.confirmDAuto {
  border: 1px solid;
}

.el-flex {
  display: flex;
  align-items: center;
}

.DFormWidth {
  width: 120px;
}

.DAlign {
  text-align: center;
}

.DConfirmForm {
  /*border-left: 1px solid;*/
  width: 100%;
}

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

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

.el-form-border {
  border-top: 1px solid;
  border-bottom: 1px solid;
}

.el-B-border {
  border-bottom: 1px solid;
}

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

.el-wt-border-left {
  border-left: 1px solid;
}

.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;
}

.table-container {
  position: relative;
}

.icon-container {
  position: absolute;
  bottom: -30px;
  left: 50%;
  width: 40px;
  height: 30px;
  text-align: center;
  line-height: 30px;
  transform: translateX(-50%);
  border: 1px solid #EBEEF5;
  background-color: #fafafa;
  box-shadow: 0 3px 6px 0 rgba(72, 119, 232, 0.14);
  border-radius: 2px;
}
</style>

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

@@ -1,43 +1,158 @@
<template>
  <zt-dialog ref="dialog" column="2" @confirm="formSubmit">
    <el-form :model="dataForm" ref="dataForm" :disabled="dataForm.disabled" label-width="120px">
      <zt-form-item label="编号" prop="code" rules="required">
                        <el-input v-model="dataForm.code"></el-input>
                </zt-form-item>
      <zt-form-item label="硬软件资源" prop="hardSoftwareRes" rules="required">
                        <el-input v-model="dataForm.hardSoftwareRes"></el-input>
                </zt-form-item>
      <zt-form-item label="动态测试环境图" prop="testEnvirontDiagram" rules="required">
                        <el-input v-model="dataForm.testEnvirontDiagram"></el-input>
                </zt-form-item>
      <zt-form-item label="环境差异性分析" prop="environAnalysis" rules="required">
                        <el-input v-model="dataForm.environAnalysis"></el-input>
                </zt-form-item>
      <zt-form-item label="环境建立" prop="environEstablish" rules="required">
                        <el-input v-model="dataForm.environEstablish"></el-input>
                </zt-form-item>
      <zt-form-item label="环境建立人员" prop="establishStaff" rules="required">
                        <el-input v-model="dataForm.establishStaff"></el-input>
                </zt-form-item>
      <zt-form-item label="环境建立日期" prop="establishDate" rules="required">
                        <el-input v-model="dataForm.establishDate"></el-input>
                </zt-form-item>
      <zt-form-item label="环境确认" prop="environConfirmat" rules="required">
                        <el-input v-model="dataForm.environConfirmat"></el-input>
                </zt-form-item>
      <zt-form-item label="环境确认人员" prop="confirmatStaff" rules="required">
                        <el-input v-model="dataForm.confirmatStaff"></el-input>
                </zt-form-item>
      <zt-form-item label="环境确认日期" prop="confirmatDate" rules="required">
                        <el-input v-model="dataForm.confirmatDate"></el-input>
                </zt-form-item>
      <zt-form-item label="是否进行环境病毒查杀" prop="isVirusScan" rules="required">
                        <el-input v-model="dataForm.isVirusScan"></el-input>
                </zt-form-item>
      <zt-form-item label="病毒库版本" prop="virusDatabaseVersion" rules="required">
                        <el-input v-model="dataForm.virusDatabaseVersion"></el-input>
                </zt-form-item>
    </el-form>
  <zt-dialog ref="dialog" column="2" @confirm="formSubmit" append-to-body title="测试环境建立确认表">
      <el-form :model="dataForm" style="padding: 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.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.agencyName" placeholder="专业实验室名称"></el-input>
          </el-form-item>
          <el-form-item class="marginTopAndMarginBottom" label="测试地点" style="width: 49%">
            <el-input v-model="dataForm.site" placeholder="测试地点"></el-input>
          </el-form-item>
          <el-form-item  label="被测软件" style="width: 49%">
            <el-input v-model="dataForm.softwareName" placeholder="被测软件"></el-input>
          </el-form-item>
          <el-form-item label="版本" style="width: 49%">
            <el-input v-model="dataForm.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 class="el-software el-margin-top-bot" height="150" border :data="dataForm.softwareResourcesList"
                        stripe>
                <el-table-column prop="code" align="center" width="80" label="序号">
                  <template slot-scope="scope">
                    <span v-html="indexFormat(scope.$index)"></span>
                  </template>
                </el-table-column>
                <el-table-column prop="name" min-width="300" label="软件项名称">
                  <template v-slot="{ row }">
                    <el-input v-model="row.itemName" placeholder="软件项名称/版本"></el-input>
                  </template>
                </el-table-column>
                <el-table-column prop="versions" align="center" width="180" label="版本">
                  <template v-slot="{ row }">
                    <el-input v-model="row.version" placeholder="版本"></el-input>
                  </template>
                </el-table-column>
                <el-table-column prop="use" align="center" width="180" label="用途">
                  <template v-slot="{ row }">
                    <el-input v-model="row.usage" placeholder="用途"></el-input>
                  </template>
                </el-table-column>
                <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>
              <div style="padding: 5px">硬件资源：</div>
              <div class="table-container">
              <el-table class="el-software el-margin-top-bot" height="150" border :data="dataForm.hardwareResourcesList"
                        stripe>
                <el-table-column prop="code" align="center" width="80" label="序号"></el-table-column>
                <el-table-column prop="itemName" min-width="300" label="硬件和固件项目名称"></el-table-column>
                <el-table-column prop="usage" align="center" width="180" label="用途"></el-table-column>
                <el-table-column prop="number" align="center" width="80" label="数量"></el-table-column>
                <el-table-column prop="state" align="center" width="120" label="状态"></el-table-column>
                <el-table-column prop="provideUnit" align="center" width="180" label="提供单位"></el-table-column>
              </el-table>
                <div class="icon-container" @click="addHardwareRow()">
                  <!-- 放置固定的图标 -->
                  <i class="el-icon-plus"></i>
                </div>
              </div>
            </div>
          </div>
          <div class="el-flexConfigDialog el-B-border">
            <div class="DFormWidth DAlign DHold">
              动态测试环境图
            </div>
            <div style="width: calc(100% - 120px);">
              <div style="height:150px" class="el-wt-border-left">
                <span>{{dataForm.testEnvirontDiagram}}</span>
              </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 class="el-software el-margin-top-bot" height="150" border :data="dataForm.environAnalysisList"
                        stripe>
                <el-table-column prop="code" align="center" width="80" label="序号"></el-table-column>
                <el-table-column prop="realEnviron" min-width="300" label="真实环境"></el-table-column>
                <el-table-column prop="testEnviron" align="center" width="100" label="测试环境"></el-table-column>
                <el-table-column prop="environDifference" align="center" width="100" label="环境差异"></el-table-column>
                <el-table-column prop="resultImpact" align="center" width="160" label="对测试结果影响"></el-table-column>
                <el-table-column prop="measure" align="center" width="180" label="措施"></el-table-column>
              </el-table>
                <div class="icon-container" @click="addDiscrepancyRow()">
                  <!-- 放置固定的图标 -->
                  <i class="el-icon-plus"></i>
                </div>
              </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.establishStaff" placeholder="人员"></el-input>
              </el-form-item>
              <el-form-item class="marginTopAndMarginBottom" label="日期" style="width: 48%">
                <el-date-picker
                  v-model="dataForm.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.isVirusScan" dict="is_or_not" :radio="true"></zt-dict>
              </el-form-item>
              <el-form-item label="病毒库版本" style="width: 48%">
                <el-input v-model="dataForm.virusDatabaseVersion" placeholder="请输入病毒库版本"></el-input>
              </el-form-item>
            </div>
          </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.confirmatStaff" placeholder="人员"></el-input>
              </el-form-item>
              <!-- 联系人 -->
              <el-form-item class="marginTopAndMarginBottom" label="日期" style="width: 48%">
                <el-date-picker
                  v-model="dataForm.confirmatDate"
                  type="date"
                  placeholder="日期">
                </el-date-picker>
              </el-form-item>
            </div>
          </div>
        </div>
      </el-form>
  </zt-dialog>
</template>

@@ -48,29 +163,57 @@
        dataForm: {
          id: '',
          code: '',
          agencyName:'',
          site:'',
          softwareName:'',
          softwareIdentity:'',
          hardSoftwareRes: '',
          testEnvirontDiagram: '',
          softwareResourcesList:[],
          hardwareResourcesList:[],
          environAnalysisList:[],
          establishStaff:'',
          establishDate:'',
          environAnalysis: '',
          environEstablish: '',
          establishStaff: '',
          establishDate: '',
          environConfirmat: '',
          confirmatStaff: '',
          confirmatDate: '',
          isVirusScan: '',
          virusDatabaseVersion: ''
          virusDatabaseVersion: '',
          softwareData:[]
        }
      }
    },
    methods: {
      init(id,row){
        this.dataForm.id = row.id
        this.dataForm.projectId = row.projectId
        // this.dataForm.disabled
        this.getInfo()
        console.log(this.dataForm.id,this.dataForm.projectId,'params params')
      },
      // 获取信息
      async getInfo() {
        let res = await this.$http.get(`/project/Environ/${this.dataForm.id}`)
        let params = {
          orderId: this.dataForm.id,
          projectId: this.dataForm.projectId
        }
        let res = await this.$http.get(`/project/Environ/getDto`,{params: params})
        this.dataForm = {
          ...this.dataForm,
          ...res.data
        }
        console.log(this.dataForm,'this.dataForm')
      },
      indexFormat(index){
        return index += 1
      },
      addSoftwareRow(){
        this.dataForm.softwareData.push({})
      },
      addHardwareRow(){},
      addDiscrepancyRow(){},
      // 表单提交
      async formSubmit() {
        let res = await this.$http[!this.dataForm.id ? 'post' : 'put']('/project/Environ/', this.dataForm)
@@ -83,3 +226,96 @@
    }
  }
</script>
<style>
.confirmFormAuto {
  width: 70%;
  margin: 0 auto;
}
.confirmDAuto{
  border: 1px solid rgba(0,0,0,.2);
}

.el-flexConfigDialog {
  display: flex;
  align-items: center;
}

.DFormWidth {
  width: 120px;
}

.DAlign {
  text-align: center;
}

.DConfirmForm {
  /*border-left: 1px solid;*/
  width: 100%;
}

.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;
}
.table-container {
  position: relative;
}

.icon-container {
  z-index: 1;
  position: absolute;
  bottom: -20px;
  left: 50%;
  width: 40px;
  height: 30px;
  text-align: center;
  line-height: 30px;
  transform: translateX(-50%);
  border: 1px solid #EBEEF5;
  background-color: #fafafa;
  box-shadow: 0 3px 6px 0 rgba(72, 119, 232, 0.14);
  border-radius: 2px;
}
</style>

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

@@ -1,25 +1,32 @@
<template>
  <el-card shadow="never" class="aui-card--fill">
    <div class="mod-project-environ}">
      <zt-table-wraper query-url="/project/Environ/page" delete-url="/project/Environ" v-slot="{ table }">
      <zt-table-wraper query-url="/project/Environ/page" delete-url="/project/Environ" v-slot="{ table }" @dataLoaded="dataLoaded">
        <el-form :inline="true" :model="dataForm" @keyup.enter.native="table.query()">
          <el-form-item>
                                <el-input v-model="dataForm.code" placeholder="请输入编号" clearable></el-input>
              

          </el-form-item>
          <el-form-item>
            <zt-button type="query" @click="table.query()"/>
<!--            <zt-button type="query" @click="table.query()"/>-->
            <zt-button type="primary" class="el-icon-edit" perm="project:add" @click="add()">新增</zt-button>
            <zt-button type="add" perm="project:add" @click="table.editHandle()"/>
            <zt-button type="delete" perm="project:delete" @click="table.deleteHandle()"/>
          </el-form-item>
        </el-form>
        <el-table v-loading="table.dataLoading" :data="table.dataList" height="100px" v-adaptive="{bottomOffset:70}" border @selection-change="table.selectionChangeHandle">
          <el-table-column type="selection" width="40"/>
          <el-table-column align="center" type="selection" width="40"/>
            <el-table-column prop="code" label="编号"/>
          <el-table-column prop="softwareName" label="软件名称"/>
          <el-table-column prop="softwareIdentity" label="标识"/>
              <zt-table-column-handle :table="table" edit-perm="project:update" delete-perm="project::delete"/>
        </el-table>
        <!-- 弹窗, 新增 / 修改 -->
        <add-or-update @refreshDataList="table.query"/>
        <add-or-update ref="addOrUpdate" @refreshDataList="table.query"/>
        <ProjectSelect ref="projectSelect"
                       @refreshDataList="table.query"
                       @setProjectInfo="openAddWin">
        </ProjectSelect>
      </zt-table-wraper>
    </div>
  </el-card>
@@ -27,6 +34,7 @@

<script>
  import AddOrUpdate from './Environ-AddOrUpdate'
  import ProjectSelect from "./Project-select.vue"
  export default {
    data() {
      return {
@@ -36,7 +44,20 @@
      }
    },
    components: {
      AddOrUpdate
      AddOrUpdate,
      ProjectSelect
    },
    methods:{
      dataLoaded(data){
        console.log(data,'data daraList')
      },
      add() {
        this.$refs.projectSelect.$refs.dialog.init("environ")
      },
      openAddWin(row) {
        console.log(row.id, 'row.id')
        this.$refs.addOrUpdate.$refs.dialog.init(null, {id: null, projectId: row.id})
      },
    }
  }
</script>