charles
2024-08-06 5ecb7958c96d3f0b6d47b79aff7eb306c2cf690f
src/components/makepager/SearchCommonView.vue
@@ -2,16 +2,12 @@
  <div class="search-list">
    <div class="search-top">
      <div class="left">
        <el-button v-if="showAdd" :disabled="isDisabled" type="primary" size="mini" @click="addBtn">{{
          addTitle
        }}</el-button>
        <el-button v-if="showDiscard" size="mini" @click="discardBtn" style="margin-left: 0px">{{ "取消" }}</el-button>
        <el-button v-if="showAdd" :disabled="isDisabled" type="primary" size="mini" @click="addBtn">{{ addTitle }}</el-button>
        <el-button v-if="showDiscard" size="mini" @click="discardBtn" style="margin-left: 0px">{{ '取消' }}</el-button>
        <div class="download" @click="downloadClick" :style="{ cursor: showDownload ? 'pointer' : 'no-drop' }">
          <img src="@/assets/img/xiazai.png" style="width: 13px" />
          <img src="@/assets/img/xiazai.png" style="width: 13px;" />
        </div>
        <el-button v-if="showApply" type="text" size="mini" @click="addBtn" style="margin-left: 10px">{{
          "应用全部"
        }}</el-button>
        <el-button v-if="showApply" type="text" size="mini" @click="addBtn" style="margin-left: 10px">{{ '应用全部' }}</el-button>
        <slot name="leftButton" />
      </div>
      <div v-if="amountView" class="amount">
@@ -42,15 +38,7 @@
      <div v-else class="amount"></div>
      <div class="search">
        <template v-if="isSearchForm">
          <el-input
            :placeholder="placeholder"
            v-model.trim="searchInput"
            class="input-with-select"
            style="width: 410px"
            clearable
            @change="searchClick"
            @clear="clearClick"
          >
          <el-input :placeholder="placeholder" v-model.trim="searchInput" class="input-with-select" style="width: 410px" clearable @change="searchClick" @clear="clearClick">
            <template v-if="selectArr?.length > 0" slot="prepend">
              <div style="display: flex">
                <div v-for="(val, i) in selectArr" :key="i" class="pre-views">
@@ -67,32 +55,13 @@
            <img src="@/assets/img/shaixuan.png" style="width: 10px" />
            <span>筛选</span>
          </div>
          <el-dropdown
            v-else
            style="
              cursor: pointer;
              font-weight: 500;
              font-size: 16px;
              line-height: 1;
              letter-spacing: 0.09px;
              color: #202224;
            "
            trigger="click"
            :hide-on-click="false"
            placement="bottom"
            @command="switchKeywords($event, selList)"
          >
          <el-dropdown v-else style="cursor: pointer; font-weight: 500; font-size: 16px; line-height: 1; letter-spacing: 0.09px; color: #202224" trigger="click" :hide-on-click="false" placement="bottom" @command="switchKeywords($event, selList)">
            <div class="common yes-cursor">
              <img src="@/assets/img/shaixuan.png" style="width: 10px" />
              <span>筛选</span>
            </div>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item
                v-for="(item, key) in screenArray"
                :key="key"
                :command="item.title"
                :class="{ selected: status == item.title }"
              >
              <el-dropdown-item v-for="(item, key) in screenArray" :key="key" :command="item" :class="{ selected: status == item.title }">
                <div class="dropdown-view">
                  <i v-show="getClass(selList, item)" class="el-icon-check icon-view"></i>
                  {{ item.title }}
@@ -119,145 +88,145 @@
<script>
export default {
  name: "SearchCommonView",
    name: 'SearchCommonView',
  components: {},
  props: {
    showAdd: {
      type: Boolean,
      default: true
        default: true,
    },
    isDisabled: {
      type: Boolean,
      default: false
        default: false,
    },
    showDiscard: {
      default: false
        default: false,
    },
    showDownload: {
      type: Boolean,
      default: false
        default: false,
    },
    showApply: {
      type: Boolean,
      default: false
        default: false,
    },
    placeholder: {
      type: String,
      default: "请输入内容"
        default: '请输入内容',
    },
    addTitle: {
      type: String,
      default: "添加"
        default: '添加',
    },
    totalObject: {
      type: Object,
      default: () => {
        return {
          value: 0,
          label: "全部物料"
            label: '全部物料',
        }
      }
        },
    },
    otherOptions: {
      type: Array,
      default: () => [
        {
          value: 2,
          label: "安全库存",
          status: "success"
            label: '安全库存',
            status: 'success',
        },
        {
          value: 12,
          label: "欠料",
          status: "error"
            label: '欠料',
            status: 'error',
        },
        {
          value: 2,
          label: "安全库存",
          status: "success"
            label: '安全库存',
            status: 'success',
        },
        {
          value: 12,
          label: "欠料",
          status: "error"
        }
      ]
            label: '欠料',
            status: 'error',
          },
        ],
    },
    searchSel: {
      type: Object,
      default: () => {
        return {
          value: "name",
          label: ""
            value: 'name',
            label: '',
        }
      }
        },
    },
    twoTotalAmount: {
      type: Boolean,
      default: false
        default: false,
    },
    twoObject: {
      type: Object,
      default: () => {
        return {
          value: 0,
          label: "车间总量"
            label: '车间总量',
        }
      }
        },
    },
    amountView: {
      type: Boolean,
      default: true
        default: true,
    },
    isSearchForm: {
      type: Boolean,
      default: true
        default: true,
    },
    showSet: {
      type: Boolean,
      default: false
        default: false,
    },
    inputName: {
      type: String,
      default: ""
        default: '',
    },
    showSreen: {
      type: Boolean,
      default: true
        default: true,
    },
    searchTaskMap: {
      type: Array,
      default: () => []
        default: () => [],
    },
    screenArray: {
      type: Array,
      default: () => []
    }
        default: () => [],
      },
  },
  watch: {
    inputName(val) {
      this.searchInput = val
    }
      },
  },
  computed: {
    getClass() {
      return function (row, i) {
        return row.includes(i.title) ? "selected" : null
          return row.includes(i.title) ? 'selected' : null
      }
    }
      },
  },
  data() {
    return {
      searchInput: "",
        searchInput: '',
      searchSelValue: this.searchSel,
      status: "",
        status: '',
      selList: [],
      selectArr: []
        selectArr: [],
    }
  },
  mounted() {
    this.searchTaskMap.forEach((ele) => {
      this.selList.push(ele.title)
        this.selList.push(ele)
    })
    this.selectArr = this.searchTaskMap
    this.searchInput = this.inputName
@@ -265,58 +234,62 @@
  methods: {
    // 搜索
    searchClick() {
      this.$emit("searchClick", this.searchInput)
        this.$emit('searchClick', this.searchInput)
    },
    // 清除
    clearClick() {
      this.$emit("clearClick", 1)
        this.$emit('clearClick', 1)
    },
    // 添加
    addBtn() {
      this.$emit("addCommonClick")
        this.$emit('addCommonClick')
    },
    // 丢弃
    discardBtn() {
      this.$emit("discardBtnClick")
        this.$emit('discardBtnClick')
    },
    // 下载
    downloadClick() {
      this.$emit("downloadClick")
        this.$emit('downloadClick')
    },
    // 丢弃
    applyBtn() {
      this.$emit("applyBtnClick")
        this.$emit('applyBtnClick')
    },
    // 模具-检查配置
    inspectionConfigClick() {
      this.$emit("inspectionConfigClick")
        this.$emit('inspectionConfigClick')
    },
    switchKeywords(command, item) {
      console.log("index", command, item)
      this.status = command
      const oldValue = item
      console.log(oldValue)
      this.selectArr = oldValue
      if (item.includes(command)) {
        // 检查数组中是否包含特定的值
        const containsValue = item.some((obj) => {
          // 使用Object.values获取对象值的数组
          const values = Object.values(obj)
          // 使用includes检查数组中是否包含要查找的值
          return values.includes(command.id)
        })
        if (containsValue) {
        oldValue.splice(
          oldValue.findIndex((e) => e === command),
          1
            1,
        )
      } else {
        oldValue.push(command)
      }
      this.$emit("switchKeywords", item)
        this.$emit('switchKeywords', item)
    },
    // 删除筛选内容
    delSelectClick(item) {
      console.log(item)
      this.selectArr.splice(
        this.selectArr.findIndex((e) => e === item),
        1
          1,
      )
      this.$emit("delSelectClick", item)
    }
  }
        this.$emit('delSelectClick', item)
      },
    },
}
</script>
@@ -332,7 +305,7 @@
    align-items: center;
    .left {
      display: flex;
      width: 210px;
        min-width: 210px;
      margin-left: 20px;
      .download {
        width: 30px;
@@ -362,7 +335,7 @@
        .font_weight {
          font-weight: 500;
          font-size: 18px;
          font-family: "DIN Alternate";
            font-family: 'DIN Alternate';
        }
        .top_right_bottom {
          font-size: 12px;
@@ -382,7 +355,7 @@
        .font_weight {
          font-weight: 500;
          font-size: 18px;
          font-family: "DIN Alternate";
            font-family: 'DIN Alternate';
        }
        .top_right_bottom {
          font-size: 12px;