编码的方法

haoxuan

2023-10-17 cda743ccc72a379a962a703bb049fa7bd12f3f0b

 src/components/makepager/SearchCommonView.vue

@@ -1,26 +1,31 @@
<template>
  <div class="search-list">
    <div class="search-top">
      <div class="query-class">
      <!-- <div class="query-class">
        <div class="query-class-title">查询分类</div>
        <el-select v-model="queryClassValue" placeholder="请选择" class="query-class-sel" size="mini">
          <el-option v-for="item in queryClassOptions" :key="item.value" :label="item.label" :value="item.value">
          </el-option>
        </el-select>
        <div class="query-class-btn">
        <div class="query-class-btn" @click="queryClassClick">
          <i class="el-icon-setting"></i>
        </div>
      </div>
      </div> -->
      <div class="search">
        <el-input placeholder="请输入内容" v-model="searchInput" class="input-with-select" clearable>
        <el-input placeholder="请输入内容" v-model.trim="searchInput" class="input-with-select" clearable>
          <el-select v-model="searchSelValue" slot="prepend" placeholder="请选择" class="search-sel">
            <el-option v-for="item in searchOptions" :key="item.value" :label="item.label" :value="item.value">
            </el-option>
            <el-option v-for="item in searchOptions" :key="item.value" :label="item.label" :value="item"> </el-option>
          </el-select>
          <i slot="suffix" class="el-icon-search" style="cursor: pointer" @click="searchClick"></i>
          <!-- <i slot="suffix" class="el-icon-search" style="cursor: pointer" @click="searchClick"></i> -->
        </el-input>
      </div>
      <div class="other-search">
      <div class="btn">
        <el-button type="primary" size="mini" @click="searchClick" icon="el-icon-search" style="margin-right: 5px"
          >搜索</el-button
        >
        <el-button size="mini" icon="el-icon-refresh-left" @click="resetClick">重置</el-button>
      </div>
      <!-- <div class="other-search">
        <div class="other-search-high" @click="highSearchClick">
          <div class="high-icon"><i class="el-icon-postcard"></i></div>
          <div>高级查找</div>
@@ -29,9 +34,13 @@
          <div class="high-icon"><i class="el-icon-news"></i></div>
          <div>平铺查找</div>
        </div>
      </div>
        <div v-if="labelSearch" class="other-search-label" @click="labelSearchClick">
          <div class="high-icon"><i class="el-icon-discount"></i></div>
          <div>标签查找</div>
        </div>
      </div> -->
    </div>
    <div v-if="isTileSearch" class="search-bottom">
    <!-- <div v-if="isTileSearch" class="search-bottom">
      <el-table :data="tileSearchData" style="width: 100%">
        <el-table-column prop="selField" label="选择字段" width="430">
          <template slot-scope="scope">
@@ -78,13 +87,18 @@
          <el-button size="small">取消</el-button>
        </div>
      </div>
    </div>
    </div> -->
    <!-- 查询分类弹窗 -->
    <QueryClassSettingDialog v-if="queryClassSetConfig.visible" :editCommonConfig="queryClassSetConfig" />
  </div>
</template>

<script>
import QueryClassSettingDialog from "@/views/other/commonDialog/QueryClassSettingDialog"

export default {
  name: "SearchCommonView",
  components: { QueryClassSettingDialog },
  props: {
    queryClass: {
      type: String,
@@ -95,35 +109,32 @@
      default: () => []
    },
    searchSel: {
      type: String,
      default: "1"
      type: Object,
      default: () => {
        return {
          value: "name",
          label: ""
        }
      }
    },
    searchOptions: {
      type: Array,
      default: () => []
    },
    labelSearch: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      // queryClassOptions: [
      //   { value: "1", label: "全部" },
      //   { value: "2", label: "广告宣传" },
      //   { value: "3", label: "跟进中" },
      //   { value: "4", label: "失败关闭" }
      // ],
      queryClassSetConfig: {
        visible: false,
        infomation: {}
      },
      queryClassValue: this.queryClass,
      searchInput: "",
      searchSelValue: this.searchSel,
      // searchOptions: [
      //   { value: "1", label: "客户名称" },
      //   { value: "2", label: "销售线索编号" },
      //   { value: "3", label: "联系人姓名" },
      //   { value: "4", label: "手机号码" },
      //   { value: "5", label: "商机来源" },
      //   { value: "6", label: "省份" },
      //   { value: "7", label: "城市" },
      //   { value: "8", label: "负责人" }
      // ],
      isTileSearch: false,
      tileSearchData: [
        {
@@ -152,8 +163,18 @@
    }
  },
  methods: {
    queryClassClick() {
      this.queryClassSetConfig = {
        visible: true
      }
    },
    searchClick() {
      console.log("sssssssssss")
      this.$emit("searchClick", this.searchSelValue, this.searchInput)
    },
    resetClick() {
      this.searchSelValue = this.searchSel
      this.searchInput = ""
      this.$emit("resetClick")
    },
    // 高级查找
    highSearchClick() {},
@@ -161,6 +182,7 @@
    tileSearchClick() {
      this.isTileSearch = !this.isTileSearch
    },
    labelSearchClick() {},
    // 删除
    handleClick(row) {
      console.log(row)
@@ -187,6 +209,7 @@
  color: #333;
  .search-top {
    display: flex;
    align-items: center;
    .query-class {
      display: flex;
      height: 60px;
@@ -202,6 +225,7 @@
        font-size: 16px;
        margin-left: 10px;
        color: #bebebe;
        cursor: pointer;
      }
    }
    .search {
@@ -212,6 +236,9 @@
        margin-top: 7px;
      }
    }
    .btn {
      margin-left: 10px;
    }
    .other-search {
      display: flex;
      height: 60px;
@@ -219,12 +246,15 @@
      margin-left: 20px;
      .other-search-high {
        display: flex;
        cursor: pointer;
        .high-icon {
          font-size: 18px;
        }
      }
      .other-search-tile {
      .other-search-tile,
      .other-search-label {
        display: flex;
        cursor: pointer;
        margin-left: 20px;
        .high-icon {
          font-size: 18px;
@@ -275,7 +305,7 @@
  }
  .search {
    .el-select .el-input {
      width: 115px;
      width: 130px;
    }
    .input-with-select .el-input-group__prepend {
      background-color: #fff;