前置仓页面

src/api/stock.js

@@ -1,4 +1,4 @@
-import request from '@/utils/request'
+import request, { postBlob } from '@/utils/request'
 
 // 获取库存列表
 export function getStockList(params) {
@@ -44,6 +44,7 @@ export function getListStockToDayCustomer(params) {
     params
   })
 }
+
 // 获取预留库存列表
 export function getReservedList(params) {
   return request({
@@ -79,3 +80,30 @@ export function getNoticeNum(params) {
     params
   })
 }
+
+//经销商仓库库存列表(前置)
+export function getcustomerFrontList(params) {
+  return request({
+    url: '/customer/front/list',
+    method: 'post',
+    data: params
+  })
+}
+
+//经销商仓库库存导出（前置）
+// export function getcustomerFrontExport(params) {
+//   return request({
+//     url: '',
+//     method: 'post',
+//     data: params,
+//     responseType: 'blob' //bolb格式的请求方式
+//   })
+// }
+console.log(postBlob)
+export function partsNewInExport(data, name) {
+  return postBlob({
+    url: '/customer/front/list/export',
+    data,
+    name
+  })
+}

src/components/template/import_mixin.js

@@ -0,0 +1,34 @@
+export default {
+  methods: {
+    // 导入按钮
+    importButton(func, name = '导入') {
+      return () => {
+        return (
+          <el-upload
+            action={'_'}
+            http-request={data => {
+              var formdata = new FormData()
+              formdata.append('file', data.file)
+              func({ formdata })
+                .then(res => {
+                  this.$refs.pageRef.refreshList()
+                  this.$message({
+                    type: 'success',
+                    message: '导入成功!'
+                  })
+                })
+                .catch(err => {
+                  this.$message({
+                    type: 'error',
+                    message: err.message || '导入失败'
+                  })
+                })
+            }}
+          >
+            <span>{name}</span>
+          </el-upload>
+        )
+      }
+    }
+  }
+}

src/components/template/operation_mixin.js

@@ -0,0 +1,49 @@
+export default {
+  methods: {
+    operation(opt = {}) {
+      if (opt.view || opt.editor || opt.del) {
+        return (h, { row, index, column }) => {
+          return (
+            <div class="operation-btns">
+              {opt.view ? (
+                <el-button
+                  size="mini"
+                  type="primary"
+                  onClick={() => {
+                    opt.view({ row, index, column });
+                  }}
+                >
+                  查看
+                </el-button>
+              ) : null}
+              {opt.editor ? (
+                <el-button
+                  size="mini"
+                  type="primary"
+                  onClick={() => {
+                    opt.editor({ row, index, column });
+                  }}
+                >
+                  编辑
+                </el-button>
+              ) : null}
+              {opt.del ? (
+                <el-popconfirm
+                  title="这是一段内容确定删除吗？"
+                  onConfirm={() => {
+                    opt.del({ row, index, column });
+                  }}
+                >
+                  <el-button size="mini" type="danger" slot="reference">
+                    删除
+                  </el-button>
+                </el-popconfirm>
+              ) : null}
+            </div>
+          );
+        };
+      }
+      return undefined;
+    }
+  }
+};

src/components/template/sel-export-column-list.vue

@@ -0,0 +1,118 @@
+<template>
+  <el-dialog
+    title="勾选导出列"
+    :before-close="cancel"
+    :visible.sync="dialogVisible"
+    width="400px"
+  >
+    <el-table
+      :data="exportColumnList"
+      v-bind="{
+        height: '100%',
+        style: 'width: 100%',
+        border: true,
+        headerCellClassName: 'headerRowColor',
+        size: 'mini'
+      }"
+    >
+      <el-table-column
+        v-bind="{
+          label: '显示',
+          prop: '',
+          width: '80px'
+        }"
+      >
+        <template slot="header" slot-scope="scope">
+          <div>
+            <el-checkbox v-model="isExport"></el-checkbox>
+            <span style="margin-left:5px">导出</span>
+          </div>
+        </template>
+        <template slot-scope="scope">
+          <el-checkbox v-model="scope.row.isExport"></el-checkbox>
+        </template>
+      </el-table-column>
+      <el-table-column
+        v-bind="{
+          label: '列名',
+          prop: ''
+        }"
+      >
+        <template slot-scope="scope">
+          <div>
+            {{ scope.row.label }}
+          </div>
+        </template>
+      </el-table-column>
+    </el-table>
+    <span slot="footer" class="dialog-footer">
+      <el-button size="mini" @click="cancel">取 消</el-button>
+      <el-button size="mini" type="primary" @click="determine">确 定</el-button>
+    </span>
+  </el-dialog>
+</template>
+
+<script>
+export default {
+  props: {
+    columnList: {
+      type: Array,
+      default: () => []
+    }
+  },
+  data() {
+    return {
+      dialogVisible: false,
+      isExport: true,
+      exportColumnList: []
+    };
+  },
+  watch: {
+    columnList: {
+      handler() {
+        if (this.columnList && this.columnList.length) {
+          this.exportColumnList = this.columnList.map(item => {
+            return { ...item.exportField, isExport: true };
+          });
+          this.dialogVisible = true;
+        } else {
+          this.exportColumnList = [];
+          this.dialogVisible = false;
+        }
+      },
+      deep: true
+    },
+    exportColumnList: {
+      handler() {
+        this.isExport = this.exportColumnList.every(
+          item => item.isExport === true
+        );
+      },
+      deep: true
+    },
+    isExport() {
+      if (
+        this.exportColumnList.every(item => item.isExport === true) !==
+        this.isExport
+      ) {
+        this.exportColumnList.map(item => {
+          item.isExport = this.isExport;
+        });
+      }
+    }
+  },
+  methods: {
+    cancel() {
+      this.$emit("cancel");
+    },
+    determine() {
+      this.$emit(
+        "determine",
+        this.exportColumnList.filter(item => item.isExport)
+      );
+    }
+  }
+};
+</script>
+
+<style lang="scss" scoped></style>

src/components/template/template-page-1.vue

@@ -0,0 +1,333 @@
+<template>
+  <zj-page-template
+    ref="zjpage"
+    style="width: 100%;height: 100%;"
+    :get-table-data="getTableData"
+    :options-evens="evens"
+    :options-evens-group="selBtn(optionsEvensGroup)"
+    :table-attributes="{ ...defaultTableAttributes, ...tableAttributes }"
+    :table-events="{ ...defaultTableEvents, ...tableEvents }"
+    :column-parsing="columnParsing"
+    :reduction="reduction"
+    :plan="[...plan, ...morePlan]"
+    :operation="operation"
+    :operation-column-width="operationColumnWidth"
+    :show-table="showTable"
+    :code-gather="codeGather"
+    @columnWidthChange="columnWidthChange"
+    @columnListChange="columnListChange"
+  >
+    <sel-export-column-list
+      :column-list="columnList"
+      @determine="exportDetermine"
+      @cancel="columnList = []"
+    />
+    <slot />
+  </zj-page-template>
+</template>
+
+<script>
+
+import SelExportColumnList from './sel-export-column-list'
+
+export default {
+  components: {
+    SelExportColumnList
+  },
+  props: {
+    // 事件组合
+    optionsEvensGroup: {
+      type: Array,
+      default: () => []
+    },
+    // 表格属性
+    tableAttributes: {
+      type: Object,
+      default: () => ({})
+    },
+    // 表格事件
+    tableEvents: {
+      type: Object,
+      default: () => ({})
+    },
+    // 表格列解析渲染数据更改
+    columnParsing: {
+      type: Function
+    },
+    // 获取列表的方法
+    getList: {
+      type: Function
+    },
+    // 导出的方法
+    exportList: {
+      type: Function
+    },
+    morePlan: {
+      type: Array,
+      default: () => []
+    },
+    operation: {
+      type: Function
+    },
+    operationColumnWidth: {
+      type: Number,
+      default: 140
+    }
+  },
+  data() {
+    return {
+      // 菜单id
+      moduleId: this.$route.meta.moduleId,
+      // 菜单名
+      moduleName: this.$route.meta.title,
+      // 搜索的参数
+      parameter: {},
+      plan: [
+        {
+          name: '默认方案',
+          paramCallback: () => {
+            return []
+          }
+        }
+      ],
+      // 按钮集合
+      evens: [],
+      // 表格属性
+      defaultTableAttributes: {},
+      // 表格事件
+      defaultTableEvents: {},
+      // 记录初始的id
+      columnsIds: {},
+      // 导出弹窗
+      columnList: [],
+      showTable: false,
+      codeGather: {}
+    }
+  },
+  computed: {
+    userid() {
+      return this.$store.getters.userid
+    }
+  },
+  mounted() {
+    if (this.exportList) {
+      this.evens = [
+        [
+          {
+            name: '导出',
+            click: this.export,
+            loading: false
+          }
+        ]
+      ]
+    }
+    // commonDict().then(res => {
+    //   var codeGather = {}
+    //   res.data.map(item => {
+    //     if (!codeGather[item.dictCode]) {
+    //       codeGather[item.dictCode] = []
+    //     }
+    //     codeGather[item.dictCode].push({
+    //       label: item.dictName,
+    //       value: item.dictValue
+    //     })
+    //   })
+    //   this.codeGather = codeGather
+    // })
+  },
+  methods: {
+    selBtn(arr) {
+      for (var i = 0; i < arr.length; i++) {
+        if (Array.isArray(arr[i])) {
+          this.selBtn(arr[i])
+        }
+        if (
+          !(arr[i].isRole || arr[i].isRole === undefined) ||
+          arr[i].length == 0
+        ) {
+          arr.splice(i, 1)
+          i--
+        }
+      }
+      return arr
+    },
+    // 获取列表数据函数
+    async getTableData(data) {
+      if (!this.getList) {
+        return
+      }
+      try {
+        this.parameter = {
+          pageNum: data.page,
+          pageSize: data.size,
+          orderBy: data.orderBy,
+          params: data.querylist,
+          moduleId: this.moduleId
+        }
+        var res = await this.getList(this.parameter)
+        // res.data.records = []
+        if (res.code == 200) {
+          if (!this.showTable) {
+            this.$nextTick(() => {
+              this.showTable = true
+            })
+          }
+          return res
+        }
+      } catch (error) {
+        console.log(error)
+      }
+    },
+    // 监听列表显示状态与排序变化
+    columnListChange(columnList) {
+      // zfireSave(
+      //   this.$refs.zjpage.columnList.map((item, index) => {
+      //     var data = {
+      //       ...item.exportField,
+      //       sortNum: index,
+      //       isCopy: item.isCopy,
+      //       isTotal: item.isTotal,
+      //       isShow: !item.hidden,
+      //       moduleId: this.moduleId,
+      //       adminUserId: this.userid
+      //     }
+      //     return data
+      //   }),
+      //   this.moduleId
+      // )
+      //   .then(res => {
+      //   })
+      //   .catch(err => {
+      //     this.$message.error('保存失败')
+      //   })
+    },
+    // 监听列宽度变化
+    columnWidthChange({ newWidth, oldWidth, column }) {
+      // zfireSave(
+      //   this.$refs.zjpage.columnList.map((item, index) => {
+      //     if (item.exportField.jname === column.property) {
+      //       item.exportField.width = newWidth
+      //     }
+      //     return {
+      //       ...item.exportField,
+      //       sortNum: index,
+      //       isCopy: item.isCopy,
+      //       isTotal: item.isTotal,
+      //       isShow: !item.hidden,
+      //       moduleId: this.moduleId,
+      //       adminUserId: this.userid
+      //     }
+      //   }),
+      //   this.moduleId
+      // )
+      //   .then(res => {
+      //   })
+      //   .catch(err => {
+      //     this.$message.error('保存失败')
+      //   })
+    },
+    // 表格恢复初始默认状态
+    reduction() {
+      // zfireDel({}, this.userid, this.moduleId)
+      //   .then(res => {
+      //     this.$refs.zjpage.refresh()
+      //   })
+      //   .catch(err => {
+      //     this.$message.error('操作失败')
+      //   })
+    },
+    // 导出
+    export() {
+      this.columnList = this.$refs.zjpage.columnList
+    },
+    exportDetermine(data) {
+      if (!this.exportList) {
+        return
+      }
+      this.evens[0][0].loading = true
+      this.exportList(
+        {
+          ...this.parameter,
+          pageSize: -1,
+          exportFields: data
+        },
+        `${this.moduleName}.xlsx`
+      )
+        .then(res => {
+          this.$message({
+            message: '导出成功',
+            type: 'success'
+          })
+          this.columnList = []
+          this.evens[0][0].loading = false
+        })
+        .catch(() => {
+          this.$message.error('导出失败')
+          this.columnList = []
+          this.evens[0][0].loading = false
+        })
+    },
+    refreshList() {
+      this.$refs.zjpage.refresh()
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+
+::v-deep .el-table__cell {
+  padding: 0 !important;
+}
+
+::v-deep .el-table__column-filter-trigger {
+  .el-icon-arrow-down {
+    font-family: aliyun_iconfont !important;
+    font-size: 13px;
+    line-height: 34px;
+    font-style: normal;
+    font-weight: 400;
+    font-variant: normal;
+    text-transform: none;
+    vertical-align: baseline;
+    display: inline-block;
+    -webkit-font-smoothing: antialiased;
+    transform: translate(-2px, 1px);
+    color: #c0c4cc;
+  }
+
+  .el-icon-arrow-down:before {
+    content: "\e64c" !important;
+  }
+}
+
+::v-deep .zj-buttons-group {
+  .el-upload-list {
+    display: none !important;
+  }
+}
+
+::v-deep .operation-btns {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+
+  & > *:not(:last-child) {
+    margin-right: 5px;
+  }
+
+  .el-button {
+    margin-left: 0 !important;
+  }
+}
+
+::v-deep .is-disabled {
+  .el-textarea__inner,
+  .el-input__inner {
+    background-color: #fff;
+    color: #606266;
+  }
+}
+</style>

src/utils/request.js

@@ -42,8 +42,7 @@ service.interceptors.response.use(
    * Determine the request status by custom code
    * Here is just an example
    * You can also judge the status by HTTP Status Code
-   */
-  response => {
+   */ response => {
     const res = response.data
 
     // if the custom code is not 20000, it is judged as an error.
@@ -84,3 +83,36 @@ service.interceptors.response.use(
 )
 
 export default service
+
+// post方式导出文件
+export function postBlob(data) {
+  return new Promise(function (r, j) {
+    axios({
+      method: 'post',
+      url: process.env.VUE_APP_BASE_API + data.url, // 后端接口地址
+      responseType: 'blob', // bolb格式的请求方式
+      headers: {
+        'x-token': getToken() // 请求头
+      },
+      data: data.data // 需要传给后端的请求参数体
+    })
+      .then(res => {
+        const BLOB = res.data
+        const fileReader = new FileReader()
+        fileReader.readAsDataURL(BLOB) // 对请求返回的文件进行处理
+        fileReader.onload = e => {
+          const a = document.createElement('a')
+          a.download = data.name
+          a.href = e.target.result
+          document.body.appendChild(a)
+          a.click()
+          document.body.removeChild(a)
+        }
+        r()
+      })
+      .catch(err => {
+        console.log(err.message)
+        j()
+      })
+  })
+}

src/views/basic_data/stock/preposition_stock_list.vue

@@ -1,13 +1,112 @@
 <template>
-$END$
+  <div>
+    <template-page
+      style="width: 100%;
+      height: 100%;"
+      ref="pageRef"
+      :getList="getList"
+      :exportList="exportList"
+      :columnParsing="columnParsing"
+    >
+    </template-page>
+  </div>
 </template>
 
 <script>
+import TemplatePage from '@/components/template/template-page-1.vue'
+import import_mixin from '@/components/template/import_mixin.js'
+
+import { getcustomerFrontList, partsNewInExport } from '@/api/stock'
 export default {
-name: "preposition_stock_list"
+  components: { TemplatePage },
+  mixins: [import_mixin],
+  data() {
+    return {
+      // 事件组合
+      optionsEvensGroup: [
+        [
+          [
+            {
+              name: '批量删除',
+              click: this.dels,
+              isRole: this.$checkBtnRole('del', this.$route.meta.roles)
+            }
+          ]
+        ]
+      ],
+      // 表格属性
+      tableAttributes: {
+        // 启用勾选列
+        selectColumn: true
+      },
+      // 表格事件
+      tableEvents: {
+        'selection-change': this.selectionChange
+      },
+      recordSelected: []
+    }
+  },
+  methods: {
+    // 列表请求函数
+    getList(...p) {
+      this.recordSelected = []
+      return getcustomerFrontList(...p)
+    },
+    // 列表导出函数
+    exportList: partsNewInExport,
+    // 表格列解析渲染数据更改
+    columnParsing(item, defaultData) {
+      return defaultData
+    },
+    // 监听勾选变化
+    selectionChange(data) {
+      this.recordSelected = data
+    }
+    // 批量删除
+    // dels() {
+    //   if (this.recordSelected.length) {
+    //     this.$confirm('此操作将删除数据, 是否继续?', '提示', {
+    //       confirmButtonText: '确定',
+    //       cancelButtonText: '取消',
+    //       type: 'warning'
+    //     })
+    //       .then(() => {
+    //         partsOldOutDel({
+    //           ids: this.recordSelected.map(item => item.id).join(',')
+    //         })
+    //           .then(res => {
+    //             this.$refs.pageRef.refreshList()
+    //             this.$message({
+    //               type: 'success',
+    //               message: '删除成功!'
+    //             })
+    //           })
+    //           .catch(() => {
+    //             this.$message({
+    //               type: 'error',
+    //               message: '删除失败'
+    //             })
+    //           })
+    //       })
+    //       .catch(() => {
+    //         this.$message({
+    //           type: 'info',
+    //           message: '已取消删除'
+    //         })
+    //       })
+    //   } else {
+    //     this.$message({
+    //       type: 'info',
+    //       message: '请先勾选需要删除的数据!'
+    //     })
+    //   }
+    // }
+  }
 }
 </script>
 
-<style scoped>
-
+<style lang="scss" scoped>
+::v-deep .el-table__body-wrapper {
+  height: 100% !important;
+}
 </style>