fuliqi
2024-01-24 29c1e7eb5ac16e90d8991a86c1c071bc312ec8d9
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
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
<template>
  <div>
    <list-condition-template ref="table" :form="listQuery" :formLabel="formLabel"
                             :tableData="tableData" :total="total" v-loading="loading"
                             element-loading-custom-class="customLoading"
                             @page-info-change="handlePageInfoChange">
      <template slot="otherElement">
        <el-col :span="6" :offset="0">
          <el-form-item>
            <el-button size="mini" type="primary" @click="queryData">查询</el-button>
            <el-button size="mini" @click="resetQuery">重置</el-button>
          </el-form-item>
        </el-col>
      </template>
      <template slot="operationSection">
        <el-button size="mini" type="primary" icon="el-icon-download" @click="exportData">导出
        </el-button>
      </template>
      <template slot="columns">
        <el-table-column label="规格编码" prop="prodSkuNo" width="180px" show-overflow-tooltip>
        </el-table-column>
        <el-table-column label="商品主编码" prop="prodNum" width="180px" show-overflow-tooltip>
        </el-table-column>
        <el-table-column label="商品名称" prop="prodName" show-overflow-tooltip>
        </el-table-column>
        <el-table-column label="商品类型" prop="prodTypeTrans" width="150px" show-overflow-tooltip>
        </el-table-column>
        <el-table-column label="规格型号" prop="casesOfGauge" width="150px"
                         show-overflow-tooltip></el-table-column>
        <el-table-column label="计量单位" prop="unitOfMeasurement" width="120px"></el-table-column>
        <el-table-column label="单元计数(扣减数量)" prop="skuUnit" width="180px" show-overflow-tooltip>
        </el-table-column>
        <el-table-column label="创建时间" prop="createTime" width="180px">
          <template slot-scope="scope">
            {{scope.row.createTime | dateFormat}}
          </template>
        </el-table-column>
      </template>
    </list-condition-template>
  </div>
</template>
 
<script>
import moment from "moment"
import ProductMapApi from '@/api/productmanagement/productMap'
import { downloadFile } from '@/utils/downloadFile'
export default {
  name: "productMapList",
  data() {
    return {
      loading: false,
      formLabel: [
        {
          model: 'prodSkuNo',
          label: '规格编码',
          type: 'input'
        },
        {
          model: 'prodNum',
          label: '商品主编码',
          type: 'input',
          labelWidth: '120px',
          rule: /[^\w]/g // 可输入数字字母
        },
        {
          model: 'prodName',
          label: '商品名称',
          type: 'input'
        }
 
      ],
      listQuery: {
        prodSkuNo: null,
        prodNum: null,
        prodName: null
      },
      tableData: [],
      total: 0
    }
  },
  filters: {
    // 格式化日期
    dateFormat(value) {
      return moment(value).format('YYYY-MM-DD HH:mm:ss')
    }
  },
  /**
   * 数据变化后刷新列表
   */
  activated() {
    this.queryList(this.$refs.table.getPageInfo())
  },
  methods: {
    /**
 * 查询列表
 */
    queryList(pageInfo = { pageNum: 1, pageSize: 10 }) {
      ProductMapApi.getList({ ...this.listQuery, ...pageInfo }).then(res => {
        if (res.code === '0') {
          this.tableData = res.data.list
          this.total = res.data.total
        }
      })
    },
    /**
    * 导出
    */
    async exportData() {
      this.loading = true
      const config = {
        url: 'awl-order-service/orderSplitStrategy/ecProductSku/export',
        data: this.listQuery,
        fileName: '商品映射数据导出',
        type: '.xlsx'
      }
      const res = await downloadFile(config)
      if (res) {
        this.loading = false
      } else {
        this.loading = false
      }
    },
    /**
   * 分页信息改变时查询列表
   */
    handlePageInfoChange(pageInfo) {
      this.queryList(pageInfo)
    },
    /**
     * 重置
     */
    resetQuery() {
      this.$refs.table.reloadCurrent()
    },
    /**
     * 点击查询按钮
     */
    queryData() {
      this.$refs.table.changeCondition()
    },
  }
}
</script>
 
<style>
</style>