6

jinlin

2023-11-29 d89ef43c4713adf26f74b796653d1dd15ff1f81a

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

@@ -3,36 +3,51 @@
    <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>
          <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>
        <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 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="软件项名称">

                </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 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>
@@ -50,8 +65,8 @@
            动态测试环境图
          </div>
          <div style="width: calc(100% - 120px);">
           <div style="height:150px" class="el-wt-border-left">
           </div>
            <div style="height:150px" class="el-wt-border-left">
            </div>
          </div>
        </div>
        <div class="el-flex el-B-border">
@@ -64,7 +79,8 @@
              <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="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>
@@ -74,7 +90,7 @@
          <div class="DFormWidth DAlign DHold">
            环境建立
          </div>
          <div style="width: calc(100% - 120px)"  class="DConfirmForm el-wt-border-left">
          <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>
@@ -113,45 +129,78 @@
</template>

<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'},
          ],
        },
      }
    },
  }
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(){

    }
  },
}
</script>

<style>
@@ -159,7 +208,8 @@
  width: 70%;
  margin: 0 auto;
}
.confirmDAuto{

.confirmDAuto {
  border: 1px solid;
}

@@ -184,23 +234,29 @@
.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{

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

.el-B-border {
  border-bottom: 1px solid;
}
.el-margin-top-bot{
  margin-top:5px;
  margin-bottom:5px;

.el-margin-top-bot {
  margin-top: 5px;
  margin-bottom: 5px;
}
.el-wt-border-left{
  border-left:1px solid;

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

.zt .el-table.el-software th {
  background: transparent;
}
@@ -208,10 +264,31 @@
.zt .el-table.el-software th > .cell {
  font-weight: 500;
}
.DHold{

.DHold {
  font-weight: 600;
}
.zt .el-table.el-software{

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