feature: 工程产品价格列表

src/views/supply/price/price_list.vue

@@ -1,263 +1,76 @@
 <template>
-  <div class="app-container">
-    <!-- 筛选条件 -->
-    <div>
-      <Collapse :screen-form="screenForm">
-        <template #right_btn>
-          <div>
-            <el-button size="mini" @click="resetScreenForm">清空</el-button>
-            <el-button type="primary" size="mini" @click="submitScreenForm">搜索</el-button>
-          </div>
-        </template>
-        <template #search>
-          <el-form ref="screenForm" :model="screenForm" label-width="70px" 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="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="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="startDate">-->
-              <!--              <el-date-picker-->
-              <!--                v-model="screenForm.startDate"-->
-              <!--                type="datetime"-->
-              <!--                placeholder="请输入生效日期"-->
-              <!--                value-format="yyyy-MM-dd HH:mm:ss"-->
-              <!--              >-->
-              <!--              </el-date-picker>-->
-              <!--            </el-form-item>-->
-              <!--          </el-col>-->
-              <!--          <el-col :xs="24" :sm="12" :lg="6">-->
-              <!--            <el-form-item label="失效日期" prop="endDate">-->
-              <!--              <el-date-picker-->
-              <!--                v-model="screenForm.endDate"-->
-              <!--                type="datetime"-->
-              <!--                placeholder="请输入生效日期"-->
-              <!--                value-format="yyyy-MM-dd HH:mm:ss "-->
-              <!--              >-->
-              <!--              </el-date-picker>-->
-              <!--            </el-form-item>-->
-              <!--          </el-col>-->
-              <el-col :xs="24" :sm="12" :lg="6">
-                <el-form-item label="销售类型" prop="saleTypeId">
-                  <el-select v-model="screenForm.saleTypeId" filterable placeholder="选择销售类型" style="width: 100%">
-                    <el-option label="全部" value="" />
-                    <el-option v-for="item in ztypeList" :key="item.id" :label="item.saleName" :value="item.id" />
-                  </el-select>
-                </el-form-item>
-              </el-col>
-              <el-col :xs="24" :sm="12" :lg="6">
-                <el-form-item label="产品类别" prop="k3CategoryNumber">
-                  <el-select v-model="screenForm.k3CategoryNumber" placeholder="请选择产品类别" style="width: 100%">
-                    <el-option label="全部" value="" />
-                    <el-option v-for="item in dictList" :label="item.name" :key="item" :value="item.number" />
-                  </el-select>
-                </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="remark">
-                  <el-input v-model="screenForm.remark" placeholder="请输入备注" />
-                </el-form-item>
-              </el-col>
-            </el-row>
-          </el-form>
-        </template>
-      </Collapse>
-    </div>
-    <!-- 按钮 -->
-    <div class="btn-group clearfix">
-      <div>
-        <el-popconfirm
-          v-if="$checkBtnRole('del', $route.meta.roles)"
-          confirm-button-text="好的"
-          cancel-button-text="不用了"
-          icon="el-icon-info"
-          icon-color="red"
-          title="内容确定删除吗？"
-          @onConfirm="handleDelete"
-        >
-          <el-button type="primary" size="mini" icon="el-icon-delete" slot="reference" class="el-popover-left"
-            >删除</el-button
-          >
-        </el-popconfirm>
-        <el-button type="primary" style="margin-left: 10px" size="mini" @click="handleRevokeAll">批量作废</el-button>
-        <!--        <el-button type="primary" size="mini">导出</el-button>-->
-        <!-- <el-button type="primary" size="mini">打印</el-button> -->
-      </div>
-      <div class="fl">
-        <!-- <el-popconfirm
-                style="margin-right: 10px"
-                title="批量作废吗？"
-                @onConfirm="handleRevokeAll"
-              >
-                <el-button
-                  slot="reference"
-                  type="text"
-                  size="mini"
-                >批量作废</el-button>
-
-                </el-popconfirm> -->
-      </div>
-    </div>
-
-    <div class="mymain-container">
-      <!-- 列表 -->
-      <div class="table">
-        <el-table
-          v-loading="listLoading"
-          :data="dataList"
-          element-loading-text="Loading"
-          border
-          fit
-          :row-class-name="tableRowClassName"
-          @select-all="hanleSelectAll"
-          @select="hanleSelectAll"
-        >
-          <el-table-column type="selection" align="left" width="50"></el-table-column>
-          <!--          <el-table-column type="selection" align="left" />-->
-          <!-- <el-table-column
-            align="left"
-            label="产品类别"
-            prop="mainName"
-            min-width="160"
-            show-overflow-tooltip
-          ></el-table-column> -->
-          <el-table-column align="left" label="物料编码" prop="materialNumber" min-width="200" 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="200" 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="200" 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="200" 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="left" label="销售类型" prop="saleTypeName" min-width="160" show-overflow-tooltip />
-          <el-table-column align="left" label="单位" prop="unit" min-width="160" show-overflow-tooltip />
-          <el-table-column align="left" label="数量下限" prop="qty" min-width="160" show-overflow-tooltip />
-          <el-table-column align="left" label="返利类型（钱包）" prop="wallets" min-width="200" show-overflow-tooltip>
-            <template slot-scope="scope">
-              <template v-for="(item, index) in scope.row.wallets">
-                <template v-if="item.type === 'REBATE'">
-                  <el-tag :key="index" type="success" style="margin: 0 10px" size="mini">
-                    {{ item.walletName }}
-                  </el-tag>
-                </template>
-              </template>
-            </template>
-          </el-table-column>
-          <el-table-column
-            align="left"
-            label="现金钱包"
-            prop="modifyPriceDepartment"
-            min-width="200"
-            show-overflow-tooltip
-          >
-            <template slot-scope="scope">
-              <template v-for="(item, index) in scope.row.wallets">
-                <template v-if="item.type === 'COMMONLY'">
-                  <el-tag :key="index" type="success" style="margin: 0 10px" size="mini">
-                    {{ item.walletName }}
-                  </el-tag>
-                </template>
-              </template>
-            </template>
-          </el-table-column>
-          <el-table-column align="left" label="生效日期" prop="startDate" min-width="160" show-overflow-tooltip />
-
-          <el-table-column align="left" label="失效日期" prop="endDate" min-width="160" show-overflow-tooltip />
-          <el-table-column align="left" label="是否销价" prop="isPromote" min-width="160" show-overflow-tooltip>
-            <template slot-scope="scope">
-              <el-tag size="mini" v-if="scope.row.isPromote" type="success">是</el-tag>
-              <el-tag size="mini" v-else type="danger">否</el-tag>
-            </template>
-          </el-table-column>
-          <el-table-column align="left" label="是否作废" prop="isRevoke" min-width="160" show-overflow-tooltip>
-            <template slot-scope="scope">
-              <el-tag size="mini" v-if="scope.row.isRevoke" type="success">是</el-tag>
-              <el-tag size="mini" v-else type="danger">否</el-tag>
-            </template>
-          </el-table-column>
-          <el-table-column align="right" label="批发价1" prop="batchPrice" min-width="160" show-overflow-tooltip />
-          <el-table-column align="right" label="格力折扣" prop="discAmount" min-width="160" show-overflow-tooltip />
-          <el-table-column align="left" label="备注" prop="remark" min-width="160" show-overflow-tooltip />
-          <el-table-column fixed="left" width="150" label="操作" align="center">
-            <template slot-scope="scope">
-              <el-popconfirm
-                v-if="!scope.row.isRevoke"
-                style="margin-right: 10px"
-                title="作废吗？"
-                @onConfirm="handleRevoke(scope.row.id)"
-              >
-                <el-button slot="reference" type="text" size="mini">作废</el-button>
-              </el-popconfirm>
-
-              <el-button
-                v-if="$checkBtnRole('del', $route.meta.roles)"
-                type="text"
-                size="mini"
-                @click="handleDelete(scope.row.id)"
-                >删除</el-button
-              >
-            </template>
-          </el-table-column>
-        </el-table>
-      </div>
-      <!-- 分页 -->
-      <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"
+    :optionsEvensGroup="optionsEvensGroup"
+    :operation="operation()"
+    :columnParsing="columnParsing"
+    :tableAttributes="tableAttributes"
+    :tableEvents="tableEvents"
+  >
+  </template-page>
 </template>
 
 <script>
+import TemplatePage from '@/components/template/template-page-1.vue'
 import Mixin from '@/mixin/index'
-import { getProductDelete, getProductPriceList, getTypeList, handlePriceRevoke } from '@/api/basic_data/material'
+import {
+  getProductDelete,
+  getProductPriceList,
+  v2ProductPriceList,
+  getTypeList,
+  handlePriceRevoke
+} from '@/api/basic_data/material'
 import { getCategoryList } from '@/api/common'
 
 export default {
-  mixins: [Mixin],
+  components: { TemplatePage },
+  mixins: [],
   data() {
     return {
+      // 事件组合
+      optionsEvensGroup: [
+        [
+          [
+            {
+              name: '批量删除',
+              click: async () => {
+                if (this.recordSelected.length === 0) {
+                  this.$message.error('请选择需要删除的数据')
+                  return
+                }
+                this.handleDelete()
+              },
+              isRole: this.$checkBtnRole('del', this.$route.meta.roles)
+            }
+          ]
+        ],
+        [
+          [
+            {
+              name: '批量作废',
+              click: async () => {
+                if (this.recordSelected.length === 0) {
+                  this.$message.error('请选择需要作废的数据')
+                  return
+                }
+                this.handleRevokeAll()
+              }
+            }
+          ]
+        ]
+      ],
+      // 表格属性
+      tableAttributes: {
+        // 启用勾选列
+        selectColumn: true
+      },
+      // 表格事件
+      tableEvents: {
+        'selection-change': this.selectionChange
+      },
+      recordSelected: [],
+
       currentPage: 1, // 当前页码
       pageSize: 10, // 每页数量
       listTotal: 0, // 列表总数
@@ -279,61 +92,144 @@ export default {
     }
   },
   mounted() {
-    getCategoryList({ pageNum: 1, pageSize: -1 }).then(res => {
-      this.dictList = res.data.records
-      console.log(this.dictList, 777777)
-    })
+    // getCategoryList({ pageNum: 1, pageSize: -1 }).then(res => {
+    //   this.dictList = res.data.records
+    //   console.log(this.dictList, 777777)
+    // })
   },
   methods: {
+    // 列表请求函数
+    getList(...p) {
+      let params = {
+        moduleId: p[0].moduleId,
+        orderBy: p[0].orderBy,
+        pageNum: p[0].pageNum,
+        pageSize: p[0].pageSize,
+        params: [...p[0].params, { param: 'bill_type', compare: '=', value: 'HOME' }]
+      }
+      return v2ProductPriceList(params)
+    },
+    // 列表导出函数
+    // exportList: v2ProductPriceListExport,
+    // 表格列解析渲染数据更改
+    columnParsing(item, defaultData) {
+      return defaultData
+    },
+    // 监听勾选变化
+    selectionChange(data) {
+      this.recordSelected = data
+    },
+    operation() {
+      return (h, { row, index, column }) => {
+        return (
+          <div class="operation-btns">
+            {row.isRevoke === '否' ? (
+              <el-popconfirm
+                onOnConfirm={async () => {
+                  this.handleRevoke(row.id)
+                }}
+                title="是否确定需要作废该项内容?"
+              >
+                <el-button slot="reference" size="mini" type="text">
+                  作废
+                </el-button>
+              </el-popconfirm>
+            ) : (
+              ''
+            )}
+
+            {this.$checkBtnRole('del', this.$route.meta.roles) ? (
+              <el-popconfirm
+                onOnConfirm={async () => {
+                  this.handleDelete(row.id)
+                }}
+                title="是否确定需要删除该项内容?"
+              >
+                <el-button slot="reference" size="mini" type="text">
+                  删除
+                </el-button>
+              </el-popconfirm>
+            ) : (
+              ''
+            )}
+          </div>
+        )
+      }
+    },
+
     addFn() {
       this.showDialogForm = true
     },
 
+    hanleDeleteAllPromise(id) {
+      return new Promise((resolve, reject) => {
+        const ids = id
+          ? [id]
+          : this.recordSelected.map(v => {
+              return v.id
+            })
+        if (!ids.length) {
+          this.$errorMsg('请选择删除内容')
+          return
+        }
+        resolve(ids)
+      })
+    },
+
     handleDelete(id) {
       this.hanleDeleteAllPromise(id).then(ids => {
         getProductDelete(ids).then(res => {
           this.$successMsg('删除成功')
-          this.getList()
+          // this.getList()
+          this.$refs.pageRef.refreshList()
         })
       })
     },
-    getList() {
-      this.listLoading = true
-      const params = {
-        pageNum: this.currentPage,
-        pageSize: this.pageSize,
-        k3CategoryNumber: this.screenForm.k3CategoryNumber,
-        endDate: this.screenForm.endDate,
-        materialName: this.screenForm.materialName,
-        materialNumber: this.screenForm.materialNumber,
-        materialOldNumber: this.screenForm.materialOldNumber,
-        saleTypeId: this.screenForm.saleTypeId,
-        specification: this.screenForm.specification,
-        startDate: this.screenForm.startDate,
-        remark: this.screenForm.remark,
-        billType: 'HOME'
-      }
-      getProductPriceList(params).then(res => {
-        this.dataList = res.data.records
-        console.log(res.data.records)
-        this.listTotal = res.data.total
-        this.listLoading = false
-      })
-      getTypeList({ ...params, pageNum: 1, pageSize: -1 }).then(res => {
-        this.ztypeList = res.data.records
-        // console.log(this.ztypeList, "type1111");
-      })
-    },
+    // getList() {
+    //   this.listLoading = true
+    //   const params = {
+    //     pageNum: this.currentPage,
+    //     pageSize: this.pageSize,
+    //     k3CategoryNumber: this.screenForm.k3CategoryNumber,
+    //     endDate: this.screenForm.endDate,
+    //     materialName: this.screenForm.materialName,
+    //     materialNumber: this.screenForm.materialNumber,
+    //     materialOldNumber: this.screenForm.materialOldNumber,
+    //     saleTypeId: this.screenForm.saleTypeId,
+    //     specification: this.screenForm.specification,
+    //     startDate: this.screenForm.startDate,
+    //     remark: this.screenForm.remark,
+    //     billType: 'HOME'
+    //   }
+    //   getProductPriceList(params).then(res => {
+    //     this.dataList = res.data.records
+    //     console.log(res.data.records)
+    //     this.listTotal = res.data.total
+    //     this.listLoading = false
+    //   })
+    //   getTypeList({ ...params, pageNum: 1, pageSize: -1 }).then(res => {
+    //     this.ztypeList = res.data.records
+    //     // console.log(this.ztypeList, "type1111");
+    //   })
+    // },
     handleRevoke(id) {
       handlePriceRevoke({ ids: id }).then(res => {
         this.$successMsg('操作成功')
-        this.getList()
+        // this.getList()
+        this.$refs.pageRef.refreshList()
       })
     },
     handleRevokeAll() {
-      handlePriceRevoke({ ids: this.ids.join('') }).then(res => {
+      handlePriceRevoke({
+        ids: this.recordSelected
+          .map(v => {
+            return v.id
+          })
+          .toString()
+      }).then(res => {
         this.$successMsg('操作成功')
-        this.getList()
+        // this.getList()
+        this.$refs.pageRef.refreshList()
       })
     },
     tableRowClassName({ row, rowIndex }) {