haoxuan
2023-08-30 c35ccb51c02c8852e345b831ef5d2dd96c2cf500
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
<template>
  <div class="add-common">
    <el-dialog
      :title="'相关供应商'"
      :visible.sync="editConfig.visible"
      :width="dialogWidth"
      :before-close="handleClose"
      :close-on-click-modal="false"
      append-to-body
      custom-class="iframe-dialog"
    >
      <div class="table-view">
        <TableCommonView ref="tableListRef" :table-list="tableList" @selCommonClick="selCommonClick"> </TableCommonView>
        <div class="btn-pager">
          <PagerView class="page" :pager-options="pagerOptions" v-on="pagerEvents" />
        </div>
      </div>
      <div slot="footer" class="dialog-footer"></div>
      <!-- 详情 -->
      <DetailSupplier v-if="commonDetail.visible" :common-detail="commonDetail" />
    </el-dialog>
  </div>
</template>
 
<script>
import { getProductList } from "@/api/productManage/product"
import pageMixin from "@/components/makepager/pager/mixin/pageMixin"
import DetailSupplier from "@/views/supplierManage/supplier/DetailSupplier"
export default {
  name: "AddSupplierDialog",
  mixins: [pageMixin],
  props: {
    commonConfig: {
      type: Object,
      default: () => {
        return {
          visible: false,
          infomation: {}
        }
      }
    }
  },
  components: { DetailSupplier },
  computed: {},
  data() {
    return {
      dialogWidth: "80%",
      editConfig: this.commonConfig,
      tableList: {},
      commonDetail: {
        visible: false,
        infomation: {}
      }
    }
  },
  created() {
    this.setTable()
    this.getProductList()
  },
  methods: {
    setTable() {
      this.tableList = {
        tableInfomation: [],
        selectIndex: true,
        tableColumn: [
          { label: "供应商编号", prop: "supplierNumber", min: 190, isCommonClick: true },
          { label: "供应商名称", prop: "supplierName", min: 130 },
          { label: "采购价格", prop: "purchasePrice", min: 130 },
          { label: "供货天数", prop: "deliveryTime", min: 130 },
          { label: "物流时长(天)", prop: "shippingDuration", min: 130 }
        ]
      }
    },
    // 产品列表
    async getProductList(val, content) {
      console.log(val, content)
      await getProductList({
        number: this.editConfig.infomation.number,
        supplierId: this.editConfig.infomation.supplierId,
        page: this.pagerOptions.currPage,
        pageSize: this.pagerOptions.pageSize
      }).then((res) => {
        console.log(res.data)
        const list = res.data.data.list.map((item) => {
          return {
            ...item,
            supplierNumber: item.supplier.number,
            supplierName: item.supplier.name
          }
        })
        this.tableList.tableInfomation = list || []
        this.tableList.totalCount = res.data.data.total
      })
    },
    handleClose() {
      this.editConfig.visible = false
    },
    selCommonClick(row) {
      console.log(row)
      this.commonDetail.visible = true
      this.commonDetail.infomation = { ...row.supplier }
    }
  }
}
</script>
 
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss" scoped>
::v-deep {
  .iframe-dialog .el-dialog__body {
    .table-view {
      margin: 10px;
      .btn-pager {
        display: flex;
        align-items: center;
        .page {
          margin-left: auto;
        }
      }
    }
  }
  .el-dialog__footer {
    background-color: #ffffff;
    height: 10px;
    border-top: 0px;
  }
}
</style>