1.优化项目2.搜索栏多行的变为一行可展开

loulijun2021

2022-09-07 ef9633e0d1689fd8869170f3aa0af6c90c2e5e7f

 src/views/zlgl/gxjyjl.vue

@@ -31,10 +31,10 @@
            <el-form-item label="工序名称" style=" display: flex;">
              <el-input v-model="form.stepname" placeholder="请输入" style="width: 200px" />
            </el-form-item>
            <el-form-item label="标准名称" style=" display: flex;">
            <el-form-item v-show="isExpandForm" label="标准名称" style=" display: flex;">
              <el-input v-model="form.standname" placeholder="请输入" style="width: 200px" />
            </el-form-item>
            <el-form-item label="检验类型" style=" display: flex;">
            <el-form-item v-show="isExpandForm" label="检验类型" style=" display: flex;">
              <el-select v-model="form.checktype" style="width: 200px" placeholder="请选择">
                <el-option
                  v-for="item in checktypeArr"
@@ -44,7 +44,7 @@
                />
              </el-select>
            </el-form-item>
            <el-form-item label="检验结果" style=" display: flex;">
            <el-form-item v-show="isExpandForm" label="检验结果" style=" display: flex;">
              <el-select v-model="form.checkresult   " style="width: 200px" placeholder="请选择">
                <el-option
                  v-for="item in checkresultArr"
@@ -54,7 +54,6 @@
                />
              </el-select>
            </el-form-item>

          </div>
          <div style="display: flex;align-items: start;margin-top: 5px;z-index: 2">
            <el-button type="primary" icon="el-icon-search" @click="search">查询</el-button>
@@ -62,14 +61,21 @@
          </div>
        </el-form>
      </div>

      <div class="elTableDiv">
      <div
        class="bodyTopFormExpand"
        @click="isExpandForm=!isExpandForm"
      >
        <i
          :class="!isExpandForm?'el-icon-arrow-down':'el-icon-arrow-up'"
          :style="{color:'#42B983'}"
        /></div>
      <div class="elTableDiv" style="margin-top: 0">
        <el-table
          :data="tableData"
          :height="tableHeight+'px'"
          :height="isExpandForm?tableHeight:(tableHeight+40)+'px'"
          border
          :row-class-name="tableRowClassName"
          :style="{width: 100+'%',height:tableHeight+'px',}"
          :style="{width: 100+'%',height:isExpandForm?tableHeight:(tableHeight+40)+'px'}"
          highlight-current-row
          :header-cell-style="this.$headerCellStyle"
          :cell-style="this.$cellStyle"
@@ -341,25 +347,8 @@
    Pagination, ImportPicker
  },
  data() {
    const validateName = (rule, value, callback) => {
      if (!value) {
        return callback(new Error('请输入编码'))
      } else {
        if (SER_HZ.test(value)) {
          return callback(new Error('编码不能为中文'))
        } else {
          callback()
        }
      }
    }
    const validateTypeCode = (rule, value, callback) => {
      if (!value) {
        return callback(new Error('请选择上级'))
      } else {
        callback()
      }
    }
    return {
      isExpandForm: false,
      mainHeight: 0,
      tableHeight: 0,
      form: {
@@ -536,7 +525,7 @@
    getHeight() {
      this.$nextTick(() => {
        this.mainHeight = window.innerHeight - 85
        this.tableHeight = this.mainHeight - 240
        this.tableHeight = this.mainHeight - 250
      })
    },
    tableRowClassName({ row, rowIndex }) {