gitlab上面的wms转移到公司git

charles

2024-08-06 5ecb7958c96d3f0b6d47b79aff7eb306c2cf690f

 src/views/productManage/product/index.vue

@@ -1,46 +1,29 @@
<template>
  <div class="rightContent">
    <div class="top">
      <SearchCommonView
        :add-title="'新建'"
        :placeholder="'请输入产品名称'"
        :amount-view="false"
        :search-task-map="searchTaskMap"
        @addCommonClick="addBtnClick"
        @searchClick="searchClick"
        @delSelectClick="delSelectClick"
      />
      <SearchCommonView :add-title="'新建'" :placeholder="'请输入产品名称'" :amount-view="false" :search-task-map="searchTaskMap" @addCommonClick="addBtnClick" @searchClick="searchClick" @delSelectClick="delSelectClick">
        <template slot="leftButton">
          <el-upload class="upload-demo" action="/api-wms/v1/product/inputProduct" :headers="{ Authorization: 'Bearer ' + token }" accept=".xls,.xlsx" :on-success="onSuccess" :on-error="onError" :limit="1" :show-file-list="false">
            <el-button size="small" type="primary" style="margin-left: 10px">导入</el-button>
          </el-upload>
        </template>
        <template slot="leftButton">
          <el-button size="small" type="text" style="margin-left: 10px" @click="downloadInputFormatCilck">模板下载</el-button>
        </template>
      </SearchCommonView>
    </div>
    <div class="list-view">
      <div class="icon-switch">
        <div class="icon-view">
          <span
            class="icon-label"
            @click="selIconSwitchClick('2')"
            :class="{ whiteBackgroud: isIconIndex === '1', blueBackgroud: isIconIndex === '2' }"
            style="margin-left: 5px"
            ><i class="el-icon-s-unfold"></i
          ></span>
          <span
            class="icon-label"
            @click="selIconSwitchClick('1')"
            :class="{ blueBackgroud: isIconIndex === '1', whiteBackgroud: isIconIndex === '2' }"
            ><i class="el-icon-menu"></i
          ></span>
          <span class="icon-label" @click="selIconSwitchClick('2')" :class="{ whiteBackgroud: isIconIndex === '1', blueBackgroud: isIconIndex === '2' }" style="margin-left: 5px"><i class="el-icon-s-unfold"></i></span>
          <span class="icon-label" @click="selIconSwitchClick('1')" :class="{ blueBackgroud: isIconIndex === '1', whiteBackgroud: isIconIndex === '2' }"><i class="el-icon-menu"></i></span>
        </div>
      </div>
      <!-- 图表形式 -->
      <div v-if="isIconIndex === '1'" class="product-view">
        <div class="product-box" v-for="item in tableList.tableInfomation" :key="item.id" @click="showDetail(item)">
          <div class="left">
            <el-image
              v-if="item.attachmentList?.length > 0"
              style="width: 60px; height: 80px"
              :src="item.attachmentList[0].FileUrl"
              :preview-src-list="item.srcList"
              :z-index="9999"
              @click.stop="imgClick"
            ></el-image>
            <el-image v-if="item.attachmentList?.length > 0" style="width: 60px; height: 80px" :src="item.attachmentList[0].FileUrl" :preview-src-list="item.srcList" :z-index="9999" @click.stop="imgClick"></el-image>
            <div v-else class="img-view">
              <i class="el-icon-picture-outline"></i>
            </div>
@@ -65,13 +48,16 @@
      <div v-if="isIconIndex === '2'" class="product-list">
        <TableCommonView ref="tableListRef" :table-list="tableList" @selTableCol="selTableCol">
          <template slot="tableButton">
            <el-table-column label="操作" width="90" align="center">
            <el-table-column label="操作" width="140" align="center">
              <template slot-scope="scope">
                <span @click.stop="showDetail(scope.row)" class="cursor_pointer" style="margin-right: 10px">
                  <span style="color: #2a78fb">查看</span>
                </span>
                <span @click.stop="editRow(scope.row)" class="cursor_pointer">
                  <span style="color: #2a78fb">编辑</span>
                </span>
                <span @click.stop="deleteRow(scope.row)" class="cursor_pointer">
                  <span style="color: #2a78fb; margin-left: 10px">删除</span>
                </span>
              </template>
            </el-table-column>
@@ -83,354 +69,425 @@
      </div>
    </div>
    <!-- 新建/编辑 -->
    <AddProductDialog v-if="editConfig.visible" :edit-common-config="editConfig" />
    <AddProductDialog ref="addProductRef" v-if="editConfig.visible" :edit-common-config="editConfig" />
  </div>
</template>

<script>
import pageMixin from "@/components/makepager/pager/mixin/pageMixin"
import { getProductList } from "@/api/product/product"
// import DetailProduct from "@/views/productManage/product/DetailProduct"
import AddProductDialog from "@/views/productManage/product/AddProductDialog"

export default {
  name: "PruductManage",
  props: {},
  components: { AddProductDialog },
  mixins: [pageMixin],
  computed: {},
  data() {
    return {
      tableList: {},
      showcol: ["内部编码",'产品规格', "负责人", "产品标签", "成本", "在库数量", "预测数量", "计量单位"],
      searchOptions: [],
      commonDetail: {
        visible: false,
        title: "新建",
        infomation: {}
      },
      editConfig: {
        visible: false,
        title: "新建",
        infomation: {},
        autoEdit: false
      },
      isIconIndex: "2", // 1 图标 2 列表
      url: "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
      pageSizes: [15, 30],
      keyWord: "",
      categoryId: null,
      searchTaskMap: []
    }
  },
  created() {
    this.setTable()
    let query = this.$route.query
    if (query) {
      console.log("ssssss")
      this.categoryId = query.id ? Number(query.id) : null
      this.pagerOptions.currPage = 1
      this.searchTaskMap = query.id ? [{ categoryId: this.categoryId, title: query.categoryName }] : []
    }
    this.getData()
  },
  methods: {
    setTable() {
      if (this.isIconIndex === "1") {
        this.pageSizes = [30, 60]
        this.pagerOptions.pageSize = 30
  import pageMixin from '@/components/makepager/pager/mixin/pageMixin'
  import { getProductList, deleteProduct, downloadInputFormat } from '@/api/product/product'
  // import DetailProduct from "@/views/productManage/product/DetailProduct"
  import AddProductDialog from '@/views/productManage/product/AddProductDialog'
  import { queryAttributeApi } from '@/api/product/attributeManage.js'
  import Cookies from 'js-cookie'
  import FileSaver from 'file-saver';
  import _ from 'lodash'
  export default {
    attributeList: [],
    name: 'PruductManage',
    props: {},
    components: { AddProductDialog },
    mixins: [pageMixin],
    computed: {},
    data() {
      return {
        token: Cookies.get('token'),
        tableList: {},
        showcol: ['内部编码', '产品规格', '负责人', '产品标签', '成本', '在库数量', '预测数量', '计量单位'],
        searchOptions: [],
        commonDetail: {
          visible: false,
          title: '新建',
          infomation: {},
        },
        editConfig: {
          visible: false,
          title: '新建',
          infomation: {},
          autoEdit: false,
          attributeList: [],
        },
        isIconIndex: '2', // 1 图标 2 列表
        url: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
        pageSizes: [15, 30],
        keyWord: '',
        categoryId: null,
        searchTaskMap: [],
      }
      this.tableList = {
        tableInfomation: [],
        selectBox: false,
        selectIndex: true,
        showcol: this.showcol,
        allcol: [],
        tableColumn: this.setTableColumn(this.showcol)
    },
    created() {
      this.setTable()
      let query = this.$route.query
      if (query) {
        //console.log("ssssss")
        this.categoryId = query.id ? Number(query.id) : null
        this.pagerOptions.currPage = 1
        this.searchTaskMap = query.id ? [{ categoryId: this.categoryId, title: query.categoryName }] : []
      }
      let allcol = []
      for (let i = 0; i < this.tableList.tableColumn.length; i++) {
        if (!this.tableList.tableColumn[i].default) {
          const label = this.tableList.tableColumn[i].label
          allcol.push(label)
      this.getData()
      this.queryAttribute()
    },
    methods: {
      async queryAttribute() {
        const params = {
          page: 0,
          pageSize: 0,
          entityType: 1,
        }
      }
      this.tableList.allcol = allcol
    },
    setTableColumn(showcol) {
      let tableColumn = [
        {
          label: "产品编码",
          prop: "id",
          isShowColumn: true,
          default: true
        },
        {
          label: "产品名称",
          prop: "name",
          isShowColumn: true,
          default: true
        },
        {
          label: "产品规格",
          prop: "specs",
          isShowColumn: showcol.includes("产品规格"),
          default: false
        },
        {
          label: "内部编码",
          prop: "internalReference",
          isShowColumn: showcol.includes("内部编码"),
          default: false
        },
        {
          label: "负责人",
          prop: "principal",
          isShowColumn: true,
          default: true
        },
        {
          label: "产品标签",
          prop: "productTagName",
          isShowColumn: showcol.includes("产品标签"),
          default: false
        },
        {
          label: "条码",
          prop: "barcode",
          isShowColumn: showcol.includes("条码"),
          default: false
        },
        {
          label: "销售价格",
          prop: "salePrice",
          isShowColumn: showcol.includes("销售价格"),
          default: false
        },
        {
          label: "成本",
          prop: "cost",
          isShowColumn: showcol.includes("成本"),
          default: false
        },
        {
          label: "产品类别",
          prop: "categoryName",
          isShowColumn: showcol.includes("产品类别"),
          default: false
        },
        {
          label: "产品类型",
          prop: "model",
          isShowColumn: showcol.includes("产品类型"),
          default: false
        },
        {
          label: "在库数量",
          prop: "amount",
          isShowColumn: showcol.includes("在库数量"),
          default: false
        },
        // {
        //   label: "预测数量",
        //   prop: "status",
        //   isShowColumn: showcol.includes("预测数量"),
        //   default: false,
        //   status: true
        // },
        {
          label: "计量单位",
          prop: "unit",
          isShowColumn: showcol.includes("计量单位"),
          default: false
        const { code, data } = await queryAttributeApi(params)
        if (code == 200) {
          this.attributeList = data
        }
      ]
      return tableColumn
    },
    selTableCol(val) {
      this.showcol = val
      this.tableList.tableColumn = this.setTableColumn(val)
    },
    // 请求数据
    async getData() {
      await getProductList({
        keyWord: this.keyWord,
        categoryId: this.categoryId ? this.categoryId : null,
        page: this.pagerOptions.currPage,
        pageSize: this.pagerOptions.pageSize
      }).then((res) => {
        if (res.code === 200) {
          const list = res.data.map((item) => {
            let srcList = []
            if (item.attachmentList?.length > 0) {
              item.attachmentList.forEach((ele) => {
                if (ele.fileType === "picture") {
                  srcList.push(ele.FileUrl)
                }
              })
            } else {
              srcList = []
            }
      },
      setTable() {
        if (this.isIconIndex === '1') {
          this.pageSizes = [30, 60]
          this.pagerOptions.pageSize = 30
        }
        this.tableList = {
          tableInfomation: [],
          selectBox: false,
          selectIndex: true,
          showcol: this.showcol,
          allcol: [],
          tableColumn: this.setTableColumn(this.showcol),
        }
        let allcol = []
        for (let i = 0; i < this.tableList.tableColumn.length; i++) {
          if (!this.tableList.tableColumn[i].default) {
            const label = this.tableList.tableColumn[i].label
            allcol.push(label)
          }
        }
        this.tableList.allcol = allcol
      },
      setTableColumn(showcol) {
        let tableColumn = [
          {
            label: '产品编码',
            prop: 'id',
            isShowColumn: true,
            default: true,
          },
          {
            label: '产品名称',
            prop: 'name',
            isShowColumn: true,
            default: true,
          },
          {
            label: '产品规格',
            prop: 'specs',
            isShowColumn: showcol.includes('产品规格'),
            default: false,
          },
          {
            label: '内部编码',
            prop: 'internalReference',
            isShowColumn: showcol.includes('内部编码'),
            default: false,
          },
          {
            label: '负责人',
            prop: 'principal',
            isShowColumn: true,
            default: true,
          },
          {
            label: '产品标签',
            prop: 'productTagName',
            isShowColumn: showcol.includes('产品标签'),
            default: false,
          },
          {
            label: '条码',
            prop: 'barcode',
            isShowColumn: showcol.includes('条码'),
            default: false,
          },
          {
            label: '销售价格',
            prop: 'salePrice',
            isShowColumn: showcol.includes('销售价格'),
            default: false,
          },
          {
            label: '成本',
            prop: 'cost',
            isShowColumn: showcol.includes('成本'),
            default: false,
          },
          {
            label: '产品类别',
            prop: 'categoryName',
            isShowColumn: showcol.includes('产品类别'),
            default: false,
          },
          {
            label: '产品类型',
            prop: 'model',
            isShowColumn: showcol.includes('产品类型'),
            default: false,
          },
          {
            label: '在库数量',
            prop: 'amount',
            isShowColumn: showcol.includes('在库数量'),
            default: false,
          },
          // {
          //   label: "预测数量",
          //   prop: "status",
          //   isShowColumn: showcol.includes("预测数量"),
          //   default: false,
          //   status: true
          // },
          {
            label: '计量单位',
            prop: 'unit',
            isShowColumn: showcol.includes('计量单位'),
            default: false,
          },
        ]
        return tableColumn
      },
      selTableCol(val) {
        this.showcol = val
        this.tableList.tableColumn = this.setTableColumn(val)
      },
      // 请求数据
      async getData() {
        await getProductList({
          keyWord: this.keyWord,
          categoryId: this.categoryId ? this.categoryId : null,
          page: this.pagerOptions.currPage,
          pageSize: this.pagerOptions.pageSize,
        }).then((res) => {
          if (res.code === 200) {
            const list = res.data.map((item) => {
              let srcList = []
              if (item.attachmentList?.length > 0) {
                item.attachmentList.forEach((ele) => {
                  if (ele.fileType === 'picture') {
                    srcList.push(ele.FileUrl)
                  }
                })
              } else {
                srcList = []
              }

            return {
              ...item,
              srcList
            }
              return {
                ...item,
                srcList,
              }
            })
            this.tableList.tableInfomation = list || []
            this.pagerOptions.totalCount = res.total
          }
        })
      },
      // 搜索
      searchClick(val) {
        console.log(val)
        this.keyWord = val
        this.pagerOptions.currPage = 1
        this.getData()
      },
      // 新建
      addBtnClick() {
        this.editConfig.title = '新建'
        this.editConfig.infomation = {
          purchaseTypeList: [],
        }
        this.editConfig.visible = true
        this.editConfig.attributeList = JSON.parse(JSON.stringify(this.attributeList))
      },
      // 详情
      showDetail(row) {
        console.log(row)
        this.editConfig.autoEdit = false
        this.editConfig.title = '查看'
        let imageSrc = row.attachmentList?.length > 0 ? row.attachmentList[0].FileUrl : ''
        this.editConfig.infomation = { ...row, imageSrc: imageSrc }
        this.editConfig.visible = true
        this.editConfig.attributeList = row.attributes || []
      },
      // 编辑
      editRow(row) {
        this.editConfig.autoEdit = true
        this.editConfig.title = '编辑'
        let imageSrc = row.attachmentList?.length > 0 ? row.attachmentList[0].FileUrl : ''
        this.editConfig.infomation = { ...row, imageSrc: imageSrc, moreUnitList: row.moreUnitList ? row.moreUnitList : [] }
        this.editConfig.visible = true
        this.editConfig.attributeList = row.attributes || []
      },
      // 切换列表展现形式
      selIconSwitchClick(value) {
        this.pagerOptions.currPage = 1
        this.isIconIndex = value
        if (value === '1') {
          this.pageSizes = [30, 60]
          this.pagerOptions.pageSize = 30
        } else {
          this.pageSizes = [15, 30]
          this.pagerOptions.pageSize = 15
        }
        this.getData()
      },
      // 删除产品类型
      delSelectClick() {
        this.categoryId = 0
        this.getData()
      },
      imgClick() {},

      //删除
      deleteRow(row) {
        this.$confirm('此操作将永久删除该产品, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
        })
          .then(() => {
            deleteProduct({
              id: row.id,
            }).then((res) => {
              if (res.code == 200) {
                this.$message({
                  type: 'success',
                  message: '删除成功!',
                })
                this.getData()
              } else {
                this.$message.error('删除时出错，请稍后重试或联系管理员...')
              }
            })
          })
          this.tableList.tableInfomation = list || []
          this.pagerOptions.totalCount = res.total
          .catch(() => {})
      },

      onSuccess(res, file, fileList) {
        if (res.code == 200) {
          this.$message({
            type: 'success',
            message: '导入成功!',
          })
          this.getData()
        } else {
          this.$message.error(res.msg)
        }
      })
      },
      onError(err, file, fileList) {
        this.$message.error('导入时出错，请稍后重试或联系管理员...')
      },
      downloadInputFormatCilck: _.debounce(function () {
        downloadInputFormat({
        }).then((res) => {
          if (res) {
            console.log(res);
            FileSaver.saveAs(res, '产品导入模板.xlsx');
            this.$message.success('下载成功！')
          }
        })
      }, 1000),
    },
    // 搜索
    searchClick(val) {
      console.log(val)
      this.keyWord = val
      this.pagerOptions.currPage = 1
      this.getData()
    },
    // 新建
    addBtnClick() {
      this.editConfig.title = "新建"
      this.editConfig.infomation = {
        purchaseTypeList:[]
      }
      this.editConfig.visible = true
    },
    // 详情
    showDetail(row) {
      console.log(row)
      this.editConfig.autoEdit = false
      this.editConfig.title = "编辑"
      let imageSrc = row.attachmentList?.length > 0 ? row.attachmentList[0].FileUrl : ""
      this.editConfig.infomation = { ...row, imageSrc: imageSrc }
      this.editConfig.visible = true
    },
    // 编辑
    editRow(row) {
      this.editConfig.autoEdit = true
      this.editConfig.title = "编辑"
      let imageSrc = row.attachmentList?.length > 0 ? row.attachmentList[0].FileUrl : ""
      this.editConfig.infomation = { ...row, imageSrc: imageSrc,moreUnitList:row.moreUnitList?row.moreUnitList:[] }
      this.editConfig.visible = true
    },
    // 切换列表展现形式
    selIconSwitchClick(value) {
      this.pagerOptions.currPage = 1
      this.isIconIndex = value
      if (value === "1") {
        this.pageSizes = [30, 60]
        this.pagerOptions.pageSize = 30
      } else {
        this.pageSizes = [15, 30]
        this.pagerOptions.pageSize = 15
      }
      this.getData()
    },
    // 删除产品类型
    delSelectClick() {
      this.categoryId = 0
      this.getData()
    },
    imgClick() {}
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss" scoped>
.icon-switch {
  height: 15px;
  position: relative;
  .icon-view {
    position: absolute;
    top: -6px;
    right: 20px;
    .icon-label {
      padding: 0px 30px;
      // background: #ffffff;
      border-top-left-radius: 8px;
      border-top-right-radius: 8px;
      cursor: pointer;
      box-shadow: inset 0 0 1px #dee2e6;
      -moz-box-shadow: inset 0 0 1px #dee2e6;
      -webkit-box-shadow: inset 0 0 1px #dee2e6;
    }
    .blueBackgroud {
      color: #fff;
      background: #2a78fb;
    }
    .whiteBackgroud {
      color: #2a78fb;
      background: #fff;
  .icon-switch {
    height: 15px;
    position: relative;
    .icon-view {
      position: absolute;
      top: -6px;
      right: 20px;
      .icon-label {
        padding: 0px 30px;
        // background: #ffffff;
        border-top-left-radius: 8px;
        border-top-right-radius: 8px;
        cursor: pointer;
        box-shadow: inset 0 0 1px #dee2e6;
        -moz-box-shadow: inset 0 0 1px #dee2e6;
        -webkit-box-shadow: inset 0 0 1px #dee2e6;
      }
      .blueBackgroud {
        color: #fff;
        background: #2a78fb;
      }
      .whiteBackgroud {
        color: #2a78fb;
        background: #fff;
      }
    }
  }
}
.product-view {
  padding: 20px 0 0px 20px;
  height: calc(100% - 85px);
  overflow: auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-content: flex-start;
  .product-box {
    width: 294px;
    height: 94px;
    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;
    padding: 8px;
  .product-view {
    padding: 20px 0 0px 20px;
    height: calc(100% - 85px);
    overflow: auto;
    display: flex;
    align-items: center;
    cursor: pointer;
    .left {
      width: 60px;
      text-align: center;
      .img-view {
    flex-wrap: wrap;
    justify-content: flex-start;
    align-content: flex-start;
    .product-box {
      width: 294px;
      height: 94px;
      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;
      padding: 8px;
      display: flex;
      align-items: center;
      cursor: pointer;
      .left {
        width: 60px;
        height: 80px;
        line-height: 80px;
        border: 1px solid #dee2e6;
        font-size: 22px;
        color: #b8babb;
        text-align: center;
        .img-view {
          width: 60px;
          height: 80px;
          line-height: 80px;
          border: 1px solid #dee2e6;
          font-size: 22px;
          color: #b8babb;
        }
      }
    }
    .right {
      flex: 1;
      font-size: 13px;
      margin-left: 10px;
      .label {
        // max-height: 30px;
        color: #212529;
        // margin-top: -5px;
        margin-right: 15px;
        word-break: break-all;
        word-wrap: break-word;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
        text-overflow: ellipsis;
      }
      .price,
      .library {
        color: #495057;
        margin-top: 10px;
      .right {
        flex: 1;
        font-size: 13px;
        margin-left: 10px;
        .label {
          // max-height: 30px;
          color: #212529;
          // margin-top: -5px;
          margin-right: 15px;
          word-break: break-all;
          word-wrap: break-word;
          display: -webkit-box;
          -webkit-line-clamp: 2;
          -webkit-box-orient: vertical;
          overflow: hidden;
          text-overflow: ellipsis;
        }
        .price,
        .library {
          color: #495057;
          margin-top: 10px;
        }
      }
    }
  }
}
.product-list {
  height: calc(100% - 70px);
}
::v-deep {
  .el-table {
    border-top-left-radius: 0px;
    border-top-right-radius: 0px;
  .product-list {
    height: calc(100% - 70px);
  }
}
  ::v-deep {
    .el-table {
      border-top-left-radius: 0px;
      border-top-right-radius: 0px;
    }
  }
</style>