账单详情

src/router/index.js

@@ -41,6 +41,7 @@ const BatchRecall = resolve => require(['@/views/consignmentManagement/batchReca
 const ConsignmentContract = resolve => require(['@/views/consignmentManagement/consignmentContract.vue'], resolve);
 const InOutStockLog = resolve => require(['@/views/consignmentManagement/inOutStockLog.vue'], resolve);
 const ReconciledBill = resolve => require(['@/views/billManagement/reconciledBill.vue'], resolve);
+const ReconciledBillDetail = resolve => require(['@/views/billManagement/reconciledBillDetail.vue'], resolve);
 const AllPayableBills = resolve => require(['@/views/billManagement/allPayableBills.vue'], resolve);
 
 const routes = [
@@ -83,6 +84,7 @@ const routes = [
   {path: '/consignmentContract', name: 'consignmentContract', meta: {title: '寄售合同'}, component: ConsignmentContract},
   {path: '/inOutStockLog', name: 'inOutStockLog', meta: {title: '进出库日志'}, component: InOutStockLog},
   {path: '/reconciledBill', name: 'reconciledBill', meta: {title: '已对账账单'}, component: ReconciledBill},
+  {path: '/reconciledBillDetail', name: 'reconciledBillDetail', meta: {title: '账单详情'}, component: ReconciledBillDetail},
   {path: '/allPayableBills', name: 'allPayableBills', meta: {title: '全部应付单:'}, component: AllPayableBills},
   {path: '*', redirect: '/'}
 ]

src/views/billManagement/reconciledBill.vue

@@ -30,7 +30,7 @@
           <el-table-column type="index" label="序号" width="50" align="center" fixed></el-table-column>
           <el-table-column prop="bill_sn" label="账单号" width="120" :show-overflow-tooltip="true" align="center">
             <template slot-scope="scope">
-              <el-link type="primary" :underline="false" @click="$router.push({path: '/consignmentRecallDetail', query: {bill_id: scope.row.bill_id}})" style="font-size: 12px;">{{ scope.row.bill_sn }}</el-link>
+              <el-link type="primary" :underline="false" @click="$router.push({path: '/reconciledBillDetail', query: {bill_id: scope.row.bill_id}})" style="font-size: 12px;">{{ scope.row.bill_sn }}</el-link>
             </template>
           </el-table-column>
           <el-table-column prop="bill_name" label="账单名称" min-width="170" :show-overflow-tooltip="true" align="center"></el-table-column>

src/views/billManagement/reconciledBillDetail.vue

+<template>
+  <div class="pagex">
+    <div class="section-page">
+      <el-row v-if="detailData.recall_id" style="margin-bottom: 15px;">
+        <el-col :span="4">
+          <div style="font-weight: bold">{{ detailData.recall_sn }}（{{ detailData.recall_status_val }}）</div>
+        </el-col>
+        <el-col :span="4">
+          <div>订单人员：{{ detailData.order_uname }}</div>
+        </el-col>
+        <el-col :span="4">
+          <div>收货人：{{ detailData.supplier_address.contact }}</div>
+        </el-col>
+        <el-col :span="4">
+          <div>收货人电话：{{ detailData.supplier_address.mobile }}</div>
+        </el-col>
+        <el-col :span="10" style="margin-top: 5px">
+          <div>收货地址：{{ detailData.supplier_address.province }}{{ detailData.supplier_address.city }}{{ detailData.supplier_address.district }}{{ detailData.supplier_address.detail }}</div>
+        </el-col>
+      </el-row>
+      <!--列表区-->
+      <div class="data-box">
+        <el-table :data="list" border max-height="600" @selection-change="handleSelectionChange">
+          <el-table-column type="index" label="序号" width="50" align="center" fixed></el-table-column>
+          <el-table-column prop="order_no" label="应付单号" width="180" :show-overflow-tooltip="true" align="center"></el-table-column>
+          <el-table-column prop="goods_name" label="型号" width="200" :show-overflow-tooltip="true" align="center"></el-table-column>
+          <el-table-column prop="brand_name" label="品牌" :show-overflow-tooltip="true" align="center"></el-table-column>
+          <el-table-column prop="price_single" label="采购单价（含税）" width="160"  :show-overflow-tooltip="true" align="center"></el-table-column>
+          <el-table-column prop="quantity" label="数量" width="100" :show-overflow-tooltip="true" align="center"></el-table-column>
+          <el-table-column prop="currency_val" label="币种" width="80" :show-overflow-tooltip="true" align="center"></el-table-column>
+          <el-table-column prop="pay_amount" label="应付金额" width="100" :show-overflow-tooltip="true" align="center"></el-table-column>
+          <el-table-column prop="unpaid_amount" label="未付金额" width="100" :show-overflow-tooltip="true" align="center"></el-table-column>
+          <el-table-column prop="paid_amount" label="已付金额" width="100" :show-overflow-tooltip="true" align="center"></el-table-column>
+          <el-table-column prop="paying_amount" label="付款中金额" width="100" :show-overflow-tooltip="true" align="center"></el-table-column>
+          <el-table-column prop="type" label="类型" width="80" :show-overflow-tooltip="true" align="center"></el-table-column>
+          <el-table-column prop="status" label="状态" width="80" :show-overflow-tooltip="true" align="center"></el-table-column>
+          <el-table-column prop="create_time" label="应付单创建时间" width="160" :show-overflow-tooltip="true" align="center"></el-table-column>
+        </el-table>
+        <el-pagination layout="total, sizes, prev, pager, next, jumper" :page-sizes="[10, 20, 50, 100, 200]" :total="total" @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="page"></el-pagination>
+      </div>
+    </div>
+    <Menu></Menu>
+  </div>
+</template>
+<script>
+import Vue from 'vue';
+import Menu from "@/components/menu.vue";
+import {Autocomplete, Button, Col, DatePicker, Descriptions, DescriptionsItem, Dialog, Divider, Dropdown, DropdownItem, DropdownMenu, Form, FormItem, Input, Link, Message, MessageBox, Option, Pagination, Popover, Row, Select, Table, TableColumn, Tag, Tooltip} from 'element-ui'
+
+Vue.prototype.$message = Message
+Vue.prototype.$confirm = MessageBox.confirm;
+Vue.use(Button).use(Link).use(Form).use(Select).use(Option).use(Input).use(FormItem).use(Dialog).use(Tooltip).use(Autocomplete).use(Popover).use(Tag).use(Divider).use(Row).use(Col);
+Vue.use(DatePicker).use(Dropdown).use(DropdownMenu).use(DropdownItem).use(TableColumn).use(Table).use(Pagination).use(Descriptions).use(DescriptionsItem);
+export default {
+  name: "reconciledBillDetail",
+  data() {
+    return {
+      multipleSelection: [],
+      recall_id: '',
+      detailData: {},
+      total: 0,
+      page: 1,
+      limit: 10,
+      list: [],
+      formParam: {
+        status: '',
+        date: ''
+      }
+    };
+  },
+  created() {
+    this.bill_id = this.$route.query.bill_id;
+    this.getData()
+  },
+  methods: {
+    getData() {
+      this.$http('GET', "/api/bill/getVerifiedBillDetail", {bill_id: this.bill_id, page: this.page, limit: this.limit}).then(res => {
+        if (res.code === 0) {
+          this.detailData = res.data;
+          this.list = res.data.list;
+          this.total = res.data.total || 0;
+        } else {
+          this.$message.error(res.msg);
+        }
+      })
+    },
+    /**
+     * 型号监听
+     * @param queryString
+     * @param cb
+     */
+    querySearchAsync(queryString, cb) {
+      if (!queryString) {
+        cb([]);
+        return;
+      }
+      this.$http('GET', "/api/search/getspu", {spu_name: queryString}).then(res => {
+        if (res.code == 0 && res.data.list?.length) {
+          const arr = res.data.list.map(item => ({
+            value: item.spu_name
+          }));
+          cb(arr);
+        } else {
+          cb([]);
+        }
+      }).catch(() => {
+        cb([]);
+      });
+    },
+    /**
+     * 搜索
+     */
+    onSubmit() {
+      this.page = 1;
+      this.getData();
+    },
+    /**
+     * 重置表单
+     * @param formName
+     */
+    resetForm(formName) {
+      this.formParam.date = '';
+      this.$refs[formName].resetFields();
+    },
+    /**
+     * 列表分页条数筛选监听
+     * @param val
+     */
+    handleSizeChange(val) {
+      this.limit = val;
+      this.getData();
+    },
+    /**
+     * 列表分页输入页码监听
+     * @param val
+     */
+    handleCurrentChange(val) {
+      this.page = val;
+      this.getData();
+    },
+    /**
+     * chebox 选择监听
+     * @param val
+     */
+    handleSelectionChange(val) {
+      this.multipleSelection = val;
+    }
+  },
+  components: {
+    Menu
+  }
+};
+</script>
+<style scoped>
+
+</style>
\ No newline at end of file