feature:家用工程发货单 商用工程发货单

src/views/supply/deliver/commerce_list.vue

@@ -1,349 +1,14 @@
 <template>
-  <div class="app-container">
-    <div v-show="!isShowDetail">
-      <!-- 筛选条件 -->
-      <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="85px" size="mini" label-position="left">
-              <el-row :gutter="20">
-                <!-- <el-col :xs="24" :sm="24" :lg="24">
-                  <el-form-item prop="orderNum" label-width="0">
-                    <el-radio-group v-model="screenForm.status" size="medium">
-                      <el-radio-button label="1">全部</el-radio-button>
-                      <el-radio-button label="2">已发货</el-radio-button>
-                      <el-radio-button label="3">已取消</el-radio-button>
-                    </el-radio-group>
-                  </el-form-item>
-                </el-col> -->
-                <el-col :xs="24" :sm="12" :lg="6">
-                  <el-form-item label="发货单号" prop="orderNum">
-                    <el-input v-model="screenForm.orderNum" placeholder="请输入发货单号" />
-                  </el-form-item>
-                </el-col>
-                <el-col :xs="24" :sm="12" :lg="6">
-                  <el-form-item label="订单号" prop="orderNo">
-                    <el-input v-model="screenForm.orderNo" placeholder="请输入订单号" />
-                  </el-form-item>
-                </el-col>
-                <el-col :xs="24" :sm="12" :lg="6">
-                  <el-form-item label="合同号" prop="contractNo">
-                    <el-input v-model="screenForm.contractNo" placeholder="请输入合同号" />
-                  </el-form-item>
-                </el-col>
-                <!-- <el-col :xs="24" :sm="12" :lg="6">
-                  <el-form-item label="仓库" prop="warehouse">
-                    <el-input v-model="screenForm.warehouse" 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-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-form-item>
-                </el-col>
-                <el-col :xs="24" :sm="12" :lg="6">
-                  <el-form-item label="发货日期" prop="date">
-                    <el-date-picker
-                      v-model="screenForm.date"
-                      type="datetimerange"
-:default-time="['00:00:00','23:59:59']"
-                      range-separator="至"
-                      value-format="yyyy-MM-dd HH:mm:ss"
-                      start-placeholder="开始日期"
-                      end-placeholder="结束日期"
-                    />
-                  </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-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-form-item>
-                </el-col>
-                <el-col :xs="24" :sm="12" :lg="6">
-                  <el-form-item prop="type" label="存货类别">
-                    <el-select v-model="screenForm.type" placeholder="选择存货类别" style="width: 100%" clearable>
-                      <el-option v-for="item in categoryList" :key="item.name" :label="item.name" :value="item.name" />
-                    </el-select>
-                  </el-form-item>
-                </el-col>
-                <el-col :xs="24" :sm="12" :lg="6">
-                  <el-form-item label="业务员" prop="salesMan">
-                    <el-select
-                      v-model="screenForm.salesMan"
-                      placeholder="选择业务员"
-                      clearable
-                      filterable
-                      style="width: 100%"
-                    >
-                      <el-option
-                        v-for="item in salesmanList"
-                        :key="item.adminUserId"
-                        :label="item.nickName"
-                        :value="item.adminUserId"
-                      />
-                    </el-select>
-                  </el-form-item>
-                </el-col>
-                <el-col :xs="24" :sm="12" :lg="6">
-                  <el-form-item label="区域" prop="refRegionWork">
-                    <!--                <el-input v-model="screenForm.refRegionWork" placeholder="请输入区域" />-->
-                    <el-select
-                      v-model="screenForm.refRegionWork"
-                      placeholder="选择区域"
-                      clearable
-                      filterable
-                      style="width: 100%"
-                    >
-                      <el-option label="广州" value="GZ" />
-
-                      <el-option label="佛山" value="FS" />
-                    </el-select>
-                  </el-form-item>
-                </el-col>
-                <el-col :xs="24" :sm="12" :lg="6">
-                  <el-form-item label="制单人" prop="createBy">
-                    <el-input v-model="screenForm.createBy" placeholder="请输入制单人" />
-                  </el-form-item>
-                </el-col>
-              </el-row>
-            </el-form>
-          </template>
-        </Collapse>
-      </div>
-
-      <div class="mymain-container">
-        <div class="btn-group clearfix">
-          <div class="fl">
-            <!-- <el-button size="mini" type="warning" icon="el-icon-close">退货</el-button> -->
-          </div>
-          <div class="fr">
-            <ExportButton :ex-url="'ship/pExport'" :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
-            show-summary
-            :summary-method="$getSummaries"
-          >
-            <el-table-column align="left" label="订单类型" prop="type" min-width="100" show-overflow-tooltip>
-              <template slot-scope="scope">
-                {{ scope.row.type == '1' ? '申请发货单' : scope.row.type == '2' ? '退货单' : '直调发货单' }}
-              </template>
-            </el-table-column>
-            <el-table-column align="left" label="发货申请单" prop="id" min-width="130" show-overflow-tooltip>
-              <template slot-scope="scope">
-                <CopyButton :copy-text="scope.row.id" />
-                <span>{{ scope.row.id }}</span>
-              </template>
-            </el-table-column>
-            <el-table-column
-              align="left"
-              label="发货申请日期"
-              prop="createTime"
-              min-width="160"
-              show-overflow-tooltip
-            />
-            <el-table-column align="left" label="仓库" prop="correspondName" min-width="100" show-overflow-tooltip>
-              <template slot-scope="scope">
-                {{ scope.row.type === 3 ? scope.row.stockName : scope.row.correspondName }}
-              </template>
-            </el-table-column>
-            <el-table-column align="left" label="订单号" prop="enginOrderNo" min-width="140" show-overflow-tooltip>
-              <template slot-scope="scope">
-                <CopyButton :copy-text="scope.row.enginOrderNo" />
-                <span>{{ scope.row.enginOrderNo }}</span>
-              </template>
-            </el-table-column>
-            <el-table-column
-              align="left"
-              label="工程登录编号"
-              prop="refEnginRecordNo"
-              min-width="200"
-              show-overflow-tooltip
-            >
-              <template slot-scope="scope">
-                <CopyButton :copy-text="scope.row.refEnginRecordNo" />
-                <span>{{ scope.row.refEnginRecordNo }}</span>
-              </template>
-            </el-table-column>
-            <el-table-column
-              align="left"
-              label="项目类别"
-              prop="refProjectName"
-              min-width="120"
-              show-overflow-tooltip
-            />
-            <el-table-column align="left" label="使用单位" prop="refUseUnit" min-width="120" show-overflow-tooltip />
-            <el-table-column
-              align="left"
-              label="经销商编码"
-              prop="customerNumber"
-              min-width="100"
-              show-overflow-tooltip
-            >
-              <template slot-scope="scope">
-                <CopyButton :copy-text="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 :copy-text="scope.row.customerName" />
-                <span>{{ scope.row.customerName }}</span>
-              </template>
-            </el-table-column>
-            <el-table-column align="left" label="物料编码" prop="materialCode" min-width="120" show-overflow-tooltip>
-              <template slot-scope="scope">
-                <CopyButton :copy-text="scope.row.materialCode" />
-                <span>{{ scope.row.materialCode }}</span>
-              </template>
-            </el-table-column>
-            <el-table-column
-              align="left"
-              label="产品编码"
-              prop="materialOldNumber"
-              min-width="140"
-              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="160" 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="350" 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="left" label="单位" prop="unit" min-width="100" show-overflow-tooltip />
-            <el-table-column align="right" label="数量" prop="refundableQty" min-width="100" show-overflow-tooltip />
-            <el-table-column align="right" label="含税单价" prop="singlePayPrice" min-width="100" show-overflow-tooltip>
-              <template slot-scope="scope">
-                {{ scope.row.singlePayPrice | numToFixed }}
-              </template>
-            </el-table-column>
-            <el-table-column align="right" label="价税合计" prop="payAmount" min-width="100" show-overflow-tooltip>
-              <template slot-scope="scope">
-                {{ scope.row.payAmount | numToFixed }}
-              </template>
-            </el-table-column>
-            <el-table-column
-              align="right"
-              label="返利金额"
-              prop="payRebateAmount"
-              min-width="100"
-              show-overflow-tooltip
-            >
-              <template slot-scope="scope">
-                {{ scope.row.payRebateAmount | numToFixed }}
-              </template>
-            </el-table-column>
-            <el-table-column
-              align="right"
-              label="格力折扣"
-              prop="totalDiscAmount"
-              min-width="100"
-              show-overflow-tooltip
-            >
-              <template slot-scope="scope">
-                {{ scope.row.totalDiscAmount | numToFixed }}
-              </template>
-            </el-table-column>
-            <el-table-column align="left" label="订单备注" prop="headerRemark" min-width="160" show-overflow-tooltip />
-            <el-table-column align="left" label="发货申请备注" prop="remark" min-width="160" show-overflow-tooltip />
-            <el-table-column align="left" label="表体备注" prop="invoiceRemark" min-width="160" show-overflow-tooltip />
-            <el-table-column align="left" label="业务员" prop="serviceName" min-width="100" show-overflow-tooltip />
-            <el-table-column
-              align="left"
-              label="表头业务员"
-              prop="k3ServiceName"
-              min-width="100"
-              show-overflow-tooltip
-            />
-            <el-table-column align="left" label="制单人" prop="createBy" min-width="100" show-overflow-tooltip />
-            <el-table-column align="left" label="制单日期" prop="createTime" min-width="160" show-overflow-tooltip />
-            <el-table-column align="left" label="区域" prop="refRegionWork" min-width="160" show-overflow-tooltip />
-
-            <el-table-column align="left" label="审核人" prop="approvalName" min-width="100" show-overflow-tooltip />
-            <el-table-column align="left" label="审核日期" prop="approvalTime" min-width="160" show-overflow-tooltip />
-            <el-table-column align="left" label="审核状态" prop="examineStatus" min-width="100" show-overflow-tooltip>
-              <template slot-scope="scope">
-                {{ scope.row.examineStatus | statusFilter }}
-              </template>
-            </el-table-column>
-            <el-table-column
-              v-if="this.$store.getters.customerNumber === '100093' || this.$store.getters.customerNumber === '600023'"
-              align="left"
-              label="同步到格匠采购入库单"
-              prop="gejiangSync"
-              min-width="160"
-              show-overflow-tooltip
-            >
-              <template slot-scope="scope">
-                {{ scope.row.gejiangSync === 1 ? '同步成功' : scope.row.gejiangSync === 0 ? '待同步' : '同步失败' }}
-              </template>
-            </el-table-column>
-            <el-table-column
-              align="left"
-              v-if="this.$store.getters.customerNumber === '100093' || this.$store.getters.customerNumber === '600023'"
-              label="同步格匠失败原因"
-              prop="gejiangSyncRemark"
-              min-width="160"
-              show-overflow-tooltip
-            />
-            <el-table-column align="center" label="操作" width="200" fixed="right">
-              <template slot-scope="scope">
-                <el-button type="text" @click="toDetail(scope.row)">详情</el-button>
-                <el-button v-if="!isDealer" type="text" @click="getPassword(scope.row.id)">获取密码</el-button>
-                <el-button v-if="!isDealer" type="text" @click="openShareDetail(scope.row.id)">密码记录</el-button>
-              </template>
-            </el-table-column>
-          </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"
+    :operation="operation()"
+    :optionsEvensGroup="optionsEvensGroup"
+    :exportList="exportList"
+    :columnParsing="columnParsing"
+    :tableAttributes="tableAttributes"
+    :tableEvents="tableEvents"
+  >
     <!-- 密码记录 -->
     <el-dialog
       title="密码记录"
@@ -384,19 +49,32 @@
       </div>
     </el-dialog>
 
-    <CommerceDetail v-if="isShowDetail" ref="refDetail" :list-item="queryItem" @backListFormDetail="backList" />
-  </div>
+    <Popu v-if="isShowDetail">
+      <CommerceDetail v-if="isShowDetail" ref="refDetail" :list-item="queryItem" @backListFormDetail="backList" />
+    </Popu>
+  </template-page>
 </template>
 
 <script>
-import { getEnginList, getPassword, getPasswordRecord } from '@/api/supply/deliver'
+import {
+  getEnginList,
+  getPassword,
+  getPasswordRecord,
+  invoiceListProjectV2,
+  invoiceListProjectV2Export
+} from '@/api/supply/deliver'
 import { getCategoryList, getSalesmanList } from '@/api/common'
 import CommerceDetail from '@/views/supply/deliver/components/commerce_detail'
 
+import TemplatePage from '@/components/template/template-page-1.vue'
+import Popu from '@/components/template/popu.vue'
+
 let that
 export default {
   components: {
-    CommerceDetail
+    CommerceDetail,
+    TemplatePage,
+    Popu
   },
   filters: {
     statusFilter(val) {
@@ -410,6 +88,19 @@ export default {
   },
   data() {
     return {
+      // 事件组合
+      optionsEvensGroup: [],
+      // 表格属性
+      tableAttributes: {
+        // 启用勾选列
+        selectColumn: false
+      },
+      // 表格事件
+      tableEvents: {
+        'selection-change': this.selectionChange
+      },
+      recordSelected: [],
+
       currentPage: 1, // 当前页码
       pageSize: 10, // 每页数量
       listTotal: 0, // 列表总数
@@ -488,12 +179,68 @@ export default {
   },
 
   created() {
-    this.getSalesmanList()
-    this.getCategoryList()
-    this.getList()
+    // this.getSalesmanList()
+    // this.getCategoryList()
+    // this.getList()
   },
 
   methods: {
+    // 列表请求函数
+    getList(...p) {
+      let params = {
+        ...p[0],
+        orderType: 3
+      }
+      return invoiceListProjectV2(params)
+    },
+    // 列表导出函数
+    exportList: invoiceListProjectV2Export,
+    // 表格列解析渲染数据更改
+    columnParsing(item, defaultData) {
+      return defaultData
+    },
+    // 监听勾选变化
+    selectionChange(data) {
+      this.recordSelected = data
+    },
+    operation() {
+      return (h, { row, index, column }) => {
+        return (
+          <div class="operation-btns">
+            <div class="operation-btns">
+              <el-button
+                size="mini"
+                type="text"
+                onClick={async () => {
+                  this.toDetail(row)
+                }}
+              >
+                详情
+              </el-button>
+              <el-button
+                size="mini"
+                type="text"
+                onClick={async () => {
+                  this.getPassword(row.id)
+                }}
+              >
+                获取密码
+              </el-button>
+              <el-button
+                size="mini"
+                type="text"
+                onClick={async () => {
+                  this.openShareDetail(row.id)
+                }}
+              >
+                密码记录
+              </el-button>
+            </div>
+          </div>
+        )
+      }
+    },
+
     // 获取业务员列表
     getSalesmanList() {
       getSalesmanList({
@@ -517,39 +264,39 @@ export default {
     },
 
     // 查询列表
-    getList() {
-      this.listLoading = true
+    // getList() {
+    //   this.listLoading = true
 
-      const params = {
-        pageNum: this.currentPage,
-        pageSize: this.pageSize,
-        id: this.screenForm.orderNum,
-        enginOrderNo: this.screenForm.orderNo,
-        refEnginRecordNo: this.screenForm.contractNo,
-        customerNumber: this.screenForm.jxsNum,
-        customerName: this.screenForm.jxsName,
-        materialName: this.screenForm.chName,
-        specification: this.screenForm.model,
-        refRegionWork: this.screenForm.refRegionWork,
-        startTime: this.screenForm.date ? this.screenForm.date[0] : '',
-        endTime: this.screenForm.date ? this.screenForm.date[1] : '',
-        categoryName: this.screenForm.type,
-        serviceId: this.screenForm.salesMan,
-        createBy: this.screenForm.createBy,
+    //   const params = {
+    //     pageNum: this.currentPage,
+    //     pageSize: this.pageSize,
+    //     id: this.screenForm.orderNum,
+    //     enginOrderNo: this.screenForm.orderNo,
+    //     refEnginRecordNo: this.screenForm.contractNo,
+    //     customerNumber: this.screenForm.jxsNum,
+    //     customerName: this.screenForm.jxsName,
+    //     materialName: this.screenForm.chName,
+    //     specification: this.screenForm.model,
+    //     refRegionWork: this.screenForm.refRegionWork,
+    //     startTime: this.screenForm.date ? this.screenForm.date[0] : '',
+    //     endTime: this.screenForm.date ? this.screenForm.date[1] : '',
+    //     categoryName: this.screenForm.type,
+    //     serviceId: this.screenForm.salesMan,
+    //     createBy: this.screenForm.createBy,
 
-        orderType: 3 // 2家用工程 3商用工程
-      }
-      getEnginList(params).then(res => {
-        res.data.records.forEach(item => {
-          item.notOutNumber = item.salesStatus ? 0 : item.refundableQty
-          item.sums1 = ['refundableQty', 'notOutNumber']
-          item.sums2 = []
-        })
-        this.dataList = res.data.records
-        this.listTotal = res.data.total
-        this.listLoading = false
-      })
-    },
+    //     orderType: 3 // 2家用工程 3商用工程
+    //   }
+    //   getEnginList(params).then(res => {
+    //     res.data.records.forEach(item => {
+    //       item.notOutNumber = item.salesStatus ? 0 : item.refundableQty
+    //       item.sums1 = ['refundableQty', 'notOutNumber']
+    //       item.sums2 = []
+    //     })
+    //     this.dataList = res.data.records
+    //     this.listTotal = res.data.total
+    //     this.listLoading = false
+    //   })
+    // },
 
     // 提交筛选表单
     submitScreenForm() {
@@ -559,7 +306,7 @@ export default {
 
     // 重置筛选表单
     resetScreenForm() {
-        this.$refs.screenForm.resetFields()
+      this.$refs.screenForm.resetFields()
       this.currentPage = 1
       this.getList()
     },

src/views/supply/deliver/home_list.vue

@@ -1,333 +1,14 @@
 <template>
-  <div class="app-container">
-    <div v-show="!isShowDetail">
-      <!-- 筛选条件 -->
-      <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="120px" size="mini" label-position="left">
-              <el-row :gutter="20">
-                <!-- <el-col :xs="24" :sm="24" :lg="24">
-                  <el-form-item prop="orderNum" label-width="0">
-                    <el-radio-group v-model="screenForm.status" size="medium">
-                      <el-radio-button label="1">全部</el-radio-button>
-                      <el-radio-button label="2">已发货</el-radio-button>
-                      <el-radio-button label="3">已取消</el-radio-button>
-                    </el-radio-group>
-                  </el-form-item>
-                </el-col> -->
-                <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="orderNo">
-                    <el-input v-model="screenForm.orderNo" placeholder="请输入订单号"></el-input>
-                  </el-form-item>
-                </el-col>
-                <el-col :xs="24" :sm="12" :lg="6">
-                  <el-form-item label="工程登录编号" prop="contractNo">
-                    <el-input v-model="screenForm.contractNo" 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-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="date">
-                    <el-date-picker
-                      v-model="screenForm.date"
-                      type="datetimerange"
-                      :default-time="['00:00:00', '23:59:59']"
-                      range-separator="至"
-                      value-format="yyyy-MM-dd HH:mm:ss"
-                      start-placeholder="开始日期"
-                      end-placeholder="结束日期"
-                    >
-                    </el-date-picker>
-                  </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="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 prop="type" label="存货类别">
-                    <el-select v-model="screenForm.type" placeholder="选择存货类别" style="width: 100%" clearable>
-                      <el-option
-                        v-for="item in categoryList"
-                        :key="item.name"
-                        :label="item.name"
-                        :value="item.name"
-                      ></el-option>
-                    </el-select>
-                  </el-form-item>
-                </el-col>
-                <el-col :xs="24" :sm="12" :lg="6">
-                  <el-form-item label="业务员" prop="salesMan">
-                    <el-select
-                      v-model="screenForm.salesMan"
-                      placeholder="选择业务员"
-                      clearable
-                      filterable
-                      style="width: 100%"
-                    >
-                      <el-option
-                        v-for="item in salesmanList"
-                        :key="item.adminUserId"
-                        :label="item.nickName"
-                        :value="item.adminUserId"
-                      >
-                      </el-option>
-                    </el-select>
-                  </el-form-item>
-                </el-col>
-                <el-col :xs="24" :sm="12" :lg="6">
-                  <el-form-item label="区域" prop="refRegionWork">
-                    <el-input v-model="screenForm.refRegionWork" 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="fl">
-            <!-- <el-button size="mini" type="warning" icon="el-icon-close">退货</el-button> -->
-          </div>
-          <div class="fr">
-            <ExportButton :ex-url="'ship/pExport'" :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
-            show-summary
-            :summary-method="$getSummaries"
-          >
-            <el-table-column align="left" label="发货单号" prop="id" min-width="140" show-overflow-tooltip>
-              <template slot-scope="scope">
-                <CopyButton :copy-text="scope.row.id" />
-                <span>{{ scope.row.id }}</span>
-              </template>
-            </el-table-column>
-            <el-table-column align="left" label="发货申请日期" prop="orderTime" min-width="160" show-overflow-tooltip />
-            <el-table-column align="left" label="仓库" prop="correspondName" min-width="100" show-overflow-tooltip />
-            <el-table-column align="left" label="订单号" prop="enginOrderNo" min-width="140" show-overflow-tooltip>
-              <template slot-scope="scope">
-                <CopyButton :copy-text="scope.row.enginOrderNo" />
-                <span>{{ scope.row.enginOrderNo }}</span>
-              </template>
-            </el-table-column>
-            <el-table-column
-              align="left"
-              label="工程登录编号"
-              prop="refEnginRecordNo"
-              min-width="150"
-              show-overflow-tooltip
-            />
-
-            <el-table-column align="left" label="经销商名称" prop="customerName" min-width="250" show-overflow-tooltip>
-              <template slot-scope="scope">
-                <CopyButton :copy-text="scope.row.customerName" />
-                <span>{{ scope.row.customerName }}</span>
-              </template>
-            </el-table-column>
-            <el-table-column align="left" label="使用单位" prop="refUseUnit" min-width="100" show-overflow-tooltip />
-            <el-table-column align="left" label="产品名称" prop="materialName" min-width="160" 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="materialCode" min-width="120" show-overflow-tooltip>
-              <template slot-scope="scope">
-                <CopyButton :copy-text="scope.row.materialCode" />
-                <span>{{ scope.row.materialCode }}</span>
-              </template>
-            </el-table-column>
-            <el-table-column
-              align="left"
-              label="产品编码"
-              prop="materialOldNumber"
-              min-width="140"
-              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="specification" min-width="350" 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="refundableQty" min-width="100" show-overflow-tooltip />
-            <el-table-column align="right" label="单价" prop="price" min-width="100" show-overflow-tooltip />
-            <el-table-column align="right" label="总金额" prop="payAmount" min-width="100" show-overflow-tooltip />
-            <el-table-column
-              align="left"
-              label="安装地址"
-              prop="refInstallAddress"
-              min-width="300"
-              show-overflow-tooltip
-            />
-            <el-table-column align="left" label="联系人" prop="refLinkman" min-width="100" show-overflow-tooltip />
-            <el-table-column align="left" label="固定电话" prop="refTel" min-width="150" show-overflow-tooltip />
-            <el-table-column align="left" label="移动电话" prop="refPhone" min-width="150" show-overflow-tooltip />
-            <el-table-column align="left" label="销售类型" prop="saleTypeName" min-width="150" show-overflow-tooltip />
-            <el-table-column
-              align="left"
-              label="项目类别"
-              prop="refProjectCategory"
-              min-width="200"
-              show-overflow-tooltip
-            />
-            <el-table-column
-              align="left"
-              label="行业类别"
-              prop="refTradeCategory"
-              min-width="200"
-              show-overflow-tooltip
-            />
-            <el-table-column
-              align="left"
-              label="跨区厂编号"
-              prop="refFactoryNo"
-              min-width="100"
-              show-overflow-tooltip
-            />
-            <el-table-column
-              align="left"
-              label="保证函"
-              prop="refPromiseProvide"
-              min-width="100"
-              show-overflow-tooltip
-            />
-            <el-table-column align="left" label="押金" prop="takeDeposit" min-width="100" show-overflow-tooltip>
-              <template v-slot="scope">
-                {{ scope.row.takeDeposit ? '不扣' : '扣' }}
-              </template>
-            </el-table-column>
-            <el-table-column align="left" label="第几申报" prop="refDeclareNo" min-width="100" show-overflow-tooltip />
-            <el-table-column align="left" label="备注信息" prop="headerRemark" min-width="200" show-overflow-tooltip />
-            <el-table-column
-              align="left"
-              label="格力内部备注"
-              prop="geLiInerNote"
-              min-width="100"
-              show-overflow-tooltip
-            />
-            <el-table-column align="left" label="区域" prop="refRegionWork" min-width="300" show-overflow-tooltip />
-            <el-table-column align="left" label="业务员" prop="serviceName" min-width="100" show-overflow-tooltip />
-            <el-table-column
-              align="left"
-              label="实装物料编码"
-              prop="realMaterialNumber"
-              min-width="150"
-              show-overflow-tooltip
-            />
-            <el-table-column
-              align="left"
-              label="实装厂产品编码"
-              prop="realMaterialOldNumber"
-              min-width="150"
-              show-overflow-tooltip
-            />
-            <el-table-column
-              align="left"
-              label="实装规格型号"
-              prop="realSpecification"
-              min-width="300"
-              show-overflow-tooltip
-            />
-            <el-table-column align="left" label="发货申请备注" prop="remark" min-width="200" show-overflow-tooltip />
-            <el-table-column
-              align="left"
-              label="二级经销商代码"
-              prop="secondCustomerNumber"
-              min-width="150"
-              show-overflow-tooltip
-            />
-
-            <el-table-column
-              align="left"
-              label="经销商编码"
-              prop="customerNumber"
-              min-width="150"
-              show-overflow-tooltip
-            >
-              <template slot-scope="scope">
-                <CopyButton :copy-text="scope.row.customerNumber" />
-                <span>{{ scope.row.customerNumber }}</span>
-              </template>
-            </el-table-column>
-            <el-table-column align="left" label="制单人" prop="createBy" min-width="200" show-overflow-tooltip />
-            <el-table-column align="left" label="制单日期" prop="createTime" min-width="200" show-overflow-tooltip />
-            <el-table-column align="left" label="审单人" prop="approvalName" min-width="200" show-overflow-tooltip />
-            <el-table-column align="left" label="审单日期" prop="approvalTime" min-width="200" show-overflow-tooltip />
-            <el-table-column align="right" label="返利金额" min-width="100" show-overflow-tooltip>
-              <template slot-scope="scope">
-                {{ scope.row.payRebateAmount | numToFixed }}
-              </template>
-            </el-table-column>
-
-            <el-table-column align="center" label="操作" width="200" fixed="right">
-              <template slot-scope="scope">
-                <el-button type="text" @click="toDetail(scope.row)">详情</el-button>
-                <el-button type="text" @click="getPassword(scope.row.id)">获取密码</el-button>
-                <el-button type="text" @click="openShareDetail(scope.row.id)">密码记录</el-button>
-              </template>
-            </el-table-column>
-          </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"
+    :operation="operation()"
+    :optionsEvensGroup="optionsEvensGroup"
+    :exportList="exportList"
+    :columnParsing="columnParsing"
+    :tableAttributes="tableAttributes"
+    :tableEvents="tableEvents"
+  >
     <!-- 密码记录 -->
     <el-dialog
       title="密码记录"
@@ -368,8 +49,10 @@
       </div>
     </el-dialog>
 
-    <HomeDetail v-if="isShowDetail" ref="refDetail" :list-item="queryItem" @backListFormDetail="backList" />
-  </div>
+    <Popu v-if="isShowDetail">
+      <HomeDetail ref="refDetail" :list-item="queryItem" @backListFormDetail="backList" />
+    </Popu>
+  </template-page>
 </template>
 
 <script>
@@ -384,12 +67,29 @@ import { getCategoryList, getSalesmanList } from '@/api/common'
 import HomeDetail from '@/views/supply/deliver/components/home_detail'
 
 let that
+import TemplatePage from '@/components/template/template-page-1.vue'
+import Popu from '@/components/template/popu.vue'
 export default {
   components: {
-    HomeDetail
+    HomeDetail,
+    TemplatePage,
+    Popu
   },
   data() {
     return {
+      // 事件组合
+      optionsEvensGroup: [],
+      // 表格属性
+      tableAttributes: {
+        // 启用勾选列
+        selectColumn: false
+      },
+      // 表格事件
+      tableEvents: {
+        'selection-change': this.selectionChange
+      },
+      recordSelected: [],
+
       currentPage: 1, // 当前页码
       pageSize: 10, // 每页数量
       listTotal: 0, // 列表总数
@@ -451,12 +151,68 @@ export default {
   },
 
   created() {
-    this.getSalesmanList()
-    this.getCategoryList()
-    this.getList()
+    // this.getSalesmanList()
+    // this.getCategoryList()
+    // this.getList()
   },
 
   methods: {
+    // 列表请求函数
+    getList(...p) {
+      let params = {
+        ...p[0],
+        orderType: 2
+      }
+      return invoiceListProjectV2(params)
+    },
+    // 列表导出函数
+    exportList: invoiceListProjectV2Export,
+    // 表格列解析渲染数据更改
+    columnParsing(item, defaultData) {
+      return defaultData
+    },
+    // 监听勾选变化
+    selectionChange(data) {
+      this.recordSelected = data
+    },
+    operation() {
+      return (h, { row, index, column }) => {
+        return (
+          <div class="operation-btns">
+            <div class="operation-btns">
+              <el-button
+                size="mini"
+                type="text"
+                onClick={async () => {
+                  this.toDetail(row)
+                }}
+              >
+                详情
+              </el-button>
+              <el-button
+                size="mini"
+                type="text"
+                onClick={async () => {
+                  this.getPassword(row.id)
+                }}
+              >
+                获取密码
+              </el-button>
+              <el-button
+                size="mini"
+                type="text"
+                onClick={async () => {
+                  this.openShareDetail(row.id)
+                }}
+              >
+                密码记录
+              </el-button>
+            </div>
+          </div>
+        )
+      }
+    },
+
     // 获取业务员列表
     getSalesmanList() {
       getSalesmanList({
@@ -480,37 +236,37 @@ export default {
     },
 
     // 查询列表
-    getList() {
-      this.listLoading = true
+    // getList() {
+    //   this.listLoading = true
 
-      const params = {
-        pageNum: this.currentPage,
-        pageSize: this.pageSize,
-        id: this.screenForm.orderNum,
-        enginOrderNo: this.screenForm.orderNo,
-        refEnginRecordNo: this.screenForm.contractNo,
-        customerNumber: this.screenForm.jxsNum,
-        customerName: this.screenForm.jxsName,
-        materialName: this.screenForm.chName,
-        specification: this.screenForm.model,
-        startTime: this.screenForm.date ? this.screenForm.date[0] : '',
-        endTime: this.screenForm.date ? this.screenForm.date[1] : '',
-        categoryName: this.screenForm.type,
-        refRegionWork: this.screenForm.refRegionWork,
-        serviceId: this.screenForm.salesMan,
-        orderType: 2 // 2家用工程 3商用工程
-      }
-      getEnginList(params).then(res => {
-        res.data.records.forEach(item => {
-          item.notOutNumber = item.salesStatus ? 0 : item.refundableQty
-          item.sums1 = ['refundableQty', 'notOutNumber']
-          item.sums2 = ['payAmount', 'afterTaxPrice', 'noTotalAmount']
-        })
-        this.dataList = res.data.records
-        this.listTotal = res.data.total
-        this.listLoading = false
-      })
-    },
+    //   const params = {
+    //     pageNum: this.currentPage,
+    //     pageSize: this.pageSize,
+    //     id: this.screenForm.orderNum,
+    //     enginOrderNo: this.screenForm.orderNo,
+    //     refEnginRecordNo: this.screenForm.contractNo,
+    //     customerNumber: this.screenForm.jxsNum,
+    //     customerName: this.screenForm.jxsName,
+    //     materialName: this.screenForm.chName,
+    //     specification: this.screenForm.model,
+    //     startTime: this.screenForm.date ? this.screenForm.date[0] : '',
+    //     endTime: this.screenForm.date ? this.screenForm.date[1] : '',
+    //     categoryName: this.screenForm.type,
+    //     refRegionWork: this.screenForm.refRegionWork,
+    //     serviceId: this.screenForm.salesMan,
+    //     orderType: 2 // 2家用工程 3商用工程
+    //   }
+    //   getEnginList(params).then(res => {
+    //     res.data.records.forEach(item => {
+    //       item.notOutNumber = item.salesStatus ? 0 : item.refundableQty
+    //       item.sums1 = ['refundableQty', 'notOutNumber']
+    //       item.sums2 = ['payAmount', 'afterTaxPrice', 'noTotalAmount']
+    //     })
+    //     this.dataList = res.data.records
+    //     this.listTotal = res.data.total
+    //     this.listLoading = false
+    //   })
+    // },
 
     // 提交筛选表单
     submitScreenForm() {