隐藏多单位的问题

haoxuan

2024-04-17 1888b426ff2b6a529f5fdef0f0453dadef71824b

 src/views/productManage/product/index.vue

@@ -5,8 +5,10 @@
        :add-title="'新建'"
        :placeholder="'请输入产品名称'"
        :amount-view="false"
        :search-task-map="searchTaskMap"
        @addCommonClick="addBtnClick"
        @searchClick="searchClick"
        @delSelectClick="delSelectClick"
      />
    </div>
    <div class="list-view">
@@ -14,55 +16,70 @@
        <div class="icon-view">
          <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="tableRowClick(item)">
        <div class="product-box" v-for="item in tableList.tableInfomation" :key="item.id" @click="showDetail(item)">
          <div class="left">
            <el-image style="width: 60px; height: 80px" :src="url"></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>
          </div>
          <div class="right">
            <div class="label">
              <span>南方丝巢SOUTHSILK 19姆米真丝睡衣女 100%桑蚕丝 长版套装家 </span>
              {{ item.name }}
            </div>
            <div class="price">
              <span>价格:￥</span>
              <span>{{ item.name }}</span>
              <span>{{ item.salePrice }}</span>
            </div>
            <div class="library">
              <span>在库：</span>
              <span>{{ item.name }}</span>
              <span>{{ item.amount }}</span>
              <span style="margin-left: 5px">{{ item.unit }}</span>
            </div>
          </div>
        </div>
      </div>
      <!-- 列表形式 -->
      <div v-if="isIconIndex === '2'" class="product-list">
        <TableCommonView
          ref="tableListRef"
          :table-list="tableList"
          @selTableCol="selTableCol"
          @tableRowClick="tableRowClick"
        >
        <TableCommonView ref="tableListRef" :table-list="tableList" @selTableCol="selTableCol">
          <template slot="tableButton">
            <el-table-column label="操作" width="90" 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>
              </template>
            </el-table-column>
          </template>
        </TableCommonView>
        <!-- <div class="btn-pager">
          <PagerView class="page" :pager-options="pagerOptions" v-on="pagerEvents" />
        </div> -->
      </div>
      <div class="btn-pager">
        <PagerView class="page" :pager-options="pagerOptions" v-on="pagerEvents" />
        <PagerView class="page" :pager-options="pagerOptions" :page-size="pageSizes" v-on="pagerEvents" />
      </div>
    </div>
    <!-- 新建/编辑 -->
@@ -85,7 +102,7 @@
  data() {
    return {
      tableList: {},
      showcol: ["内部参考", "负责人", "产品标签", "销售价格", "成本", "在库数量", "预测数量", "计量单位"],
      showcol: ["内部编码",'产品规格', "负责人", "产品标签", "成本", "在库数量", "预测数量", "计量单位"],
      searchOptions: [],
      commonDetail: {
        visible: false,
@@ -95,21 +112,38 @@
      editConfig: {
        visible: false,
        title: "新建",
        infomation: {}
        infomation: {},
        autoEdit: false
      },
      isIconIndex: "1", // 1 图标 2 列表
      url: "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg"
      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
      }
      this.tableList = {
        tableInfomation: [],
        selectBox: true,
        selectBox: false,
        selectIndex: true,
        showcol: this.showcol,
        allcol: [],
        tableColumn: this.setTableColumn(this.showcol)
@@ -126,76 +160,87 @@
    setTableColumn(showcol) {
      let tableColumn = [
        {
          label: "产品名称",
          label: "产品编码",
          prop: "id",
          isShowColumn: true,
          default: true
        },
        {
          label: "内部参考",
          prop: "deviceName",
          isShowColumn: showcol.includes("内部参考"),
          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: "id",
          prop: "principal",
          isShowColumn: true,
          default: true
        },
        {
          label: "产品标签",
          prop: "deviceId",
          prop: "productTagName",
          isShowColumn: showcol.includes("产品标签"),
          default: false
        },
        {
          label: "条码",
          prop: "shopName",
          prop: "barcode",
          isShowColumn: showcol.includes("条码"),
          default: false
        },
        {
          label: "销售价格",
          prop: "faultLevel",
          prop: "salePrice",
          isShowColumn: showcol.includes("销售价格"),
          default: false
        },
        {
          label: "成本",
          prop: "status",
          prop: "cost",
          isShowColumn: showcol.includes("成本"),
          default: false,
          status: true
          default: false
        },
        {
          label: "产品类别",
          prop: "faultTime",
          prop: "categoryName",
          isShowColumn: showcol.includes("产品类别"),
          default: false
        },
        {
          label: "产品类型",
          prop: "shopName",
          prop: "model",
          isShowColumn: showcol.includes("产品类型"),
          default: false
        },
        {
          label: "在库数量",
          prop: "faultLevel",
          prop: "amount",
          isShowColumn: showcol.includes("在库数量"),
          default: false
        },
        {
          label: "预测数量",
          prop: "status",
          isShowColumn: showcol.includes("预测数量"),
          default: false,
          status: true
        },
        // {
        //   label: "预测数量",
        //   prop: "status",
        //   isShowColumn: showcol.includes("预测数量"),
        //   default: false,
        //   status: true
        // },
        {
          label: "计量单位",
          prop: "faultTime",
          prop: "unit",
          isShowColumn: showcol.includes("计量单位"),
          default: false
        }
@@ -207,45 +252,87 @@
      this.tableList.tableColumn = this.setTableColumn(val)
    },
    // 请求数据
    async getData(val, content) {
    async getData() {
      await getProductList({
        [val]: content,
        keyWord: this.keyWord,
        categoryId: this.categoryId ? this.categoryId : null,
        page: this.pagerOptions.currPage,
        pageSize: this.pagerOptions.pageSize
      }).then((res) => {
        if (res.data.code === 200) {
          const list = res.data.data.list.map((item) => {
        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,
              supplierNumber: item.supplier.number
              srcList
            }
          })
          this.tableList.tableInfomation = list || []
          this.pagerOptions.totalCount = res.data.data.total
          this.pagerOptions.totalCount = res.total
        }
      })
    },
    // 搜索
    searchClick(val) {
      console.log(val)
      this.keyWord = val
      this.pagerOptions.currPage = 1
      this.getData()
    },
    // 新建
    addBtnClick() {
      this.editConfig.visible = true
      this.editConfig.title = "新建"
    },
    // 行点击
    tableRowClick(row) {
      console.log(row)
      this.editConfig.infomation = {
        purchaseTypeList:[]
      }
      this.editConfig.visible = true
    },
    // 详情
    showDetail(row) {
      console.log(row)
      this.editConfig.autoEdit = false
      this.editConfig.title = "编辑"
      this.editConfig.infomation = { ...row }
      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 }
      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>
@@ -288,8 +375,8 @@
  justify-content: flex-start;
  align-content: flex-start;
  .product-box {
    width: 295px;
    height: 84px;
    width: 294px;
    height: 94px;
    margin-bottom: 10px;
    margin-right: 20px;
    border: 1px solid #dee2e6;
@@ -298,30 +385,47 @@
    -webkit-box-shadow: inset 0 0 2px #dee2e6;
    padding: 8px;
    display: flex;
    align-items: center;
    cursor: pointer;
    .left {
      width: 60px;
      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: 3px;
        margin-top: 10px;
      }
    }
  }
}
.product-list {
  height: calc(100% - 65px);
  height: calc(100% - 70px);
}
::v-deep {
  .el-table {