gitlab上面的wms转移到公司git

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>
        <div class="download" @click="downloadClick" :style="{ cursor: showDownload ? 'pointer' : 'no-drop' }">
          <img src="@/assets/img/xiazai.png" style="width: 13px" />
        <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;" />
        </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,19 +38,11 @@
      <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">
                  <span style="margin-left: 5px">{{ val }}</span>
                  <span style="margin-left: 5px">{{ val?.title ?? val }}</span>
                  <i @click="delSelectClick(val)" class="el-icon-close" style="margint: 0 5px"></i>
                </div>
              </div>
@@ -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="switchStatusKeywords($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 taskStatusMap"
                :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 }}
@@ -118,358 +87,375 @@
</template>

<script>
export default {
  name: "SearchCommonView",
  components: {},
  props: {
    showAdd: {
      type: Boolean,
      default: true
    },
    isDisabled: {
      type: Boolean,
      default: false
    },
    showDiscard: {
      default: false
    },
    showDownload: {
      type: Boolean,
      default: false
    },
    showApply: {
      type: Boolean,
      default: false
    },
    placeholder: {
      type: String,
      default: "请输入内容"
    },
    addTitle: {
      type: String,
      default: "添加"
    },
    totalObject: {
      type: Object,
      default: () => {
        return {
          value: 0,
          label: "全部物料"
        }
      }
    },
    otherOptions: {
      type: Array,
      default: () => [
        {
          value: 2,
          label: "安全库存",
          status: "success"
  export default {
    name: 'SearchCommonView',
    components: {},
    props: {
      showAdd: {
        type: Boolean,
        default: true,
      },
      isDisabled: {
        type: Boolean,
        default: false,
      },
      showDiscard: {
        default: false,
      },
      showDownload: {
        type: Boolean,
        default: false,
      },
      showApply: {
        type: Boolean,
        default: false,
      },
      placeholder: {
        type: String,
        default: '请输入内容',
      },
      addTitle: {
        type: String,
        default: '添加',
      },
      totalObject: {
        type: Object,
        default: () => {
          return {
            value: 0,
            label: '全部物料',
          }
        },
        {
          value: 12,
          label: "欠料",
          status: "error"
      },
      otherOptions: {
        type: Array,
        default: () => [
          {
            value: 2,
            label: '安全库存',
            status: 'success',
          },
          {
            value: 12,
            label: '欠料',
            status: 'error',
          },
          {
            value: 2,
            label: '安全库存',
            status: 'success',
          },
          {
            value: 12,
            label: '欠料',
            status: 'error',
          },
        ],
      },
      searchSel: {
        type: Object,
        default: () => {
          return {
            value: 'name',
            label: '',
          }
        },
        {
          value: 2,
          label: "安全库存",
          status: "success"
      },
      twoTotalAmount: {
        type: Boolean,
        default: false,
      },
      twoObject: {
        type: Object,
        default: () => {
          return {
            value: 0,
            label: '车间总量',
          }
        },
        {
          value: 12,
          label: "欠料",
          status: "error"
        }
      ]
      },
      amountView: {
        type: Boolean,
        default: true,
      },
      isSearchForm: {
        type: Boolean,
        default: true,
      },
      showSet: {
        type: Boolean,
        default: false,
      },
      inputName: {
        type: String,
        default: '',
      },
      showSreen: {
        type: Boolean,
        default: true,
      },
      searchTaskMap: {
        type: Array,
        default: () => [],
      },
      screenArray: {
        type: Array,
        default: () => [],
      },
    },
    searchSel: {
      type: Object,
      default: () => {
        return {
          value: "name",
          label: ""
    watch: {
      inputName(val) {
        this.searchInput = val
      },
    },
    computed: {
      getClass() {
        return function (row, i) {
          return row.includes(i.title) ? 'selected' : null
        }
      },
    },
    data() {
      return {
        searchInput: '',
        searchSelValue: this.searchSel,
        status: '',
        selList: [],
        selectArr: [],
      }
    },
    twoTotalAmount: {
      type: Boolean,
      default: false
    mounted() {
      this.searchTaskMap.forEach((ele) => {
        this.selList.push(ele)
      })
      this.selectArr = this.searchTaskMap
      this.searchInput = this.inputName
    },
    twoObject: {
      type: Object,
      default: () => {
        return {
          value: 0,
          label: "车间总量"
    methods: {
      // 搜索
      searchClick() {
        this.$emit('searchClick', this.searchInput)
      },
      // 清除
      clearClick() {
        this.$emit('clearClick', 1)
      },
      // 添加
      addBtn() {
        this.$emit('addCommonClick')
      },
      // 丢弃
      discardBtn() {
        this.$emit('discardBtnClick')
      },
      // 下载
      downloadClick() {
        this.$emit('downloadClick')
      },
      // 丢弃
      applyBtn() {
        this.$emit('applyBtnClick')
      },
      // 模具-检查配置
      inspectionConfigClick() {
        this.$emit('inspectionConfigClick')
      },
      switchKeywords(command, item) {
        this.status = command
        const oldValue = item
        this.selectArr = oldValue
        // 检查数组中是否包含特定的值
        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,
          )
        } else {
          oldValue.push(command)
        }
      }
    },
    amountView: {
      type: Boolean,
      default: true
    },
    isSearchForm: {
      type: Boolean,
      default: true
    },
    showSet: {
      type: Boolean,
      default: false
    },
    inputName: {
      type: String,
      default: ""
    },
    showSreen: {
      type: Boolean,
      default: true
    }
  },
  watch: {
    inputName(val) {
      this.searchInput = val
    }
  },
  computed: {
    getClass() {
      return function (row, i) {
        return row.includes(i.title) ? "selected" : null
      }
    }
  },
  data() {
    return {
      searchInput: "",
      searchSelValue: this.searchSel,
      status: "",
      taskStatusMap: [
        { value: "0", type: "default", title: "完成" },
        { value: "1", type: "default", title: "就緒" }
      ],
      selList: [],
      selectArr: []
    }
  },
  methods: {
    // 搜索
    searchClick() {
      this.$emit("searchClick", this.searchInput)
    },
    // 清除
    clearClick() {
      this.$emit("clearClick", 1)
    },
    // 添加
    addBtn() {
      this.$emit("addCommonClick")
    },
    // 丢弃
    discardBtn() {
      this.$emit("discardBtnClick")
    },
    // 下载
    downloadClick() {
      this.$emit("downloadClick")
    },
    // 丢弃
    applyBtn() {
      this.$emit("applyBtnClick")
    },
    // 模具-检查配置
    inspectionConfigClick() {
      this.$emit("inspectionConfigClick")
    },
    switchStatusKeywords(command, item) {
      console.log("index", command)
      this.status = command
      const oldValue = item
      console.log(oldValue)
      this.selectArr = oldValue
      if (item.includes(command)) {
        oldValue.splice(
          oldValue.findIndex((e) => e === command),
          1
        this.$emit('switchKeywords', item)
      },
      // 删除筛选内容
      delSelectClick(item) {
        this.selectArr.splice(
          this.selectArr.findIndex((e) => e === item),
          1,
        )
      } else {
        oldValue.push(command)
      }
        this.$emit('delSelectClick', item)
      },
    },
    // 删除筛选内容
    delSelectClick(item) {
      console.log(item)
      this.selectArr.splice(
        this.selectArr.findIndex((e) => e === item),
        1
      )
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss" scoped>
.search-list {
  font-size: 13px;
  color: #333;
  width: 100%;
  .search-top {
  .search-list {
    font-size: 13px;
    color: #333;
    width: 100%;
    display: flex;
    align-items: center;
    .left {
      display: flex;
      width: 210px;
      margin-left: 20px;
      .download {
        width: 30px;
        height: 30px;
        line-height: 35px;
        text-align: center;
        border: 1px solid #b1b1b1;
        border-radius: 4px;
        cursor: pointer;
      }
    }
    .amount {
      flex: 1;
      display: flex;
      justify-content: right;
      .top_left {
        width: 10%;
        border-right: 1px solid #ccc;
        display: flex;
        padding-right: 2%;
        flex-wrap: nowrap;
        flex-direction: row;
        align-content: center;
        justify-content: center;
        align-items: center;
        text-align: center;
        .font_weight {
          font-weight: 500;
          font-size: 18px;
          font-family: "DIN Alternate";
        }
        .top_right_bottom {
          font-size: 12px;
        }
      }
      .top_right {
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        align-content: center;
        align-items: center;
        justify-content: space-around;
        width: calc(90% - 197px);
        text-align: center;
        color: #666;
        margin-left: 10px;
        .font_weight {
          font-weight: 500;
          font-size: 18px;
          font-family: "DIN Alternate";
        }
        .top_right_bottom {
          font-size: 12px;
        }
      }
    }
    .search {
    .search-top {
      width: 100%;
      display: flex;
      align-items: center;
      width: auto;
      height: 60px;
      line-height: 60px;
      margin-right: 20px;
      margin-left: 20px;
      .el-icon-search {
        margin-top: 10px;
      }
      .search-Btn {
      .left {
        display: flex;
        margin-left: 40px;
        background: #f3f3f3;
        height: 30px;
        border-radius: 4px;
        align-items: center;
        .common {
          width: 50px;
        min-width: 210px;
        margin-left: 20px;
        .download {
          width: 30px;
          height: 30px;
          line-height: 35px;
          text-align: center;
          border: 1px solid #b1b1b1;
          border-radius: 4px;
          cursor: pointer;
        }
      }
      .pre-views {
        border: 1px solid #ccc;
        font-size: 12px;
        margin-right: 5px;
        border-radius: 3px;
        background: #f0f0f0;
        &:last-child {
          margin-right: 0px;
      .amount {
        flex: 1;
        display: flex;
        justify-content: right;
        .top_left {
          width: 10%;
          border-right: 1px solid #ccc;
          display: flex;
          padding-right: 2%;
          flex-wrap: nowrap;
          flex-direction: row;
          align-content: center;
          justify-content: center;
          align-items: center;
          text-align: center;
          .font_weight {
            font-weight: 500;
            font-size: 18px;
            font-family: 'DIN Alternate';
          }
          .top_right_bottom {
            font-size: 12px;
          }
        }
        .top_right {
          display: flex;
          flex-direction: row;
          flex-wrap: nowrap;
          align-content: center;
          align-items: center;
          justify-content: space-around;
          width: calc(90% - 197px);
          text-align: center;
          color: #666;
          margin-left: 10px;
          .font_weight {
            font-weight: 500;
            font-size: 18px;
            font-family: 'DIN Alternate';
          }
          .top_right_bottom {
            font-size: 12px;
          }
        }
      }
      .search {
        display: flex;
        align-items: center;
        width: auto;
        height: 60px;
        line-height: 60px;
        margin-right: 20px;
        margin-left: 20px;
        .el-icon-search {
          margin-top: 10px;
        }
        .search-Btn {
          display: flex;
          margin-left: 40px;
          background: #f3f3f3;
          height: 30px;
          border-radius: 4px;
          align-items: center;
          .common {
            width: 50px;
            text-align: center;
          }
        }
        .pre-views {
          border: 1px solid #c0c0c0;
          font-size: 12px;
          margin-right: 5px;
          border-radius: 3px;
          background: #f0f0f0;
          &:last-child {
            margin-right: 0px;
          }
        }
      }
    }
    .success {
      background: #06c062;
    }
    .yellow {
      background: #e6a23c;
    }
  }
  .success {
    background: #06c062;
  .selected {
    color: #606266;
  }
  .yellow {
    background: #e6a23c;
  .dropdown-view {
    position: relative;
    .icon-view {
      position: absolute;
      left: -15px;
      top: 11px;
    }
  }
}
.selected {
  color: #409eff;
}
.dropdown-view {
  position: relative;
  .icon-view {
    position: absolute;
    left: -15px;
    top: 11px;
  }
}

::v-deep {
  .el-input__inner {
    height: 30px;
    color: #2765e1;
  }
  .el-input__prefix,
  .el-input__suffix {
    height: 30px;
  }
  .el-input__icon {
    line-height: 30px;
  }
  .search {
    .el-select .el-input {
      width: 130px;
  ::v-deep {
    .el-input__inner {
      height: 30px;
      color: #2765e1;
    }
    .input-with-select .el-input-group__prepend {
      padding: 0 10px;
      background-color: #ffffff;
    .el-input__prefix,
    .el-input__suffix {
      height: 30px;
    }
    // .el-input__suffix {
    //   // 处理前缀图标不垂直居中的问题
    //   height: auto;
    //   font-size: 15px;
    //   &-inner {
    //     flex-direction: row-reverse;
    //     -webkit-flex-direction: row-reverse;
    //     display: flex;
    //   }
    // }
    .el-input--suffix .el-input__inner {
      padding-right: 45px;
    .el-input__icon {
      line-height: 30px;
    }
    .search-sel .el-input--suffix .el-input__inner {
      padding-left: 5px;
      padding-right: 20px;
    .search {
      .el-select .el-input {
        width: 130px;
      }
      .input-with-select .el-input-group__prepend {
        padding: 0 10px;
        background-color: #ffffff;
      }
      // .el-input__suffix {
      //   // 处理前缀图标不垂直居中的问题
      //   height: auto;
      //   font-size: 15px;
      //   &-inner {
      //     flex-direction: row-reverse;
      //     -webkit-flex-direction: row-reverse;
      //     display: flex;
      //   }
      // }
      .el-input--suffix .el-input__inner {
        padding-right: 45px;
      }
      .search-sel .el-input--suffix .el-input__inner {
        padding-left: 5px;
        padding-right: 20px;
      }
    }
    .el-dropdown-menu__item {
      padding-left: 20px;
    }
  }
  .el-dropdown-menu__item {
    padding-left: 20px;
  }
}
</style>