gitlab上面的wms转移到公司git

charles

2024-08-06 5ecb7958c96d3f0b6d47b79aff7eb306c2cf690f

 src/views/overview/index.vue

@@ -1,7 +1,11 @@
<template>
  <div class="rightContent">
    <div class="top">
      <SearchCommonView :show-add="false" :placeholder="'请输入产品名称'" :amount-view="false" @searchClick="getList" />
      <SearchCommonView :show-add="false" :placeholder="'请输入业务类型'" 
      :amount-view="false" :showSreen="false" :searchTaskMap="SelectClick"
       :screenArray="screenArray"
        @switchKeywords="switchKeywordsList"
        @delSelectClick="delSelectClick" @searchClick="getList" />
    </div>
    <div class="content">
      <div class="list-view">
@@ -10,179 +14,257 @@
          v-for="item in tableList"
          :key="item.id"
          :class="{
            overview_active: item.status === 'active',
            overview_done: item.status === 'done',
            overview_todo: item.status === 'todo'
            overview_active: item.baseOperationType === 1,
            overview_done: item.baseOperationType === 2,
            overview_todo: item.baseOperationType === 3,
          }"
          @click="labelClick(item)"
        >
          <div class="top">
            <div class="label">
              <span style="cursor: pointer" @click="labelClick(item.name)">{{ item.name }}</span>
              <span style="cursor: pointer">{{ item.name }}</span>
            </div>
            <div class="set">...</div>
            <el-dropdown class="set" placement="bottom" trigger="click" @command="handleCommand">
              <div @click.stop="moreClick()">...</div>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item :command="{ command: 0, item }">全部</el-dropdown-item>
                <el-dropdown-item :command="{ command: 3, item }">就绪</el-dropdown-item>
                <el-dropdown-item :command="{ command: 4, item }">完成</el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          </div>
          <div class="bottom">
            <div class="left">
              <div class="left_view">
                <span>2</span>
                <span style="margin-left: 5px">待处理</span>
              <div class="left_view" @click.stop="statusClick(item, 3)">
                <span>{{ item.readyCount }}</span>
                <span style="margin-left: 5px">就绪</span>
              </div>
            </div>
            <div class="right">
              <div class="right_status">
                <span style="cursor: pointer">2 正在等待</span>
              <div class="right_status" @click.stop="statusClick(item, 4)">
                <span style="cursor: pointer">{{ item.finishCount + ' 完成' }}</span>
              </div>
              <div class="right_status" style="margin-top: 5px">
              <!-- <div class="right_status" style="margin-top: 5px">
                <span style="cursor: pointer">4 延期</span>
              </div> -->
            </div>
            <div class="right">
              <div class="right_status" @click.stop="statusClick(item, 5)">
                <span style="cursor: pointer">{{ item.cancelCount + ' 已取消' }}</span>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="btn-pager">
        <PagerView class="page" :pager-options="pagerOptions" v-on="pagerEvents" />
        <PagerView class="page" :page-sizes="pageSizes" :pager-options="pagerOptions" v-on="pagerEvents" />
      </div>
    </div>
  </div>
</template>

<script>
import pageMixin from "@/components/makepager/pager/mixin/pageMixin"

export default {
  name: "OverView",
  mixins: [pageMixin],
  props: {},
  components: {},
  computed: {},
  data() {
    return {
      tableList: [
        {
          name: "采购入库",
          status: "active"
  import pageMixin from '@/components/makepager/pager/mixin/pageMixin'
  import { getOperationType } from '@/api/overview/overview'
  import { getWarehouseList } from '@/api/warehouseManage/warehouse.js'
  import Cookies from 'js-cookie'
  export default {
    name: 'OverView',
    mixins: [pageMixin],
    props: {},
    components: {},
    computed: {},
    data() {
      return {
        tableList: [],
        editConfig: {
          visible: false,
          title: '新建',
          infomation: {},
          keyword: '',
        },
        {
          name: "内部调拨",
          status: "done"
        },
        {
          name: "3",
          status: "done"
        },
        {
          name: "2",
          status: "active"
        },
        {
          name: "3",
          status: "todo"
        },
        {
          name: "2",
          status: "active"
        },
        {
          name: "3",
          status: "todo"
        }
      ],
      editConfig: {
        visible: false,
        title: "新建",
        infomation: {}
        screenArray: [],
        SelectClick: [],
        pageSizes: [30, 45],
      }
    }
  },
  created() {},
  methods: {
    getList(val) {
      console.log(val)
    },
    labelClick(name) {
      this.$router.push({ path: "/overview/overviewList", query: { name: name } })
    created() {
      this.pagerOptions.pageSize = 30
      this.queryWareHouse()
      const username = Cookies.get('username')
      this.SelectClick = JSON.parse(localStorage.getItem(username) || '[]')
      this.getData()
    },
    getData() {}
    methods: {
      getList(val) {
        console.log(val)
        this.keyword = val
        this.getData()
      },
      labelClick(item, status) {
        console.log(item)
        this.$router.push({
          name: 'overviewList',
          query: { name: item.name, warehouseId:item.warehouseId,workType: item.baseOperationType + '', id: item.id + '', status: status, code: item.warehouse.code },
        })
      },
      async getData() {
        //筛选id数组
        let $arr = [];
        this.SelectClick.forEach((e) => {
          $arr.push(e.id)
        });
        await getOperationType({
          keyword: this.keyword,
          page: this.pagerOptions.currPage,
          pageSize: this.pagerOptions.pageSize,
          warehouseIds:$arr.join(',')
        }).then((res) => {
          if (res.code === 200) {
            const list = res.data.map((item) => {
              return {
                ...item,
              }
            })
            this.tableList = list || []
            this.pagerOptions.totalCount = res.total
          }
        })
      },
      async queryWareHouse() {
        const { code, data } = await getWarehouseList({ page: 0, pageSize: 0, keyword: '' })
        this.screenArray = []
        if (code === 200) {
          data.forEach((e) => {
            this.screenArray.push({
              id: e.id,
              title: e.name,
            })
          })
        }
      },
      handleCommand(val) {
        if (val.command === '全部') {
          this.labelClick(val.item, '')
        } else {
          this.labelClick(val.item, val.command)
        }
      },
      // 更多
      moreClick() {},
      // 状态
      statusClick(item, status) {
        this.labelClick(item, status)
      },
      //筛选
      switchKeywordsList(item) {
        this.SelectClick = item
        const username = Cookies.get('username')
        localStorage.setItem(username, JSON.stringify(item))
        this.getData()
      },
      //删除筛选
      delSelectClick(item) {
        this.SelectClick.forEach((e, i) => {
          if (e.id == item.id) {
            this.SelectClick.splice(i, 1)
          }
        })
        const username = Cookies.get('username')
        if (this.SelectClick.length > 0) {
          localStorage.setItem(username, JSON.stringify(this.SelectClick))
        } else {
          localStorage.removeItem(username)
        }
        this.getData()
      },
    },
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss" scoped>
.content {
  height: calc(100% - 150px);
  background: #fff;
  border-radius: 12px;
  .list-view {
    padding: 20px 0 0px 20px;
    height: calc(100% - 70px);
    overflow: auto;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-content: flex-start;
    .overview-box {
      min-width: 308px;
      height: 140px;
      margin-bottom: 10px;
      margin-right: 20px;
      border: 1px solid #dee2e6;
      box-shadow: inset 0 0 2px #dee2e6;
      -moz-box-shadow: inset 0 0 2px #dee2e6;
      -webkit-box-shadow: inset 0 0 2px #dee2e6;
      .top {
        height: 35px;
        line-height: 35px;
        display: flex;
        .label {
          margin-left: 20px;
        }
        .set {
          margin-left: auto;
          margin-right: 20px;
          font-size: 20px;
          cursor: no-drop;
          color: #000;
          transform: rotate(-90deg);
          -moz-transform: rotate(-90deg);
          -webkit-transform: rotate(-90deg);
        }
      }
      .bottom {
        display: flex;
        font-size: 13px;
        .left {
          width: 50%;
          // background: #1d80e2;
          .left_view {
  .content {
    height: calc(100% - 112px);
    background: #fff;
    border-radius: 12px;
    .list-view {
      padding: 20px 0 0px 20px;
      height: calc(100% - 70px);
      overflow: auto;
      display: flex;
      flex-wrap: wrap;
      justify-content: flex-start;
      align-content: flex-start;
      .overview-box {
        min-width: 308px;
        height: 140px;
        margin-bottom: 10px;
        margin-right: 20px;
        border: 1px solid #dee2e6;
        box-shadow: inset 0 0 2px #dee2e6;
        -moz-box-shadow: inset 0 0 2px #dee2e6;
        -webkit-box-shadow: inset 0 0 2px #dee2e6;
        cursor: pointer;
        .top {
          height: 35px;
          line-height: 35px;
          display: flex;
          .label {
            margin-left: 20px;
            height: 30px;
            line-height: 30px;
            padding: 0 5px;
            width: 70px;
            text-align: center;
            color: #fff;
            background: #081e44;
            border-radius: 4px;
            cursor: pointer;
          }
          .set {
            margin-left: auto;
            margin-right: 20px;
            font-size: 20px;
            // cursor: no-drop;
            color: #000;
            transform: rotate(-90deg);
            -moz-transform: rotate(-90deg);
            -webkit-transform: rotate(-90deg);
          }
        }
        .right {
          width: 50%;
          .right_status {
        .bottom {
          display: flex;
          font-size: 13px;
          margin-top: 30px;
          .left {
            width: 50%;
            // background: #1d80e2;
            .left_view {
              margin-left: 20px;
              height: 30px;
              line-height: 30px;
              padding: 0 5px;
              width: 70px;
              text-align: center;
              color: #fff;
              background: #081e44;
              border-radius: 4px;
              cursor: pointer;
            }
          }
          .right {
            width: 25%;
            .right_status {
              margin-top: 5px;
            }
          }
        }
      }
    }
    .overview_active {
      border-left: 4px solid #1d80e2;
    }
    .overview_done {
      border-left: 4px solid #1de27f;
    }
    .overview_todo {
      border-left: 4px solid #e2441d;
      .overview_active {
        border-left: 4px solid #1d80e2;
      }
      .overview_done {
        border-left: 4px solid #1de27f;
      }
      .overview_todo {
        border-left: 4px solid #e2441d;
      }
    }
  }
}

  .btn-pager {
    margin-top: 0;
  }
</style>