feat:经销商采购计划汇总——经销商产品现存表

src/api/stock.js

@@ -1,4 +1,37 @@
 import request, { postBlob, handleImport, getBlob } from '@/utils/request'
+export function getListStockToDayV2(params) {
+  return request({
+    url: `/stock/manager/listStockToDayV2?moduleId=${params.moduleId}`,
+    method: 'post',
+    data: params
+  })
+}
+
+export function exportListStockToDayV2(data, name) {
+  return postBlob({
+    url: '/stock/manager/listStockToDayV2/export',
+    data,
+    name
+  })
+}
+
+export function getListStockToDayCustomerV2(params) {
+  return request({
+    url: `/stock/manager/listStockToDayCustomerV2?moduleId=${params.moduleId}`,
+    method: 'post',
+    data: params
+  })
+}
+
+export function exportListStockToDayCustomerV2(data, name) {
+  return postBlob({
+    url: '/stock/manager/listStockToDayCustomerV2/export',
+    data,
+    name
+  })
+}
+
+
 
 // 获取库存列表
 export function getStockList(params) {

src/api/supply/purchase.js

@@ -1,5 +1,18 @@
-import request from '@/utils/request'
-
+import request, { postBlob, handleImport, getBlob } from '@/utils/request'
+export function getPlanCustomerListV2(params) {
+  return request({
+    url: `/plan/listCustomerV2?moduleId=${params.moduleId}`,
+    method: 'post',
+    data: params
+  })
+}
+export function exportPlanCustomerListV2(data, name) {
+  return postBlob({
+    url: '/plan/listCustomerV2/export',
+    data,
+    name
+  })
+}
 // 获取采购单列表
 export function getPurchaseList(params) {
   return request({

src/components/template/selectData.js

@@ -1,14 +1,29 @@
 import { getWarehouseList } from '@/api/supply/engin'
+import { getCategoryList } from '@/api/common'
+
 export default {
   // 仓库下拉数据
-  stock() {
+  STOCK() {
     return new Promise((r, j) => {
       getWarehouseList({
         pageNum: 1,
         pageSize: -1
       })
         .then(res => {
-          r({ data: res.data.map(item => ({ dictCode: item.id, dictValue: item.name })) })
+          r({ data: res.data.records.map(item => ({ dictCode: item.id, dictValue: item.name })) })
+        })
+        .catch(j)
+    })
+  },
+  // 存货类别
+  CATEGORY() {
+    return new Promise((r, j) => {
+      getCategoryList({
+        pageNum: 1,
+        pageSize: -1
+      })
+        .then(res => {
+          r({ data: res.data.records.map(item => ({ dictCode: item.id, dictValue: item.name })) })
         })
         .catch(j)
     })

src/views/basic_data/stock/product_list.vue

@@ -1,254 +1,83 @@
 <template>
-  <div class="app-container">
-    <!-- 筛选条件 -->
-    <div class="screen-container">
-      <Collapse :screen-form="screenForm">
-        <template #right_btn>
-          <el-button size="mini" @click="resetScreenForm">清空</el-button>
-          <el-button size="mini" type="primary" @click="submitScreenForm">搜索</el-button>
-        </template>
-        <template #search>
-          <el-form ref="screenForm" :model="screenForm" label-width="90px" size="mini" label-position="left">
-            <el-row :gutter="20">
-              <el-col :xs="24" :sm="12" :lg="6">
-                <el-form-item label="物料代码" prop="materialNumber">
-                  <el-input v-model="screenForm.materialNumber" placeholder="请输入物料代码" />
-                </el-form-item>
-              </el-col>
-              <el-col :xs="24" :sm="12" :lg="6">
-                <el-form-item label="产品编码" prop="materialOldNumber">
-                  <el-input v-model="screenForm.materialOldNumber" placeholder="请输入产品编码" />
-                </el-form-item>
-              </el-col>
-              <el-col :xs="24" :sm="12" :lg="6">
-                <el-form-item label="产品名称" prop="materialName">
-                  <el-input v-model="screenForm.materialName" placeholder="请输入产品名称" />
-                </el-form-item>
-              </el-col>
-              <el-col :xs="24" :sm="12" :lg="6">
-                <el-form-item label="规格型号" prop="specification">
-                  <el-input v-model="screenForm.specification" placeholder="请输入产品名称" />
-                </el-form-item>
-              </el-col>
-
-              <el-col :xs="24" :sm="12" :lg="6">
-                <el-form-item label="仓库" prop="correspondId">
-                  <el-select
-                    v-model="screenForm.correspondId"
-                    multiple
-                    style="width: 100%"
-                    placeholder="请选择仓库"
-                    size="mini"
-                    filterable
-                    clearable
-                  >
-                    <el-option
-                      v-for="(item, index) in warehouseList"
-                      :key="index"
-                      :label="item.name"
-                      :value="item.id"
-                    />
-                  </el-select>
-                </el-form-item>
-              </el-col>
-              <el-col :xs="24" :sm="12" :lg="6">
-                <el-form-item label="存货类别" prop="categoryId">
-                  <el-select
-                    v-model="screenForm.categoryId"
-                    style="width: 100%"
-                    placeholder="选择存货类别"
-                    filterable
-                    clearable
-                    multiple
-                  >
-                    <el-option v-for="item in categoryList" :key="item.name" :label="item.name" :value="item.id" />
-                  </el-select>
-                </el-form-item>
-              </el-col>
-
-              <el-col :xs="24" :sm="12" :lg="12" class="tr">
-                <el-form-item>
-                  <el-button @click="resetScreenForm">清空</el-button>
-                  <el-button type="primary" @click="submitScreenForm">搜索</el-button>
-                </el-form-item>
-              </el-col>
-            </el-row>
-          </el-form>
-        </template>
-      </Collapse>
-    </div>
-    <div class="mymain-container">
-      <div class="btn-group clearfix">
-        <div>
-          <ExportButton :ex-url="'/stock/manager/exportStockToDay'" :ex-params="exParams" />
-        </div>
-      </div>
-      <div class="table">
-        <el-table
-          v-loading="listLoading"
-          :data="dataList"
-          element-loading-text="Loading"
-          border
-          fit
-          highlight-current-row
-          stripe
-        >
-          <el-table-column align="left" label="仓库" prop="correspondName" min-width="100" show-overflow-tooltip />
-          <el-table-column align="left" label="存货类别" prop="categoryName" min-width="100" show-overflow-tooltip />
-          <el-table-column align="left" label="物料代码" prop="materialNumber" min-width="150" show-overflow-tooltip>
-            <template slot-scope="scope">
-              <CopyButton :copy-text="scope.row.materialNumber" />
-              <span>{{ scope.row.materialNumber }}</span>
-            </template>
-          </el-table-column>
-          <el-table-column align="left" label="产品编码" prop="materialOldNumber" min-width="150" show-overflow-tooltip>
-            <template slot-scope="scope">
-              <CopyButton :copy-text="scope.row.materialOldNumber" />
-              <span>{{ scope.row.materialOldNumber }}</span>
-            </template>
-          </el-table-column>
-          <el-table-column align="left" label="产品名称" prop="materialName" min-width="200" show-overflow-tooltip>
-            <template slot-scope="scope">
-              <CopyButton :copy-text="scope.row.materialName" />
-              <span>{{ scope.row.materialName }}</span>
-            </template>
-          </el-table-column>
-          <el-table-column align="left" label="规格型号" prop="specification" min-width="300" show-overflow-tooltip>
-            <template slot-scope="scope">
-              <CopyButton :copy-text="scope.row.specification" />
-              <span>{{ scope.row.specification }}</span>
-            </template>
-          </el-table-column>
-          <el-table-column align="right" label="可用数量" prop="stockAdequate" min-width="100" show-overflow-tooltip />
-          <el-table-column align="right" label="开单未提数量" prop="num" min-width="100" show-overflow-tooltip />
-          <el-table-column align="right" label="结存数量" prop="balanceNumber" min-width="100" show-overflow-tooltip />
-        </el-table>
-      </div>
-    </div>
-    <div class="pagination clearfix">
-      <div class="fr">
-        <el-pagination
-          :current-page="currentPage"
-          :page-sizes="[10, 20, 30, 50]"
-          :page-size="10"
-          layout="total, sizes, prev, pager, next, jumper"
-          :total="listTotal"
-          @size-change="handleSizeChange"
-          @current-change="handleCurrentChange"
-        />
-      </div>
-    </div>
-  </div>
+  <template-page
+    ref="pageRef"
+    :getList="getList"
+    :exportList="exportList"
+    :operation="operation()"
+    :columnParsing="columnParsing"
+  >
+  </template-page>
 </template>
 
 <script>
-import { getListStockToDay } from '@/api/stock'
-import { getCategoryList } from '@/api/common'
-import { getWarehouseList } from '@/api/supply/apply'
+import TemplatePage from '@/components/template/template-page-1.vue'
+import import_mixin from '@/components/template/import_mixin.js'
+import add_callback_mixin from '@/components/template/add_callback_mixin.js'
+import Popu from '@/components/template/popu.vue'
+import { getListStockToDayV2, exportListStockToDayV2 } from '@/api/stock'
 
 export default {
+  components: { TemplatePage, Popu },
+  mixins: [import_mixin, add_callback_mixin],
   data() {
     return {
-      currentPage: 1, // 当前页码
-      pageSize: 10, // 每页数量
-      listTotal: 0, // 列表总数
-      dataList: null, // 列表数据
-      listLoading: false, // 列表加载loading
-      screenForm: {
-        categoryId: [],
-        correspondId: [],
-        materialName: '',
-        materialNumber: '',
-        materialOldNumber: '',
-        specification: ''
-      },
-      typeList: [],
-      warehouseList: [],
-      categoryList: [],
-      isCollapse: true
-    }
-  },
+      visible: false,
+      // 事件组合
+      optionsEvensGroup: [],
+      // 表格属性
+      tableAttributes: {
+        // 启用勾选列
+        selectColumn: true
+      }, // 关闭新增弹窗
 
-  computed: {
-    exParams() {
-      return {
-        categoryId: this.screenForm.categoryId.join(','),
-        correspondId: this.screenForm.correspondId.join(','),
-        materialName: this.screenForm.materialName,
-        materialNumber: this.screenForm.materialNumber,
-        materialOldNumber: this.screenForm.materialOldNumber,
-        specification: this.screenForm.specification
-      }
+      // 表格事件
+      tableEvents: {
+        'selection-change': this.selectionChange
+      },
+      recordSelected: []
     }
   },
-  created() {
-    this.getList()
-  },
   methods: {
-    getList() {
-      const params = {
-        pageNum: this.currentPage,
-        pageSize: this.pageSize,
-        categoryId: this.screenForm.categoryId.join(','),
-        correspondId: this.screenForm.correspondId.join(','),
-        materialName: this.screenForm.materialName,
-        materialNumber: this.screenForm.materialNumber,
-        materialOldNumber: this.screenForm.materialOldNumber,
-        specification: this.screenForm.specification
-      }
-      this.listLoading = true
-      getListStockToDay(params).then(res => {
-        this.dataList = res.data.records
-        this.listTotal = res.data.total
-        this.listLoading = false
-      })
-      this.getWarehouseList()
-      this.getCategoryList()
+    // 列表请求函数
+    getList(...p) {
+      this.recordSelected = []
+      return getListStockToDayV2(...p)
     },
-    // 获取仓库列表
-    getWarehouseList() {
-      getWarehouseList({
-        pageNum: 1,
-        pageSize: -1
-      }).then(res => {
-        this.warehouseList = res.data.records
-      })
+    // 列表导出函数
+    exportList: exportListStockToDayV2,
+    // 表格列解析渲染数据更改
+    columnParsing(item, defaultData) {
+      return defaultData
     },
-
-    // 获取存货类别列表
-    getCategoryList() {
-      getCategoryList({
-        pageNum: 1,
-        pageSize: -1
-      }).then(res => {
-        this.categoryList = res.data.records
-      })
-    },
-    // 提交筛选表单
-    submitScreenForm() {
-      this.currentPage = 1
-      this.getList()
-    },
-
-    // 重置筛选表单
-    resetScreenForm() {
-        this.$refs.screenForm.resetFields()
-      this.currentPage = 1
-      this.getList()
+    // 监听勾选变化
+    selectionChange(data) {
+      this.recordSelected = data
     },
-
-    // 更改每页数量
-    handleSizeChange(val) {
-      this.pageSize = val
-      this.currentPage = 1
-      this.getList()
+    operation() {
+      return (h, { row, index, column }) => {
+        return (
+          <div class="operation-btns">
+            {/* <el-button
+              size="mini"
+              type="text"
+              onClick={ () => {
+                this.visible = true
+                this.detailsId = row.id
+              }}
+            >
+              查看
+            </el-button> */}
+          </div>
+        )
+      }
     },
-
-    // 更改当前页
-    handleCurrentChange(val) {
-      this.currentPage = val
-      this.getList()
+    handleClose() {
+      this.addOff(() => {
+        this.visible = false
+      })()
     }
   }
 }
 </script>
+
+<style lang="scss" scoped></style>

src/views/basic_data/stock/product_list_customer.vue

@@ -1,246 +1,83 @@
 <template>
-  <div class="app-container">
-    <!-- 筛选条件 -->
-    <div class="screen-container">
-      <Collapse :screen-form="screenForm">
-        <template #right_btn>
-          <el-button size="mini" @click="resetScreenForm">清空</el-button>
-          <el-button size="mini" type="primary" @click="submitScreenForm">搜索</el-button>
-        </template>
-        <template #search>
-          <el-form ref="screenForm" :model="screenForm" label-width="90px" size="mini" label-position="left">
-            <el-row :gutter="20">
-              <el-col :xs="24" :sm="12" :lg="6">
-                <el-form-item label="物料代码" prop="materialNumber">
-                  <el-input v-model="screenForm.materialNumber" placeholder="请输入物料代码" />
-                </el-form-item>
-              </el-col>
-              <el-col :xs="24" :sm="12" :lg="6">
-                <el-form-item label="产品编码" prop="materialOldNumber">
-                  <el-input v-model="screenForm.materialOldNumber" placeholder="请输入产品编码" />
-                </el-form-item>
-              </el-col>
-              <el-col :xs="24" :sm="12" :lg="6">
-                <el-form-item label="产品名称" prop="materialName">
-                  <el-input v-model="screenForm.materialName" placeholder="请输入产品名称" />
-                </el-form-item>
-              </el-col>
-              <el-col :xs="24" :sm="12" :lg="6">
-                <el-form-item label="规格型号" prop="specification">
-                  <el-input v-model="screenForm.specification" placeholder="请输入产品名称" />
-                </el-form-item>
-              </el-col>
-
-              <el-col :xs="24" :sm="12" :lg="6">
-                <el-form-item label="仓库" prop="correspondId">
-                  <el-select
-                    v-model="screenForm.correspondId"
-                    multiple
-                    style="width: 100%"
-                    placeholder="请选择仓库"
-                    size="mini"
-                    filterable
-                    clearable
-                  >
-                    <el-option
-                      v-for="(item, index) in warehouseList"
-                      :key="index"
-                      :label="item.name"
-                      :value="item.id"
-                    />
-                  </el-select>
-                </el-form-item>
-              </el-col>
-              <el-col :xs="24" :sm="12" :lg="6">
-                <el-form-item label="存货类别">
-                  <el-select
-                    v-model="screenForm.categoryId"
-                    style="width: 100%"
-                    placeholder="选择存货类别"
-                    filterable
-                    clearable
-                  >
-                    <el-option v-for="item in categoryList" :key="item.name" :label="item.name" :value="item.id" />
-                  </el-select>
-                </el-form-item>
-              </el-col>
-            </el-row>
-          </el-form>
-        </template>
-      </Collapse>
-    </div>
-    <div class="mymain-container">
-      <div class="btn-group clearfix">
-        <div>
-          <ExportButton :ex-url="'/stock/manager/exportStockToDay'" :ex-params="exParams" />
-        </div>
-      </div>
-      <div class="table">
-        <el-table
-          v-loading="listLoading"
-          :data="dataList"
-          element-loading-text="Loading"
-          border
-          fit
-          highlight-current-row
-          stripe
-        >
-          <el-table-column align="left" label="仓库" prop="correspondName" min-width="100" show-overflow-tooltip />
-          <el-table-column align="left" label="存货类别" prop="categoryName" min-width="100" show-overflow-tooltip />
-          <el-table-column align="left" label="物料代码" prop="materialNumber" min-width="150" show-overflow-tooltip>
-            <template slot-scope="scope">
-              <CopyButton :copy-text="scope.row.materialNumber" />
-              <span>{{ scope.row.materialNumber }}</span>
-            </template>
-          </el-table-column>
-          <el-table-column align="left" label="产品编码" prop="materialOldNumber" min-width="150" show-overflow-tooltip>
-            <template slot-scope="scope">
-              <CopyButton :copy-text="scope.row.materialOldNumber" />
-              <span>{{ scope.row.materialOldNumber }}</span>
-            </template>
-          </el-table-column>
-          <el-table-column align="left" label="产品名称" prop="materialName" min-width="200" show-overflow-tooltip>
-            <template slot-scope="scope">
-              <CopyButton :copy-text="scope.row.materialName" />
-              <span>{{ scope.row.materialName }}</span>
-            </template>
-          </el-table-column>
-          <el-table-column align="left" label="规格型号" prop="specification" min-width="300" show-overflow-tooltip>
-            <template slot-scope="scope">
-              <CopyButton :copy-text="scope.row.specification" />
-              <span>{{ scope.row.specification }}</span>
-            </template>
-          </el-table-column>
-          <el-table-column align="right" label="可用数量" prop="stockAdequate" min-width="100" show-overflow-tooltip />
-          <el-table-column align="right" label="开单未提数量" prop="num" min-width="100" show-overflow-tooltip />
-          <el-table-column align="right" label="结存数量" prop="balanceNumber" min-width="100" show-overflow-tooltip />
-        </el-table>
-      </div>
-    </div>
-    <div class="pagination clearfix">
-      <div class="fr">
-        <el-pagination
-          :current-page="currentPage"
-          :page-sizes="[10, 20, 30, 50]"
-          :page-size="10"
-          layout="total, sizes, prev, pager, next, jumper"
-          :total="listTotal"
-          @size-change="handleSizeChange"
-          @current-change="handleCurrentChange"
-        />
-      </div>
-    </div>
-  </div>
+  <template-page
+    ref="pageRef"
+    :getList="getList"
+    :exportList="exportList"
+    :operation="operation()"
+    :columnParsing="columnParsing"
+  >
+  </template-page>
 </template>
 
 <script>
-import { getListStockToDay } from '@/api/stock'
-import { getCategoryList } from '@/api/common'
-import { getWarehouseList } from '@/api/supply/apply'
+import TemplatePage from '@/components/template/template-page-1.vue'
+import import_mixin from '@/components/template/import_mixin.js'
+import add_callback_mixin from '@/components/template/add_callback_mixin.js'
+import Popu from '@/components/template/popu.vue'
+import { getListStockToDayCustomerV2, exportListStockToDayCustomerV2 } from '@/api/stock'
 
 export default {
+  components: { TemplatePage, Popu },
+  mixins: [import_mixin, add_callback_mixin],
   data() {
     return {
-      currentPage: 1, // 当前页码
-      pageSize: 10, // 每页数量
-      listTotal: 0, // 列表总数
-      dataList: null, // 列表数据
-      listLoading: false, // 列表加载loading
-      screenForm: {
-        categoryId: '',
-        correspondId: [],
-        materialName: '',
-        materialNumber: '',
-        materialOldNumber: '',
-        specification: ''
-      },
-      typeList: [],
-      warehouseList: [],
-      categoryList: [],
-      isCollapse: true
-    }
-  },
+      visible: false,
+      // 事件组合
+      optionsEvensGroup: [],
+      // 表格属性
+      tableAttributes: {
+        // 启用勾选列
+        selectColumn: true
+      }, // 关闭新增弹窗
 
-  computed: {
-    exParams() {
-      return {
-        categoryId: this.screenForm.categoryId,
-        correspondId: this.screenForm.correspondId.join(','),
-        materialName: this.screenForm.materialName,
-        materialNumber: this.screenForm.materialNumber,
-        materialOldNumber: this.screenForm.materialOldNumber,
-        specification: this.screenForm.specification
-      }
+      // 表格事件
+      tableEvents: {
+        'selection-change': this.selectionChange
+      },
+      recordSelected: []
     }
   },
-  created() {
-    this.getList()
-  },
   methods: {
-    getList() {
-      const params = {
-        pageNum: this.currentPage,
-        pageSize: this.pageSize,
-        categoryId: this.screenForm.categoryId,
-        correspondId: this.screenForm.correspondId.join(','),
-        materialName: this.screenForm.materialName,
-        materialNumber: this.screenForm.materialNumber,
-        materialOldNumber: this.screenForm.materialOldNumber,
-        specification: this.screenForm.specification
-      }
-      this.listLoading = true
-      getListStockToDay(params).then(res => {
-        this.dataList = res.data.records
-        this.listTotal = res.data.total
-        this.listLoading = false
-      })
-      this.getWarehouseList()
-      this.getCategoryList()
+    // 列表请求函数
+    getList(...p) {
+      this.recordSelected = []
+      return getListStockToDayCustomerV2(...p)
     },
-    // 获取仓库列表
-    getWarehouseList() {
-      getWarehouseList({
-        pageNum: 1,
-        pageSize: -1
-      }).then(res => {
-        this.warehouseList = res.data.records
-      })
+    // 列表导出函数
+    exportList: exportListStockToDayCustomerV2,
+    // 表格列解析渲染数据更改
+    columnParsing(item, defaultData) {
+      return defaultData
     },
-
-    // 获取存货类别列表
-    getCategoryList() {
-      getCategoryList({
-        pageNum: 1,
-        pageSize: -1
-      }).then(res => {
-        this.categoryList = res.data.records
-      })
-    },
-    // 提交筛选表单
-    submitScreenForm() {
-      this.currentPage = 1
-      this.getList()
-    },
-
-    // 重置筛选表单
-    resetScreenForm() {
-        this.$refs.screenForm.resetFields()
-      this.currentPage = 1
-      this.getList()
+    // 监听勾选变化
+    selectionChange(data) {
+      this.recordSelected = data
     },
-
-    // 更改每页数量
-    handleSizeChange(val) {
-      this.pageSize = val
-      this.currentPage = 1
-      this.getList()
+    operation() {
+      return (h, { row, index, column }) => {
+        return (
+          <div class="operation-btns">
+            {/* <el-button
+              size="mini"
+              type="text"
+              onClick={ () => {
+                this.visible = true
+                this.detailsId = row.id
+              }}
+            >
+              查看
+            </el-button> */}
+          </div>
+        )
+      }
     },
-
-    // 更改当前页
-    handleCurrentChange(val) {
-      this.currentPage = val
-      this.getList()
+    handleClose() {
+      this.addOff(() => {
+        this.visible = false
+      })()
     }
   }
 }
 </script>
+
+<style lang="scss" scoped></style>

src/views/supply/purchase/sum_list.vue

@@ -1,341 +1,124 @@
 <template>
-  <div class="app-container">
-    <!-- 筛选条件 -->
-    <div class="screen-container">
-      <Collapse :screen-form="screenForm">
-        <template #right_btn>
-          <el-button size="mini" @click="resetScreenForm">清空</el-button>
-          <el-button size="mini" type="primary" @click="submitScreenForm">搜索</el-button>
-        </template>
-        <template #search>
-          <el-form ref="screenForm" :model="screenForm" label-width="100px" size="mini" label-position="left">
-            <el-row :gutter="20">
-              <el-col :xs="24" :sm="12" :lg="6">
-                <el-form-item label="销售单号" prop="orderNum">
-                  <el-input v-model="screenForm.orderNum" placeholder="请输入销售单号"></el-input>
-                </el-form-item>
-              </el-col>
-              <el-col :xs="24" :sm="12" :lg="6">
-                <el-form-item label="销售类型" prop="salesType">
-                  <el-input v-model="screenForm.salesType" placeholder="请输入销售类型"></el-input>
-                </el-form-item>
-              </el-col>
-              <el-col :xs="24" :sm="12" :lg="6">
-                <el-form-item label="产品名称" prop="chName">
-                  <el-input v-model="screenForm.chName" placeholder="请输入产品名称"></el-input>
-                </el-form-item>
-              </el-col>
-              <el-col :xs="24" :sm="12" :lg="6">
-                <el-form-item label="产品编码" prop="chNum">
-                  <el-input v-model="screenForm.chNum" placeholder="请输入产品编码"></el-input>
-                </el-form-item>
-              </el-col>
-              <el-col :xs="24" :sm="12" :lg="6">
-                <el-form-item label="规格型号" prop="model">
-                  <el-input v-model="screenForm.model" placeholder="请输入规格型号"></el-input>
-                </el-form-item>
-              </el-col>
-              <el-col :xs="24" :sm="12" :lg="6">
-                <el-form-item label="品类" prop="type">
-                  <el-select v-model="screenForm.type" placeholder="全部">
-                    <el-option label="全部" value=""></el-option>
-                    <el-option
-                      v-for="item in typeList"
-                      :key="item.dictCode"
-                      :label="item.dictValue"
-                      :value="item.dictCode"
-                    ></el-option>
-                  </el-select>
-                </el-form-item>
-              </el-col>
-              <el-col :xs="24" :sm="12" :lg="6">
-                <el-form-item label="经销商名称" prop="jxsName">
-                  <el-input v-model="screenForm.jxsName" placeholder="请输入经销商名称"></el-input>
-                </el-form-item>
-              </el-col>
-              <el-col :xs="24" :sm="12" :lg="6">
-                <el-form-item label="经销商编码" prop="jxsNum">
-                  <el-input v-model="screenForm.jxsNum" placeholder="请输入经销商编码"></el-input>
-                </el-form-item>
-              </el-col>
-            </el-row>
-          </el-form>
-        </template>
-      </Collapse>
-    </div>
-
-    <div class="mymain-container">
-      <div class="btn-group clearfix">
-        <div class="fr">
-          <ExportButton :exUrl="'admin/user/mch/export'" :exParams="exParams" />
-        </div>
-      </div>
-      <div class="table">
-        <el-table
-          v-loading="listLoading"
-          :data="dataList"
-          element-loading-text="Loading"
-          border
-          fit
-          highlight-current-row
-          stripe
-          @selection-change="handleSelectionChange"
-        >
-          <el-table-column align="center" type="selection" width="55"></el-table-column>
-          <el-table-column
-            align="center"
-            label="单据号"
-            prop="billNo"
-            min-width="160"
-            show-overflow-tooltip
-          ></el-table-column>
-          <el-table-column align="center" label="订单类型" prop="orderType" min-width="160" show-overflow-tooltip>
-            <template slot-scope="scope">
-              {{ scope.row.orderType | orderTypeFilter }}
-            </template>
-          </el-table-column>
-          <el-table-column
-            align="center"
-            label="销售类型"
-            prop="saleName"
-            min-width="160"
-            show-overflow-tooltip
-          ></el-table-column>
-          <el-table-column align="left" label="物料编码" prop="materialNumber" min-width="120" show-overflow-tooltip>
-            <template slot-scope="scope">
-              <CopyButton :copyText="scope.row.materialNumber" />
-              <span>{{ scope.row.materialNumber }}</span>
-            </template>
-          </el-table-column>
-          <el-table-column align="left" label="产品编码" prop="materialOldNumber" min-width="140" show-overflow-tooltip>
-            <template slot-scope="scope">
-              <CopyButton :copyText="scope.row.materialOldNumber" />
-              <span>{{ scope.row.materialOldNumber }}</span>
-            </template>
-          </el-table-column>
-          <el-table-column align="left" label="产品名称" prop="materialName" min-width="160" show-overflow-tooltip>
-            <template slot-scope="scope">
-              <CopyButton :copyText="scope.row.materialName" />
-              <span>{{ scope.row.materialName }}</span>
-            </template>
-          </el-table-column>
-          <el-table-column align="left" label="规格型号" prop="specification" min-width="350" show-overflow-tooltip>
-            <template slot-scope="scope">
-              <CopyButton :copyText="scope.row.specification" />
-              <span>{{ scope.row.specification }}</span>
-            </template>
-          </el-table-column>
-          <el-table-column
-            align="center"
-            label="计量单位"
-            prop="unit"
-            min-width="100"
-            show-overflow-tooltip
-          ></el-table-column>
-          <el-table-column
-            align="center"
-            label="数量"
-            prop="number"
-            min-width="100"
-            show-overflow-tooltip
-          ></el-table-column>
-          <el-table-column
-            align="center"
-            label="单价"
-            prop="price"
-            min-width="100"
-            show-overflow-tooltip
-          ></el-table-column>
-          <el-table-column
-            align="center"
-            label="金额"
-            prop="amount"
-            min-width="100"
-            show-overflow-tooltip
-          ></el-table-column>
-          <el-table-column align="left" label="经销商编码" prop="customerNumber" min-width="100" show-overflow-tooltip>
-            <template slot-scope="scope">
-              <CopyButton :copyText="scope.row.customerNumber" />
-              <span>{{ scope.row.customerNumber }}</span>
-            </template>
-          </el-table-column>
-          <el-table-column align="left" label="经销商名称" prop="customerName" min-width="250" show-overflow-tooltip>
-            <template slot-scope="scope">
-              <CopyButton :copyText="scope.row.customerName" />
-              <span>{{ scope.row.customerName }}</span>
-            </template>
-          </el-table-column>
-        </el-table>
-      </div>
-    </div>
-    <div class="pagination clearfix">
-      <div class="fr">
-        <el-pagination
-          @size-change="handleSizeChange"
-          @current-change="handleCurrentChange"
-          :current-page="currentPage"
-          :page-sizes="[10, 20, 30, 50]"
-          :page-size="10"
-          layout="total, sizes, prev, pager, next, jumper"
-          :total="listTotal"
-        >
-        </el-pagination>
-      </div>
-    </div>
-
-    <div class="">
+  <div style="height: 100%">
+    <template-page
+      style="height: 90%"
+      ref="pageRef"
+      :getList="getList"
+      :exportList="exportList"
+      :tableEvents="tableEvents"
+      :tableAttributes="tableAttributes"
+      :operation="operation()"
+      :columnParsing="columnParsing"
+    >
+    </template-page>
+    <div class="btn">
       <div>
         <el-button size="small" type="primary" @click="clickSubmit()">提 交</el-button>
       </div>
-      <div style="margin-top: 10px; font-size: 14px; color: #666">注：提交成功后，系统将自动生成采购计划订单</div>
+      <div class="tip">注：提交成功后，系统将自动生成采购计划订单</div>
     </div>
   </div>
 </template>
 
 <script>
-import { getSumList, submitPlan } from '@/api/supply/purchase'
+import TemplatePage from '@/components/template/template-page-1.vue'
+import import_mixin from '@/components/template/import_mixin.js'
+import add_callback_mixin from '@/components/template/add_callback_mixin.js'
+import Popu from '@/components/template/popu.vue'
+import { getPlanCustomerListV2, exportPlanCustomerListV2, submitPlan } from '@/api/supply/purchase'
 import { getDictList } from '@/api/common'
-
 export default {
-  filters: {
-    orderTypeFilter(val) {
-      const MAP = {
-        1: '工程计划单',
-        2: '零售计划单'
-      }
-      return MAP[val]
-    }
-  },
+  components: { TemplatePage, Popu },
+  mixins: [import_mixin, add_callback_mixin],
   data() {
     return {
-      currentPage: 1, // 当前页码
-      pageSize: 10, // 每页数量
-      listTotal: 0, // 列表总数
-      dataList: null, // 列表数据
-      listLoading: false, // 列表加载loading
-      screenForm: {
-        // 筛选表单数据
-        orderNum: '',
-        salesType: '',
-        chName: '',
-        chNum: '',
-        model: '',
-        type: '',
-        jxsName: '',
-        jxsNum: ''
-      },
-      typeList: [],
-      isCollapse: true,
-      multipleSelection: []
-    }
-  },
-
-  computed: {
-    exParams() {
-      return {
-        billNo: this.screenForm.orderNum,
-        saleName: this.screenForm.salesType,
-        materialName: this.screenForm.chName,
-        materialNumber: this.screenForm.chNum,
-        specification: this.screenForm.model,
-        materialType: this.screenForm.type,
-        customerName: this.screenForm.jxsName,
-        customerNumber: this.screenForm.jxsNum
+      visible: false,
+      // 事件组合
+      optionsEvensGroup: [],
+      // 表格属性
+      tableAttributes: {
+        // 启用勾选列
+        selectColumn: true
+      }, // 关闭新增弹窗
+
+      // 表格事件
+      tableEvents: {
+        'selection-change': this.selectionChange
       }
     }
   },
-
-  created() {
-    this.getDictList()
-    this.getList()
-  },
-
   methods: {
-    // 查询按钮权限
-    checkBtnRole(value) {
-      // let btnRole = this.$route.meta.roles;
-      // if(!btnRole) {return true}
-      // let index = btnRole.indexOf(value);
-      // return index >= 0;
-      return true
-    },
-
-    getDictList() {
-      getDictList({ sysDictEnum: 'PRODUCT_TYPE' }).then(res => {
-        this.typeList = res.data
-      })
+    // 列表请求函数
+    getList(...p) {
+      this.recordSelected = []
+      return getPlanCustomerListV2(...p)
     },
-
-    // 查询列表
-    getList() {
-      this.listLoading = true
-
-      let params = {
-        pageNum: this.currentPage,
-        pageSize: this.pageSize,
-        billNo: this.screenForm.orderNum,
-        saleName: this.screenForm.salesType,
-        materialName: this.screenForm.chName,
-        materialNumber: this.screenForm.chNum,
-        specification: this.screenForm.model,
-        materialType: this.screenForm.type,
-        customerName: this.screenForm.jxsName,
-        customerNumber: this.screenForm.jxsNum
-      }
-      getSumList(params).then(res => {
-        this.dataList = res.data.records
-        this.listTotal = res.data.total
-        this.listLoading = false
-      })
+    // 列表导出函数
+    exportList: exportPlanCustomerListV2,
+    // 表格列解析渲染数据更改
+    columnParsing(item, defaultData) {
+      return defaultData
     },
-
-    // 提交筛选表单
-    submitScreenForm() {
-      this.currentPage = 1
-      this.getList()
+    // 监听勾选变化
+    selectionChange(data) {
+      this.recordSelected = data
     },
-
-    // 重置筛选表单
-    resetScreenForm() {
-        this.$refs.screenForm.resetFields()
-      this.currentPage = 1
-      this.getList()
-    },
-
-    // 更改每页数量
-    handleSizeChange(val) {
-      this.pageSize = val
-      this.currentPage = 1
-      this.getList()
+    operation() {
+      return (h, { row, index, column }) => {
+        return (
+          <div class="operation-btns">
+            <el-button
+              size="mini"
+              type="text"
+              onClick={() => {
+                this.visible = true
+                this.detailsId = row.id
+              }}
+            >
+              查看
+            </el-button>
+          </div>
+        )
+      }
     },
-
-    // 更改当前页
-    handleCurrentChange(val) {
-      this.currentPage = val
-      this.getList()
+    handleClose() {
+      this.addOff(() => {
+        this.visible = false
+      })()
     },
-
-    // 表格选择
-    handleSelectionChange(val) {
-      this.multipleSelection = val
+    getDictList() {
+      getDictList({ sysDictEnum: 'PRODUCT_TYPE' }).then(res => {
+        this.typeList = res.data
+      })
     },
 
     // 提交
     clickSubmit() {
-      if (this.multipleSelection.length < 1) {
+      if (this.recordSelected.length < 1) {
         return this.$errorMsg('请选择单据')
       }
       let ids = []
-      this.multipleSelection.forEach(item => {
+      this.recordSelected.forEach(item => {
         ids.push(item.id)
       })
       submitPlan(ids).then(res => {
         this.$successMsg()
-        this.getList()
+        this.$refs.pageRef.refreshList()
       })
     }
   }
 }
 </script>
 
-<style lang="scss" scoped></style>
+<style lang="scss" scoped>
+.btn {
+  margin: 0 20px;
+}
+.tip {
+  margin-top: 10px;
+  text-align: left;
+  font-size: 14px;
+  color: #f00;
+
+}
+</style>