table表格的搜索封装

文件名称tableHeader

<!-- 对表格的搜索项 -->
<template>
  <div class="tableCdt">
    <div class="tableHeader">
      <div
        v-show="screeningStatus"
        v-for="(item, index) in searchCdt"
        :key="index"
        class="item"
      >
        <el-input
          v-if="item.type == 'input'"
          class="input"
          maxlength="20"
          v-bind="{ ...item }"
          v-model.trim="searchForm[item.prop]"
          :placeholder="item.placeholder"
          @keyup.enter.native="searchFn"
          @blur="searchForm[item.prop] = $event.target.value.trim()"
        >
          <template slot="prepend">{{ item.label }}</template>
        </el-input>
        <!-- 手写组合的select -->
        <div class="compact" v-if="item.type == 'select'">
          <div class="label">{{ item.label }}</div>
          <el-select
            v-bind="{ ...item }"
            v-model="searchForm[item.prop]"
            :placeholder="item.placeholder"
          >
            <el-option label="全部" value=""></el-option>
            <el-option
              v-for="obj in item.options"
              :key="obj.value"
              :label="obj.label"
              :value="obj.value"
            ></el-option>
          </el-select>
        </div>
        <!-- 手写组合的date -->
        <div class="compact" v-if="item.type == 'date'">
          <div class="label">{{ item.label }}</div>
          <el-date-picker
            value-format="yyyy-MM-dd"
            v-bind="{ ...item }"
            v-model="searchForm[item.prop]"
            type="daterange"
            range-separator="至"
            :start-placeholder="item.placeholder"
            :end-placeholder="item.placeholder1"
          >
          </el-date-picker>
        </div>
      </div>

      <div
        v-show="!screeningStatus"
        v-for="(item, index) in searchCdt.slice(0, 4)"
        :key="index.prop"
        class="item"
      >
        <el-input
          maxlength="20"
          v-if="item.type == 'input'"
          class="input"
          v-bind="{ ...item }"
          :placeholder="item.placeholder"
          v-model="searchForm[item.prop]"
          @keyup.enter.native="searchFn"
          @blur="searchForm[item.prop] = $event.target.value.trim()"
        >
          <template slot="prepend">{{ item.label }}</template>
        </el-input>
        <!-- 手写组合的select -->
        <div class="compact" v-if="item.type == 'select'">
          <div class="label">{{ item.label }}</div>
          <el-select
            v-bind="{ ...item }"
            v-model="searchForm[item.prop]"
            :placeholder="item.placeholder"
          >
            <el-option label="全部" value=""></el-option>
            <el-option
              v-for="obj in item.options"
              :key="obj.value"
              :label="obj.label"
              :value="obj.value"
            ></el-option>
          </el-select>
        </div>
      </div>
    </div>
    <div class="searchBtn">
      <div class="tips">
        共筛选出<span style="color:rgba(12, 111, 255, 1)">
          {{ this.total }} </span
        >条记录
      </div>
      <div class="tips">
        <span
          v-if="searchCdt.length > 4"
          style="color:rgba(22, 109, 241, 1)"
          class="pointer"
          @click="handleScreen"
          >{{ screeningStatus ? "收起" : "展开" }} </span
        ><i
          class="iconfont icon-xia pointer"
          @click="handleScreen"
          v-if="searchCdt.length > 4"
          style="margin:0px 8px 0 4px;color:rgba(153, 153, 153, 1);font-size: 12px;"
        ></i>
        <el-button @click="reset">重置</el-button>
        <el-button type="primary" @click="searchFn">查询</el-button>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name: "tableHeader",
  props: ["searchCdt", "total"],
  data() {
    return {
      searchForm: {},
      optionSelect: [],
      screeningStatus: false, // 筛选打开状态
    };
  },
  computed: {
    //搜索条件
    // searchCdt() {
    //   return [
    //     {
    //       type: 'input',
    //       placeholder: '请输入',
    //       label: '供应商名称',
    //       prop: 'gysmc'
    //     },
    //     {
    //       type: 'input',
    //       placeholder: '请输入',
    //       label: '法人姓名',
    //       prop: 'frxm'
    //     },
    //     {
    //       type: 'input',
    //       placeholder: '请输入',
    //       label: '企业负责人',
    //       prop: 'qyfzr'
    //     },
    //     {
    //       type: 'select',
    //       placeholder: '请输入',
    //       label: '申报状态',
    //       prop: 'sbzt'
    //     },
    //     {
    //       type: 'input',
    //       placeholder: '请输入',
    //       label: '审批状态',
    //       prop: 'spzt'
    //     }
    //   ]
    // }
  },
  created() {
    // this.searchCdt.forEach((v) => {
    //   if (v.type == 'select') {
    //     console.log(v.value)
    //     this.searchForm[v.prop] = v.value
    //   }
    // })
  },
  mounted() {},
  methods: {
    searchFn() {
      console.log(this.searchForm, "searchForm");
      //点击搜索完重新调表格的接口
      this.$parent.getTableData(this.searchForm,{current:1});
      //查询完数据清空
      // this.searchForm = {}
    },
    reset() {
      //重置清空
      this.searchForm = {};
      this.$parent.getTableData(this.searchForm,{current:1});
    },
    // 点击展开事件
    handleScreen() {
      this.screeningStatus = !this.screeningStatus;
    },
  },
};
</script>
<style scoped lang="less">
.tableCdt {
  background: rgba(255, 255, 255, 1);
  width: calc(100%);
  margin-bottom: 12px;
  .tableHeader {
    border-radius: 2px;
    padding: 14px 16px;
    display: flex;
    flex-wrap: wrap;

    .item {
      width: calc(25% - 16px);
      margin-right: 16px;
      margin-top: 16px;
    }

    .item:last-child {
      margin-right: 0px;
    }

    .input {
      // width: calc(25% - 16px);
      margin-right: 16px;
    }

    /deep/.el-input.el-input-group.el-input-group--prepend {
      background-color: #fff;
      border-radius: 5px;
      border: 1px solid #dcdfe6;

      .el-input-group__prepend {
        background-color: #fff;
        padding-left: 11px;
        padding-right: 2px;
        font-size: 14px;
        font-family: PingFang SC;
        font-weight: 400;
        color: rgba(153, 153, 153, 1) !important;
        box-shadow: 0 0px 0px #ccc !important;
        border: 1px solid transparent;
      }

      .el-input__inner {
        border-top-left-radius: 0px !important;
        border-bottom-left-radius: 0px !important;
        // border-left: 1px solid red !important;
        box-shadow: 0 0px 0px #ccc !important;
        border: 1px solid transparent;
        // border: 1px solid #dcdfe6;
      }
    }
  }

  .searchBtn {
    border-top: 1px solid rgba(217, 217, 217, 1);
    padding: 14px 14px;
    display: flex;
    justify-content: space-between;
    align-items: center;

    .tips {
      font-size: 14px;
      font-weight: 400;
      color: rgba(0, 0, 0, 1);
    }
  }
}
</style>
<style lang="less">
.compact {
  display: flex;
  align-items: center;
  border: 1px solid #dcdfe6;
  background-color: #fff;
  border-radius: 5px;

  .label {
    font-size: 14px;
    font-weight: 400;
    color: rgba(153, 153, 153, 1);
    white-space: nowrap;
    margin-right: 4px;
    padding: 0 2px 0 11px;
  }

  .el-select {
    width: 100%;

    .el-input.el-input--suffix {
      .el-input__inner {
        border: 1px solid transparent;
        border-top-left-radius: 0px !important;
        border-bottom-left-radius: 0px !important;
        color: rgba(26, 26, 26, 1) !important;
      }
    }

  }
      .el-date-editor.el-range-editor.el-input__inner.el-date-editor--daterange{
        border: 1px solid transparent;
        border-top-left-radius: 0px !important;
        border-bottom-left-radius: 0px !important;
        color: rgba(26, 26, 26, 1) !important;
    }
}

.el-button.el-button--default {
  font-size: 14px;
  font-weight: 400;
  color: rgba(102, 102, 102, 1);
  padding: 5px 18px;
  line-height: 22px;
}

.el-button.el-button--primary {
  font-size: 14px;
  font-weight: 400;
  color: rgba(255, 255, 255, 1);
  border-radius: 2px;
  background: rgba(12, 111, 255, 1);
  padding: 5px 18px;
  line-height: 22px;
}
</style>

引入组件

<template>
  <div class="basicInfo">
  //引入组件
    <tableHeader
      v-if="showHeadSearch"
      :searchCdt="searchCdt"
      :total="searchTotal"
    />
    <div class="tableMain" :class="{ showHeight: showHeadSearch }">
      <div class="header">
        <div class="name">
          <div v-if="this.$store.state.roleName == '管理员'">合同管理</div>
          <el-button type="primary" @click="addContract" v-else
            >+ 新增合同</el-button
          >
        </div>
        <div class="searchTable">
          <el-input
            placeholder="合同编号/工程名称/施工单位/建设单位/监理单位"
            v-model="searchValue"
            class="input"
            style="width:400px"
            @keyup.enter.native="searchFn"
            clearable
          >
            <el-button slot="append" icon="el-icon-search"></el-button>
          </el-input>
          <el-button class="gaojisearch" @click="superSearchFn"
            >高级查询</el-button
          >
        </div>
      </div>
      <div class="table">
        <el-table
          ref="multipleTable"
          :data="tableData"
          tooltip-effect="light"
          style="width: 100%"
          :height="550"
          :header-cell-style="{
            background: 'rgba(250, 250, 250, 1)',
            height: '50px',
            color: 'rgba(26, 26, 26, 1)',
            fontWeight: '700',
          }"
          :row-style="{
            height: '50px',
            color: 'rgba(26, 26, 26, 1)',
          }"
          @selection-change="handleSelectionChange"
        >
          <el-table-column type="selection" width="55"> </el-table-column>
          <el-table-column label="序号" width="120">
            <template slot-scope="scope">{{ scope.$index + 1 }}</template>
          </el-table-column>
          <el-table-column
            label="合同编号"
            width="180"
            :show-overflow-tooltip="true"
          >
            <template slot-scope="scope">{{ scope.row.sbsj }}</template>
          </el-table-column>
          <el-table-column
            prop="qymc"
            label="工程名称"
            width="250"
            :show-overflow-tooltip="true"
          >
            <template slot-scope="scope">{{ scope.row.qymc }}</template>
          </el-table-column>
          <el-table-column
            v-if="isAdmin"
            prop="zzjgdm"
            label="供应商企业"
            width="250"
            :show-overflow-tooltip="true"
          >
            <template slot-scope="scope">{{ scope.row.zzjgdm }}</template>
          </el-table-column>
          <el-table-column
            v-else
            prop="zzjgdm"
            label="施工单位"
            width="250"
            :show-overflow-tooltip="true"
          >
            <template slot-scope="scope">{{ scope.row.zzjgdm }}</template>
          </el-table-column>
          <el-table-column
            prop="qyfr"
            label="建设单位"
            width="200"
            :show-overflow-tooltip="true"
          >
            <template slot-scope="scope">{{ scope.row.qyfr }}</template>
          </el-table-column>
          <el-table-column
            prop="qyfzr"
            label="监理单位"
            width="200"
            :show-overflow-tooltip="true"
          >
            <template slot-scope="scope">{{ scope.row.qyfzr }}</template>
          </el-table-column>
          <!-- <el-table-column
            prop="gdlxr"
            label="工地联系人"
            width="150"
            :show-overflow-tooltip="true"
          >
            <template slot-scope="scope">{{ scope.row.gdlxr }}</template>
          </el-table-column>
          <el-table-column
            prop="creatDate"
            label="创建日期"
            width="150"
            :show-overflow-tooltip="true"
          >
            <template slot-scope="scope">{{ scope.row.creatDate }}</template>
          </el-table-column> -->
          <el-table-column prop="spzt" label="状态" fixed="right" width="120">
            <template slot-scope="scope">
              <el-select v-model="scope.row.spzt" placeholder="请选择">
                <el-option label="未施工" value="1"></el-option>
                <el-option label="施工中" value="2"></el-option>
                <el-option label="已竣工" value="3"></el-option>
              </el-select>
            </template>
          </el-table-column>
          <el-table-column
            prop="handler"
            label="操作"
            fixed="right"
            width="180"
          >
            <template slot-scope="scope">
              <div v-if="isAdmin">
                <span class="blueColor pointer" @click="see(scope.row)"
                  >查看</span
                >
                <el-divider direction="vertical"></el-divider>
                <el-dropdown placement="bottom-start">
                  <span
                    class="blueColor pointer"
                    @click="supplyOrder(scope.row)"
                    >送货单<img
                      src="@/assets/images/up.png"
                      style="margin-left:5px; vertical-align: 2px;"
                  /></span>
                  <el-dropdown-menu slot="dropdown">
                    <el-dropdown-item>黄金糕</el-dropdown-item>
                    <el-dropdown-item>狮子头</el-dropdown-item>
                    <el-dropdown-item>螺蛳粉</el-dropdown-item>
                    <el-dropdown-item disabled>双皮奶</el-dropdown-item>
                  </el-dropdown-menu>
                </el-dropdown>
              </div>
              <div v-else>
                <span
                  class="blueColor pointer"
                  @click="edit(scope.row)"
                  v-if="scope.row.spzt == '1'"
                  >编辑</span
                >
                <el-divider
                  direction="vertical"
                  v-if="scope.row.spzt == '1'"
                ></el-divider>
                <span class="blueColor pointer" @click="see(scope.row)"
                  >查看</span
                >
                <el-divider direction="vertical"></el-divider>
                <el-dropdown placement="bottom-start">
                  <span
                    class="blueColor pointer"
                    @click="supplyOrder(scope.row)"
                    >送货单<img
                      src="@/assets/images/up.png"
                      style="margin-left:5px; vertical-align: 2px;"
                  /></span>
                  <el-dropdown-menu slot="dropdown">
                    <el-dropdown-item>黄金糕</el-dropdown-item>
                    <el-dropdown-item>狮子头</el-dropdown-item>
                    <el-dropdown-item>螺蛳粉</el-dropdown-item>
                    <el-dropdown-item disabled>双皮奶</el-dropdown-item>
                  </el-dropdown-menu>
                </el-dropdown>
              </div>
            </template>
          </el-table-column>
        </el-table>
        <!-- <Completed ref="completedRef" /> -->
      </div>
      <div>
        <div class="pagination">
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage"
            :page-sizes="[10, 50, 100, 200]"
            :page-size="pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
          >
          </el-pagination>
        </div>
      </div>
    </div>
    <ViewContract ref="abuildingRef" />
    <AddContract ref="addContractRef" />
  </div>
</template>
<script>
import tableHeader from "../components/tableHeader.vue";
import ViewContract from "./components/viewContract.vue";
import AddContract from "./components/addContract.vue";
export default {
  name: "",
  components: { tableHeader, ViewContract, AddContract },
  data() {
    return {
      tableData: [],
      multipleSelection: [],
      currentPage: 1,
      pageSize: 10,
      searchValue: "",
      shzt: false,
      showHeadSearch: false,
      searchTotal: 0,
      total: 0,
      contractOptions: [
        { label: "施工中", value: 1 },
        { label: "已竣工", value: 2 },
      ],
    };
  },
  computed: {
    //搜索条件
    searchCdt() {
      return [
        {
          type: "input",
          placeholder: "请输入",
          label: "合同编号",
          prop: "htbh",
        },
        {
          type: "input",
          placeholder: "请输入",
          label: "工程名称",
          prop: "gcbh",
        },
        {
          type: "input",
          placeholder: "请输入",
          label: "施工单位",
          prop: "sgdw",
        },

        {
          type: "input",
          placeholder: "请输入",
          label: "建设单位",
          prop: "jsdw",
        },
        {
          type: "input",
          placeholder: "请输入",
          label: "监理单位",
          prop: "jsdw",
        },
        // {
        //   type: "input",
        //   placeholder: "请输入",
        //   label: "工地联系人",
        //   prop: "jsdw",
        // },
        {
          type: "select",
          placeholder: "请选择",
          label: "合同状态",
          prop: "sbzt",
          options: this.contractOptions,
        },
        {
          type: "date",
          placeholder: "开始日期",
          placeholder1: "结束日期",
          label: "创建日期",
          prop: "sbzt",
        },
      ];
    },
    isAdmin() {
      return this.$store.state.roleName == "管理员";
    },
  },
  created() {
    this.getTableData();
  },
  mounted() {},
  methods: {
    getTableData() {
      this.tableData = [
        {
          id: 1,
          sbsj: "2023-01-22",
          zzjgdm: "14",
          qyfr: "13",
          qymc: "12",
          spzt: "1",
          qyfzr: "11",
          zhzt: false,
        },
        {
          sbsj: "2023-01-22",
          zzjgdm: "0713",
          qyfr: "11",
          qymc: "有限公司",
          spzt: "2",
          qyfzr: "烈王后",
          zhzt: true,
        },
        {
          sbsj: "2023-01-22",
          zzjgdm: "0713",
          qyfr: "11",
          qymc: "有限公司",
          spzt: "1",
          qyfzr: "烈王后",
          zhzt: false,
        },
        {
          sbsj: "2023-01-22",
          zzjgdm: "0713",
          qyfr: "11",
          qymc: "有限公司",
          spzt: "1",
          qyfzr: "烈王后",
          zhzt: false,
        },
      ];
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.pageSize = val;
      getTableData();
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.currentPage = val;
      getTableData();
    },
    addContract() {
      this.$refs.addContractRef.openDrawer(true);
    },
    //编辑
    edit(row) {
      this.$refs.addContractRef.openDrawer(true, row);
    },
    see(row) {
      console.log(row, "row");
      this.$refs.abuildingRef.openDrawer(true);
    },
    //供货单
    supplyOrder() {},
    //高级筛选
    superSearchFn() {
      this.showHeadSearch = !this.showHeadSearch;
      if (!this.showHeadSearch) {
        const searchInfo = {};
        this.searchTotal = 0;
        this.getTableData();
      }
    },
  },
};
</script>
<style scoped lang="less">
.basicInfo {
  height: 100%;
  border-radius: 2px;
  .showHeight {
    height: calc(100% - 80px) !important;
  }
  .tableMain {
    // height: calc(100% - 160px);
    height: calc(100%);
    border-radius: 2px;
    background: rgba(255, 255, 255, 1);

    .header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 16px;

      .name {
        font-size: 16px;
        font-weight: 700;

        color: rgba(0, 122, 255, 1);
      }

      .searchTable {
        display: flex;

        .input {
          width: 282px;
          height: 32px;
          margin-right: 8px;

          /deep/.el-input-group__append {
            background: rgba(255, 255, 255, 1) !important;
          }
        }

        /deep/.gaojisearch.el-button--default {
          border: 1px solid rgba(22, 109, 241, 1);
          font-size: 14px;
          line-height: 22px;
          color: rgba(22, 109, 241, 1);
        }

        .el-button:focus,
        .el-button:hover {
          background-color: transparent;
        }
      }
    }

    /deep/.table {
      border-top: 1px solid rgba(217, 217, 217, 1);
      padding: 16px;
      max-height: 550px !important;
      .el-table {
        .approve {
          padding: 4px 8px 4px 8px;
          border-radius: 2px;
          background: rgba(255, 141, 26, 0.1);
          color: rgba(255, 141, 26, 1);
        }

        .agree {
          padding: 4px 8px 4px 8px;
          border-radius: 2px;
          background: rgba(0, 186, 173, 0.1);
          color: rgba(0, 186, 173, 1);
        }

        .back {
          padding: 4px 8px 4px 8px;
          border-radius: 2px;
          background: rgba(227, 60, 100, 0.1);
          color: rgba(227, 60, 100, 1);
        }
      }
    }
    .pagination {
      .el-pagination {
        text-align: right;
        padding-right: 16px;
      }
    }
    // .pagination {
    //   margin-top: 65px;
    //   position: fixed;
    //   bottom: 10px;
    //   right: 32px;
    // }
  }
}
</style>