From 202192066471bf4657e92d7f650e493934afe5fe Mon Sep 17 00:00:00 2001
From: hr121 <568127468@qq.com>
Date: Fri, 27 Sep 2024 15:15:04 +0800
Subject: [PATCH] =?UTF-8?q?=E6=96=B0=E5=A2=9E=E4=BB=98=E6=AC=BE=E5=8D=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/purchaseManagement/billList.vue | 432 ++++++++++++++++++++++
 1 file changed, 432 insertions(+)
 create mode 100644 src/views/purchaseManagement/billList.vue

diff --git a/src/views/purchaseManagement/billList.vue b/src/views/purchaseManagement/billList.vue
new file mode 100644
index 0000000..8921193
--- /dev/null
+++ b/src/views/purchaseManagement/billList.vue
@@ -0,0 +1,432 @@
+<template>
+  <div class="app-container">
+    <!-- 搜索 -->
+    <div class="filter-container">
+      <el-form :inline="true" :model="searchForm">
+        <el-form-item label="订单编号" >
+          <el-input v-model="searchForm.order_num" placeholder="请输入订单编号" />
+        </el-form-item>
+        <el-form-item label="结算单位" >
+          <el-input v-model="searchForm.driver_account" placeholder="请输入结算单位" />
+        </el-form-item>
+        <el-form-item label="经办人" >
+          <el-input v-model="searchForm.driver_name" placeholder="请输入经办人" />
+        </el-form-item>
+        <el-form-item label="部门" >
+          <el-input v-model="searchForm.driver_name" placeholder="请输入部门" />
+        </el-form-item>
+        <template>
+          <div style="display:inline-block;">
+            <span class="g66 f700 font-14">付款日期</span>
+              <el-date-picker
+                v-model="searchForm.start_time"
+                :picker-options="pickerOptionsStart"
+                type="datetime"
+                placeholder="请选择开始时间"
+                value-format="yyyy-MM-dd HH:mm:ss"
+                @change="changeEnd"/>
+              <!-- <span>~</span>
+              <el-date-picker
+                v-model="searchForm.end_time"
+                :picker-options="pickerOptionsEnd"
+                type="datetime"
+                placeholder="请选择结束时间"
+                value-format="yyyy-MM-dd HH:mm:ss"
+                @change="changeStart"/> -->
+          </div>
+        </template>
+        <el-form-item label="供应商名称" >
+          <el-input v-model="searchForm.supplier_name" placeholder="请输入供应商名称" />
+        </el-form-item>
+        <el-form-item label="工地名称" >
+          <el-input v-model="searchForm.site_name" placeholder="请输入工地名称" />
+        </el-form-item>
+        <el-form-item label="订单状态" >
+          <el-select v-model="searchForm.order_status" placeholder="请选择" @change="changeStatus" clearable>
+            <el-option label="待完善" value="status-00" ></el-option>
+            <el-option label="已完善" value="status-01" ></el-option>
+          </el-select>
+        </el-form-item>
+        <el-form-item>
+          <el-button type="primary" icon="el-icon-search" @click="fetchData">搜索</el-button>
+          <router-link to="/distributionManagement/disCreate"><el-button class="ml-10" type="primary" icon="el-icon-edit">新增</el-button></router-link>
+          <el-button class="ml-10" type="primary" icon="el-icon-download" @click="handleDownload">导出</el-button>
+        </el-form-item>
+      </el-form>
+    </div>
+    <!-- 表格 -->
+    <el-table v-loading="listLoading" :data="firmList" border fit  highlight-current-row style="width: 100%;">
+      <el-table-column label="ID" prop="delivery_id" align="center" width="80"></el-table-column>
+      <el-table-column label="订单编号" prop="order_num" align="center"></el-table-column>
+      <el-table-column label="单据编号" prop="delivery_no" align="center"></el-table-column>
+      <!-- <el-table-column label="配送司机" prop="driver_name" align="center"></el-table-column> -->
+      <el-table-column label="车辆号码" prop="driver_account" align="center"></el-table-column>
+      <el-table-column label="联系电话" prop="driver_phone" align="center"></el-table-column>
+      <el-table-column label="供应商名称" prop="supplier_name" align="center"></el-table-column>
+      <el-table-column label="中转站名称" prop="transit_name" align="center"></el-table-column>
+      <el-table-column label="工地名称" prop="site_name" align="center"></el-table-column>
+      <el-table-column label="配送时间" prop="create_time" align="center"></el-table-column>
+      <el-table-column label="订单状态" prop="order_status" align="center">
+        <template slot-scope="scope">
+          <el-tag v-if="scope.row.order_status=='status-00'" type="danger">待完善</el-tag>
+          <el-tag v-else-if="scope.row.order_status=='status-01'">已完善</el-tag>
+        </template>
+      </el-table-column>
+      <el-table-column label="操作" align="center" width="220">
+        <template slot-scope="scope">
+          <el-button class="ml-10" type="primary" size="mini" @click="handleDetail(scope.row.delivery_id)">配送详情</el-button>
+          <el-button class="ml-10" size="mini" :type="scope.row.order_status=='status-01'?'danger':'primary'"
+            @click="handleEntry(scope.row.delivery_id)"> {{scope.row.order_status=='status-01'?' 修改信息 ':'录入信息' }}</el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+    <!-- 翻页 -->
+    <pagination v-show="total>0"
+      :total="total"
+      :page.sync="searchForm.page"
+      :page_len.sync="searchForm.page_len"
+      @pagination="fetchData" />
+    <!-- 详情弹窗 -->
+    <el-dialog title="订单详情" :visible.sync="dialogDetail" center width="1000px" style="margin-top:-60px;" @close="closeDialog2">
+      <div class="flex">
+        <el-form :model="detailDelivery" label-width="120px" >
+          <el-form-item label="订单编号：">{{detailDelivery.order_num}}</el-form-item>
+          <!-- <el-form-item label="配送司机：">{{detailDelivery.driver_name}}</el-form-item> -->
+          <el-form-item label="单据编号：">{{detailDelivery.delivery_no}}</el-form-item>
+          <el-form-item label="车辆号码：">{{detailDelivery.driver_account}}</el-form-item>
+          <el-form-item label="司机电话：">{{detailDelivery.driver_phone}}</el-form-item>
+          <el-form-item label="配送时间：">{{detailDelivery.create_time}}</el-form-item>
+          <el-form-item label="配送产品：">{{getProductType(detailDelivery.product_type)}}</el-form-item>
+          <el-form-item label="品种编号：">{{detailDelivery.variety_num}}</el-form-item>
+        </el-form>
+        <el-form :model="detailDelivery" label-width="230px" >
+          <el-form-item label="出厂数量(吨)：">{{detailDelivery.order_ton}}</el-form-item>
+          <el-form-item label="实收数量(吨)：">{{detailDelivery.over_ton}}</el-form-item>
+          <el-form-item label="成本单价：">{{detailDelivery.base_fee}}</el-form-item>
+          <el-form-item label="成本总价：">{{detailDelivery.base_sum}}</el-form-item>
+          <el-form-item label="销售价：">{{detailDelivery.sale_fee}}</el-form-item>
+          <el-form-item label="销售总价：">{{detailDelivery.sale_sum}}</el-form-item>
+        </el-form>
+        <el-form :model="detailDelivery" label-width="230px" >
+          <el-form-item label="运费：">{{detailDelivery.post_fee}}</el-form-item>
+          <el-form-item label="返点金额：">{{detailDelivery.return_fee}}</el-form-item>
+          <el-form-item label="供应商名称：">{{detailDelivery.supplier_name}}</el-form-item>
+          <!-- <el-form-item label="供应商联系人：">{{detailDelivery.supplier_man}}</el-form-item>
+          <el-form-item label="供应商电话：">{{detailDelivery.supplier_phone}}</el-form-item>
+          <el-form-item label="供应商地址：">{{detailDelivery.supplier_address}}</el-form-item> -->
+          <el-form-item label="工地名称：">{{detailDelivery.site_name}}</el-form-item>
+          <el-form-item label="工地负责人：">{{detailDelivery.site_man}}</el-form-item>
+          <el-form-item label="工地地址：">{{detailDelivery.site_address}}</el-form-item>
+          <el-form-item label="负责人电话：">{{detailDelivery.man_phone}}</el-form-item>
+        </el-form>
+      </div>
+      <el-form class="ml-30" :model="detailDelivery" label-width="120px" >
+        <el-form-item label="其他回执：">
+          <div class="flex flex-wrap" style="width:700px">
+            <div v-for="(item, index) in detailDelivery.order_receipt"
+              :key="index" :data-img="detailDelivery.order_receipt"
+              @click="showImg($event,index)">
+              <img class="poi flex ml-10 mt-10" style="width:100px;" :src="baseUrl+item"/>
+            </div>
+          </div>
+        </el-form-item>
+      </el-form>
+    </el-dialog>
+    <!-- 录入信息弹窗 -->
+    <el-dialog title="录入信息" :visible.sync="dialogEntry" center width="1000px" @close="closeDialog">
+      <el-form :model="entryInfo" label-width="100px" :rules="formRules" ref="postForm" >
+        <div class="flex">
+          <span class="ml-40 g66 f700">配送产品：</span>
+          <div class="box">
+            <div>
+              <el-col class="line-r line-b tac" :span="3">类型</el-col>
+              <el-col class="line-r line-b tac" :span="3">品种</el-col>
+              <el-col class="line-r line-b tac" :span="3">出厂数量(吨)</el-col>
+              <el-col class="line-r line-b tac" :span="3">实收数量</el-col>
+              <el-col class="line-r line-b tac" :span="3">成本单价</el-col>
+              <el-col class="line-r line-b tac" :span="3">成本总价</el-col>
+              <el-col class="line-r line-b tac" :span="3">销售价</el-col>
+              <el-col class="line-b tac" :span="3">销售总价</el-col>
+            </div>
+            <div>
+              <el-col class="line-r line-b tac" :span="3">{{getProductType(entryInfo.product_type)}}</el-col>
+              <el-col class="line-r line-b tac" :span="3">{{entryInfo.variety_num}}</el-col>
+              <el-col class="line-r line-b tac" :span="3">
+                <!-- {{entryInfo.order_ton}} -->
+                <el-input v-model="entryInfo.order_ton" @change="changNum(3)"/>
+              </el-col>
+              <el-col class="line-r line-b tac" :span="3">
+                <el-input v-model="entryInfo.over_ton" @change="changNum(0)"/>
+              </el-col>
+              <el-col class="line-r line-b tac" :span="3">
+                <el-input v-model="entryInfo.base_fee" @change="changNum(1)"/>
+              </el-col>
+              <el-col class="line-r line-b tac" :span="3">{{entryInfo.base_sum}}</el-col>
+              <el-col class="line-r line-b tac" :span="3">
+                <el-input v-model="entryInfo.sale_fee" @change="changNum(2)"/>
+              </el-col>
+              <el-col class="line-b tac" :span="3">{{entryInfo.sale_sum}}</el-col>
+            </div>
+          </div>
+        </div>
+        <!-- <el-form-item label="运费：">
+          <el-col :span="6">
+            <el-input v-model.number="entryInfo.post_fee" placeholder="请输入运费"/>
+          </el-col>
+        </el-form-item> -->
+        <el-form-item label="返点金额：" prop="return_fee">
+          <el-col :span="6">
+            <el-input v-model.number="entryInfo.return_fee" placeholder="请输入返点金额"/>
+          </el-col>
+        </el-form-item>
+        <el-form-item align="center">
+          <el-button type="primary" @click="submitForm">保存</el-button>
+        </el-form-item>
+      </el-form>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+import { checkRqInput, checkNum, checkNum0 } from '@/utils/validate'
+import { listDelivery, detailDelivery, saveDelivery, exportDelivery } from '@/api/order/index'
+import imgDialog from '../../components/imgPreview/ImgPreview'
+import { baseUrl } from '@/utils/env.js'
+
+export default {
+  components: {
+    imgDialog
+  },
+  data() {
+    return {
+      firmList: [],  // 列表
+      total: 0,  // 总页数
+      listLoading: true,
+      // 搜索相关数据
+      searchForm: {
+        page: 1,
+        page_len: 10,
+        order_status:'',
+        start_time:'',end_time:''
+      },
+      dialogDetail: false, // 订单详情弹窗
+      detailDelivery: {}, // 订单详情
+      dialogEntry: false, // 录入信息弹窗
+      entryInfo: {
+        base_sum: '',
+        sale_sum: '',
+        // post_fee: '',
+        return_fee: '',
+      }, // 录入信息
+      // 校验规则
+      formRules: {
+        // post_fee: [ checkNum ],
+        return_fee: [ checkRqInput, checkNum ]
+      },
+      // 限制开始时间
+      pickerOptionsStart: {},
+      pickerOptionsEnd: {},
+      baseUrl,
+    }
+  },
+  created() {
+    this.fetchData()
+  },
+  methods: {
+    // 获取企业列表
+    fetchData(obj={}) {
+      if(obj.page) {
+        this.searchForm.page = obj.page
+        this.searchForm.page_len = obj.page_len
+      }
+      this.searchForm.order_status = this.$route.query.order_status?this.$route.query.order_status:this.searchForm.order_status;
+      this.listLoading = true
+      this.$http(listDelivery(this.searchForm), (res) => {
+        this.firmList = res.data.result
+        this.total = res.data.data_sum
+        this.listLoading = false
+      })
+    },
+    // 改变订单状态
+    changeStatus() {
+      this.$route.query.order_status = ''
+    },
+    // 配送详情
+    handleDetail(id) {
+      this.$http(detailDelivery(id), (res) => {
+        this.detailDelivery = res.data
+        this.dialogDetail = true
+      })
+    },
+    // 录入信息
+    handleEntry(id) {
+      this.$http(detailDelivery(id), (res) => {
+        let data = res.data
+        this.entryInfo.delivery_id = id
+        this.entryInfo.product_type = data.product_type
+        this.entryInfo.variety_num = data.variety_num
+        this.entryInfo.order_ton = data.order_ton
+        this.entryInfo.over_ton = data.over_ton
+        this.entryInfo.base_fee = data.base_fee
+        this.entryInfo.base_sum = data.base_sum
+        this.entryInfo.sale_fee = data.sale_fee
+        this.entryInfo.sale_sum = data.sale_sum
+        // this.entryInfo.post_fee = data.post_fee
+        this.entryInfo.return_fee = data.return_fee
+        this.dialogEntry = true
+      })
+    },
+    // 展示图片列表
+    showImg(e,msg){
+      this.detailDelivery.order_receipt.forEach( (item,index) => {
+        if (index == msg) {
+          this.curIdx = index
+        }
+      })
+      this.$imgPreview(e,this.curIdx)
+    },
+    // 配送产品
+    getProductType(value) {
+      return value=="type-00"?"散装":(value=="type-01"?"袋装":"")
+    },
+    checkNum(value) {
+      let reg = /[^\d\.]/g;
+      if (isNaN(value)||new RegExp(reg).test(value)) {
+        this.$message({
+          message: '请输入非负数值！！！',
+          type: 'warning'
+        })
+        return false
+      }
+      return true
+    },
+    // 改变数值
+    changNum(index) {
+      let flag = false
+      if (index==0) {
+        this.checkNum(this.entryInfo.over_ton) ? '' : flag=true
+      } else if (index==1) {
+        this.checkNum(this.entryInfo.base_fee) ? '' : flag=true
+      } else if (index==2) {
+        this.checkNum(this.entryInfo.sale_fee) ? '' : flag=true
+      } else if(index==3) {
+        this.checkNum(this.entryInfo.order_ton) ? '' : flag=true
+      }
+      if (flag) {
+        return ''
+      }
+      this.entryInfo.base_sum = (this.entryInfo.base_fee * this.entryInfo.over_ton).toFixed(2)
+      this.entryInfo.sale_sum = (this.entryInfo.sale_fee * this.entryInfo.over_ton).toFixed(2)
+    },
+    // 保存录入信息
+    submitForm() {
+      if (!this.checkNum(this.entryInfo.over_ton)||!this.checkNum(this.entryInfo.base_fee)||!this.checkNum(this.entryInfo.sale_fee)) {
+        this.$message({
+          message: '请输入非负数值！！！',
+          type: 'warning'
+        })
+        return ""
+      }
+      // if (this.entryInfo.post_fee<0) {
+      //   this.$message({
+      //     message: '运费必须大于等于0',
+      //     type: 'warning'
+      //   })
+      //   return ""
+      // }
+      this.$refs['postForm'].validate((valid) => {
+        if (valid) {
+          this.$http(saveDelivery(this.entryInfo), res => {
+            this.$message({
+              message: '成功',
+              type: 'success'
+            })
+            this.fetchData()
+            this.dialogEntry = false
+          })
+        } else {
+          return false
+        }
+      })
+    },
+    // 导出
+    handleDownload() {
+      this.$http(exportDelivery(this.searchForm), (res) => {
+        window.location.href = this.baseUrl + res.data.url
+      })
+    },
+    // 结束时间限制开始时间
+    changeStart() {
+      let self = this
+      if (!this.searchForm.end_time) {
+        this.pickerOptionsStart = {
+          disabledDate: {}
+        }
+        return
+      }
+      this.pickerOptionsStart = Object.assign({}, self.pickerOptionsStart, {
+        disabledDate(time) {
+          return time.getTime() > new Date(self.searchForm.end_time).getTime()
+        }
+      })
+    },
+    // 开始时间控制结束时间
+    changeEnd() {
+      let self = this
+      if (!this.searchForm.start_time) {
+        this.pickerOptionsEnd = {
+          disabledDate: {}
+        }
+        return
+      }
+      this.pickerOptionsEnd = Object.assign({}, self.pickerOptionsEnd, {
+        disabledDate(time) {
+          return time.getTime() < new Date(self.searchForm.start_time).getTime()
+        }
+      })
+    },
+    // 关闭弹窗
+    closeDialog() {
+      this.$refs['postForm'].resetFields();
+    },
+    // 关闭弹窗
+    closeDialog2() {
+      this.detailDelivery = {}
+    },
+  }
+}
+</script>
+
+<style lang='scss' scoped>
+  .img {
+    width: 40px;
+    height: 40px;
+    border-radius: 50%;
+  }
+  .line-r {
+    border-right: 1px solid #ccc;
+  }
+  .box {
+    width: 800px;
+    border-top: 1px solid #ccc;
+    border-right: 1px solid #ccc;
+    border-left: 1px solid #ccc;
+    margin-bottom: 30px;
+    .line-r {
+      border-right: 1px solid #ccc;
+    }
+    .line-b {
+      height: 44px;
+      line-height: 44px;
+      border-bottom: 1px solid #ccc;
+    }
+    .flex-clome {
+      display: flex;
+      flex-direction: column;
+    }
+    .flex-row {
+      display: flex;
+      justify-content: flex-start;
+    }
+  }
+</style>