创建审单列表页面

src/views/Pricesystem/Price/PriceBill.vue

@@ -187,12 +187,15 @@
             />
           </el-form-item>
 
-          <el-form-item label="加算价格" prop="additionalCost">
+          <el-form-item
+            label="加算价格"
+            prop="additionalCost"
+            v-if="details.form.pickupMinCostType !== 1"
+          >
             <el-input-number
               v-model="details.form.additionalCost"
               style="width: 13vw"
               :controls="false"
-              :precision="2"
               :value-on-clear="0"
               :min="0"
             />
@@ -509,7 +512,6 @@
             v-model="details.form.additionalCost"
             style="width: 13vw"
             :controls="false"
-            :precision="2"
             :value-on-clear="0"
             :min="0"
           />

src/views/Pricesystem/Price/PriceTrunkLine.vue

@@ -177,8 +177,9 @@
         <el-form label-width="130px" :model="details.form" inline>
           <el-form-item
             :label="
-              details.minCostType.find(val => val.value === Number(details.form.pickupMinCostType))
+              details.minCostType.find(
-                .label
+                val => val.value === Number(details.form.trunkLineMinCostType)
+              ).label
             "
             prop="minCost"
           >
@@ -195,13 +196,12 @@
           <el-form-item
             label="加算价格"
             prop="additionalCost"
-            v-if="Number(details.form.pickupMinCostType) !== 1"
+            v-if="Number(details.form.trunkLineMinCostType) !== 1"
           >
             <el-input-number
               v-model="details.form.additionalCost"
               style="width: 13vw"
               :controls="false"
-              :precision="2"
               :value-on-clear="0"
               :min="0"
             />
@@ -499,7 +499,7 @@
       <el-form label-width="130px" :model="details.form" inline>
         <el-form-item
           :label="
-            details.minCostType.find(val => val.value === Number(details.form.pickupMinCostType))
+            details.minCostType.find(val => val.value === Number(details.form.trunkLineMinCostType))
               .label
           "
           prop="minCost"
@@ -517,13 +517,12 @@
         <el-form-item
           label="加算价格"
           prop="additionalCost"
-          v-if="Number(details.form.pickupMinCostType) !== 1"
+          v-if="Number(details.form.trunkLineMinCostType) !== 1"
         >
           <el-input-number
             v-model="details.form.additionalCost"
             style="width: 13vw"
             :controls="false"
-            :precision="2"
             :value-on-clear="0"
             :min="0"
           />

src/views/finance/CustomerSettlement.vue

@@ -0,0 +1,325 @@
+<template>
+  <basic-container v-loading="details.loadingObj.pageLoading">
+    <div class="avue-crud">
+      <!-- 搜索模块 -->
+      <div v-h5uShow="!search">
+        <!-- 查询模块 -->
+        <el-form :inline="true" :model="query" class="header_search">
+          <el-form-item label="交期:" class="el-times">
+            <el-date-picker
+              v-model="stockupDate"
+              type="daterange"
+              unlink-panels
+              range-separator="至"
+              start-placeholder="开始时间"
+              end-placeholder="结束时间"
+              :shortcuts="shortcuts"
+              value-format="YYYY-MM-DD"
+              clearable
+            />
+          </el-form-item>
+
+          <el-form-item label="创建时间:" class="el-times">
+            <el-date-picker
+              v-model="stockupDate"
+              type="daterange"
+              unlink-panels
+              range-separator="至"
+              start-placeholder="开始时间"
+              end-placeholder="结束时间"
+              :shortcuts="shortcuts"
+              value-format="YYYY-MM-DD"
+              clearable
+            />
+          </el-form-item>
+          <!-- 查询按钮 -->
+          <el-form-item>
+            <el-button type="primary" icon="el-icon-search" @click="searchChange">搜 索</el-button>
+            <el-button icon="el-icon-delete" @click="searchReset">清 空</el-button>
+          </el-form-item>
+        </el-form>
+      </div>
+
+      <div class="avue-crud__header">
+        <!-- 头部左侧按钮模块 -->
+        <div class="avue-crud__left">
+          <!-- <el-button type="primary" icon="Edit" @click="editClientInfo">修改客户信息</el-button>
+          <el-button type="primary" icon="Delete" @click="handleDelete">删除</el-button>
+          <el-button type="primary" icon="Refresh" @click="handleRefresh">恢复</el-button> -->
+        </div>
+        <!-- 头部右侧按钮模块 -->
+        <div class="avue-crud__right">
+          <el-button icon="el-icon-refresh" @click="searchChange" circle></el-button>
+          <el-button icon="Operation" @click="showdrawer(true)" circle></el-button>
+          <el-button icon="Search" @click="searchHide" circle></el-button>
+        </div>
+      </div>
+      <!-- 表格 -->
+      <!-- 列表模块 -->
+      <tablecmt
+        ref="tableNodeRef"
+        :columnList="details.columnList"
+        :tableData="details.data"
+        :loading="details.loadingObj.list"
+        @inputTxt="inputsc"
+        @timeCheck="timesc"
+        @selectCheck="selectsc"
+        @selection="selectionChange"
+      >
+        <template #default="slotProps">
+          <template v-if="slotProps.scope.column.label === '操作'">
+            <!-- <el-text @click="handleShowPackageOrderList(slotProps.scope)"> 包明细 </el-text> -->
+          </template>
+        </template>
+      </tablecmt>
+
+      <!-- 分页模块 -->
+      <div class="avue-crud__pagination flex-c-sb" style="width: 100%">
+        <div style="font-size: 14px">勾选数量: {{ selectionList.length }}</div>
+        <!-- 分页模块 -->
+        <el-pagination
+          align="right"
+          background
+          @size-change="sizeChange"
+          @current-change="currentChange"
+          :current-page="page.currentPage"
+          :page-sizes="[30, 50, 80, 120]"
+          :page-size="page.pageSize"
+          layout="total, sizes, prev, pager, next, jumper"
+          :total="page.total"
+        >
+        </el-pagination>
+      </div>
+    </div>
+  </basic-container>
+
+  <!-- 列表配置显示 -->
+  <edittablehead
+    @closce="showdrawer"
+    :drawerShow="drawerShow"
+    v-model="details.columnList"
+  ></edittablehead>
+</template>
+
+<script setup lang="ts">
+import { ref, reactive, toRefs, computed, onMounted, nextTick } from 'vue';
+import functions from '@/utils/functions.js';
+import dayjs from 'dayjs';
+import { mapGetters } from 'vuex';
+/** 获取字典 */
+import { getDictionaryBiz } from '@/api/system/dict';
+import {
+  getopenOrderAdvancePageList,
+  postOpenOrderFreezeByAdvanceIds,
+} from '@/api/waybill/TemporaryStorageList';
+import {
+  downloadXls,
+  setNodeHeight,
+  getHtmls,
+  handleClearTableQuery,
+  handleInputQuery,
+  handleSelectQuery,
+} from '@/utils/util';
+import { columnList, packageListColumnList } from '@/option/waybill/FreezeOrder';
+import { useRouter } from 'vue-router';
+import { deepClone } from '@/utils/util';
+import { ElMessage, ElMessageBox } from 'element-plus';
+
+// 获取路由实例
+const $router = useRouter();
+
+const details = reactive<any>({
+  /** 是否开启搜索 */
+  search: true,
+  /** 表格搜索条件 */
+  query: {},
+  /** 时间快捷选择设置 */
+  shortcuts: [
+    {
+      text: '最近一周',
+      value: () => {
+        const end = new Date();
+        const start = new Date();
+        start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
+        return [start, end];
+      },
+    },
+    {
+      text: '最近一个月',
+      value: () => {
+        const end = new Date();
+        const start = new Date();
+        start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
+        return [start, end];
+      },
+    },
+    {
+      text: '最近三个月',
+      value: () => {
+        const end = new Date();
+        const start = new Date();
+        start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
+        return [start, end];
+      },
+    },
+  ],
+  /** 时间选择器数据 */
+  stockupDate: [],
+  /** 列表 */
+  columnList: deepClone(columnList),
+  /** 列表数据 */
+  haveDataData: [],
+  notHaveDataData: [],
+  /** 包明细表头 */
+  packageListColumnList: deepClone(packageListColumnList),
+  /** 包明细数据 */
+  packageListData: [],
+  /** 页面loading */
+  loadingObj: {
+    /** 列表加载loading */
+    list: false,
+    pageLoading: false,
+  },
+  /** 列表复选框选中的数据 */
+  selectionList: [],
+  /** 是否显示设置表格 */
+  drawerShow: false,
+  /** 分页参数 */
+  page: {
+    currentPage: 1,
+    pageSize: 30,
+    total: 0,
+  },
+  /** 列表Dom节点 */
+  listNode: '',
+  form: {},
+});
+
+const tableNodeRef = ref();
+
+const { search, query, shortcuts, stockupDate, selectionList, drawerShow, page } = toRefs(details);
+
+/** vuex */
+const permission = computed(() => mapGetters(['permission', 'tagWel', 'tagList']));
+console.log('permission :>> ', permission);
+
+onMounted(() => {
+  const timer = setTimeout(() => {
+    details.listNode = document.querySelector('.maboxhi');
+    details.listNode.style.transition = 'all .5s ease-out';
+    clearTimeout(timer);
+  }, 100);
+});
+
+/** 请求页面数据 */
+const onLoad = async (params = {}) => {
+  try {
+    // 开启列表loading动画
+    details.loadingObj.list = true;
+    console.log('status :>> ', status);
+
+    // 获取暂存单列表
+    const res = await getopenOrderAdvancePageList(details.page, { ...details.query, ...params });
+    console.log('res :>> ', res);
+    const { code, data } = res.data;
+    if (code !== 200) return;
+    if (status === 'haveData') details.haveDataData = data.records;
+    else details.notHaveDataData = data.records;
+    details.page.total = data.total;
+
+    return res.data;
+  } catch (error) {
+    console.log('error :>> ', error);
+  } finally {
+    details.loadingObj.list = false;
+  }
+};
+
+const initOnLoad = (params = {}) => {
+  details.page.pageNum = 1;
+  details.page.total = 0;
+  onLoad(params);
+};
+
+initOnLoad();
+
+/** 搜索 */
+const searchChange = () => {
+  initOnLoad();
+};
+
+/** 清空表单 */
+const searchReset = () => {
+  details.query = {};
+  details.stockupDate = [];
+  details.page.currentPage = 1;
+  handleClearTableQuery(details.columnList);
+  initOnLoad();
+};
+
+/** 展开列表控件 */
+const showdrawer = (_flag?: boolean) => {
+  details.drawerShow = _flag;
+};
+
+/** 是否开启搜索区 */
+const searchHide = () => {
+  details.search = !details.search;
+
+  setNodeHeight(tableNodeRef.value.$el, '', true);
+};
+
+/** 表格表头输入框搜索 */
+const inputsc = (index, col) => {
+  handleInputQuery(index, col, details.query);
+  initOnLoad();
+};
+
+/** 表格表头时间选择 */
+const timesc = (index, row) => {
+  console.log(index, row);
+  if (!!index) {
+    index = dayjs(index).format('YYYY-MM-DD');
+  }
+  details.query[row.prop] = index;
+  if (!index) {
+    delete details.query[row.prop];
+  }
+  initOnLoad();
+};
+
+/** 表格表头下拉框选择 */
+const selectsc = (index, colors) => {
+  handleSelectQuery(index, colors, details.query);
+  initOnLoad();
+};
+
+/** 表格表头复选框选择 */
+const selectionChange = (list: any) => {
+  details.selectionList = list;
+};
+
+/** 每页数量改变执行的回调 */
+const sizeChange = (pageSize: number) => {
+  details.page.pageSize = pageSize;
+  initOnLoad();
+};
+
+/** 页码改变执行的回调 */
+const currentChange = pageNum => {
+  details.page.pageNum = pageNum;
+  onLoad();
+};
+</script>
+
+<style scoped lang="scss">
+// 日期选择器
+:deep(.el-date-editor.el-input) {
+  height: 100% !important;
+  width: 100% !important;
+}
+
+:deep(.el-range-editor.el-input__wrapper) {
+  height: 100% !important;
+}
+</style>

src/views/finance/WaybillAudit.vue

@@ -0,0 +1,372 @@
+<template>
+  <basic-container v-loading="details.loadingObj.pageLoading">
+    <div class="avue-crud">
+      <!-- 搜索模块 -->
+      <div v-h5uShow="!search">
+        <!-- 查询模块 -->
+        <el-form :inline="true" :model="query" class="header_search">
+          <el-form-item label="交期:" class="el-times">
+            <el-date-picker
+              v-model="stockupDate"
+              type="daterange"
+              unlink-panels
+              range-separator="至"
+              start-placeholder="开始时间"
+              end-placeholder="结束时间"
+              :shortcuts="shortcuts"
+              value-format="YYYY-MM-DD"
+              clearable
+            />
+          </el-form-item>
+
+          <el-form-item label="创建时间:" class="el-times">
+            <el-date-picker
+              v-model="stockupDate"
+              type="daterange"
+              unlink-panels
+              range-separator="至"
+              start-placeholder="开始时间"
+              end-placeholder="结束时间"
+              :shortcuts="shortcuts"
+              value-format="YYYY-MM-DD"
+              clearable
+            />
+          </el-form-item>
+          <!-- 查询按钮 -->
+          <el-form-item>
+            <el-button type="primary" icon="el-icon-search" @click="searchChange">搜 索</el-button>
+            <el-button icon="el-icon-delete" @click="searchReset">清 空</el-button>
+          </el-form-item>
+        </el-form>
+      </div>
+
+      <div class="avue-crud__header">
+        <!-- 头部左侧按钮模块 -->
+        <div class="avue-crud__left">
+          <!-- 审核 -->
+          <el-button type="primary" icon="Stamp" @click="handleAudit">审 核</el-button>
+          <!-- 取消审核 -->
+          <el-button type="primary" icon="CircleClose" @click="handleCloseAudit">
+            取消审核
+          </el-button>
+          <!-- 作废 -->
+          <el-button type="primary" icon="WarningFilled" @click="handleCancellation"
+            >作 废</el-button
+          >
+          <!-- 导出 -->
+          <el-button type="primary" icon="Download" @click="handleExport">导 出</el-button>
+        </div>
+        <!-- 头部右侧按钮模块 -->
+        <div class="avue-crud__right">
+          <el-button icon="el-icon-refresh" @click="searchChange" circle></el-button>
+          <el-button icon="Operation" @click="showdrawer(true)" circle></el-button>
+          <el-button icon="Search" @click="searchHide" circle></el-button>
+        </div>
+      </div>
+
+      <!-- 表格 -->
+      <tablecmt
+        ref="tableNodeRef"
+        :columnList="details.columnList"
+        :tableData="details.data"
+        :loading="details.loadingObj.list"
+        @inputTxt="inputsc"
+        @timeCheck="timesc"
+        @selectCheck="selectsc"
+        @selection="selectionChange"
+      >
+        <template #default="slotProps">
+          <template v-if="slotProps.scope.column.label === '操作'">
+            <!-- <el-text @click="handleShowPackageOrderList(slotProps.scope)"> 包明细 </el-text> -->
+          </template>
+        </template>
+      </tablecmt>
+
+      <!-- 分页模块 -->
+      <div class="avue-crud__pagination flex-c-sb" style="width: 100%">
+        <div style="font-size: 14px">勾选数量: {{ selectionList.length }}</div>
+        <!-- 分页模块 -->
+        <el-pagination
+          align="right"
+          background
+          @size-change="sizeChange"
+          @current-change="currentChange"
+          :current-page="page.currentPage"
+          :page-sizes="[30, 50, 80, 120]"
+          :page-size="page.pageSize"
+          layout="total, sizes, prev, pager, next, jumper"
+          :total="page.total"
+        >
+        </el-pagination>
+      </div>
+    </div>
+  </basic-container>
+
+  <!-- 列表配置显示 -->
+  <edittablehead
+    @closce="showdrawer"
+    :drawerShow="drawerShow"
+    v-model="details.columnList"
+  ></edittablehead>
+</template>
+
+<script setup lang="ts">
+import { ref, reactive, toRefs, computed, onMounted, nextTick } from 'vue';
+import functions from '@/utils/functions.js';
+import dayjs from 'dayjs';
+import { mapGetters } from 'vuex';
+/** 获取字典 */
+import { getDictionaryBiz } from '@/api/system/dict';
+import {
+  getopenOrderAdvancePageList,
+  postOpenOrderFreezeByAdvanceIds,
+} from '@/api/waybill/TemporaryStorageList';
+import {
+  downloadXls,
+  setNodeHeight,
+  getHtmls,
+  handleClearTableQuery,
+  handleInputQuery,
+  handleSelectQuery,
+} from '@/utils/util';
+import { columnList, packageListColumnList } from '@/option/waybill/FreezeOrder';
+import { useRouter } from 'vue-router';
+import { deepClone } from '@/utils/util';
+import { ElMessage, ElMessageBox } from 'element-plus';
+
+// 获取路由实例
+const $router = useRouter();
+
+const details = reactive<any>({
+  /** 是否开启搜索 */
+  search: true,
+  /** 表格搜索条件 */
+  query: {},
+  /** 时间快捷选择设置 */
+  shortcuts: [
+    {
+      text: '最近一周',
+      value: () => {
+        const end = new Date();
+        const start = new Date();
+        start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
+        return [start, end];
+      },
+    },
+    {
+      text: '最近一个月',
+      value: () => {
+        const end = new Date();
+        const start = new Date();
+        start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
+        return [start, end];
+      },
+    },
+    {
+      text: '最近三个月',
+      value: () => {
+        const end = new Date();
+        const start = new Date();
+        start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
+        return [start, end];
+      },
+    },
+  ],
+  /** 时间选择器数据 */
+  stockupDate: [],
+  /** 列表 */
+  columnList: deepClone(columnList),
+  /** 列表数据 */
+  haveDataData: [],
+  notHaveDataData: [],
+  /** 包明细表头 */
+  packageListColumnList: deepClone(packageListColumnList),
+  /** 包明细数据 */
+  packageListData: [],
+  /** 页面loading */
+  loadingObj: {
+    /** 列表加载loading */
+    list: false,
+    pageLoading: false,
+  },
+  /** 列表复选框选中的数据 */
+  selectionList: [],
+  /** 是否显示设置表格 */
+  drawerShow: false,
+  /** 分页参数 */
+  page: {
+    currentPage: 1,
+    pageSize: 30,
+    total: 0,
+  },
+  /** 列表Dom节点 */
+  listNode: '',
+  form: {},
+});
+
+const tableNodeRef = ref();
+
+const { search, query, shortcuts, stockupDate, selectionList, drawerShow, page } = toRefs(details);
+
+/** vuex */
+const permission = computed(() => mapGetters(['permission', 'tagWel', 'tagList']));
+console.log('permission :>> ', permission);
+
+onMounted(() => {
+  const timer = setTimeout(() => {
+    details.listNode = document.querySelector('.maboxhi');
+    details.listNode.style.transition = 'all .5s ease-out';
+    clearTimeout(timer);
+  }, 100);
+});
+
+/** 请求页面数据 */
+const onLoad = async (params = {}) => {
+  try {
+    // 开启列表loading动画
+    details.loadingObj.list = true;
+    console.log('status :>> ', status);
+
+    // 获取暂存单列表
+    const res = await getopenOrderAdvancePageList(details.page, { ...details.query, ...params });
+    console.log('res :>> ', res);
+    const { code, data } = res.data;
+    if (code !== 200) return;
+    if (status === 'haveData') details.haveDataData = data.records;
+    else details.notHaveDataData = data.records;
+    details.page.total = data.total;
+
+    return res.data;
+  } catch (error) {
+    console.log('error :>> ', error);
+  } finally {
+    details.loadingObj.list = false;
+  }
+};
+
+const initOnLoad = (params = {}) => {
+  details.page.pageNum = 1;
+  details.page.total = 0;
+  onLoad(params);
+};
+
+initOnLoad();
+
+/** 搜索 */
+const searchChange = () => {
+  initOnLoad();
+};
+
+/** 清空表单 */
+const searchReset = () => {
+  details.query = {};
+  details.stockupDate = [];
+  details.page.currentPage = 1;
+  handleClearTableQuery(details.columnList);
+  initOnLoad();
+};
+
+/** 展开列表控件 */
+const showdrawer = (_flag?: boolean) => {
+  details.drawerShow = _flag;
+};
+
+/** 是否开启搜索区 */
+const searchHide = () => {
+  details.search = !details.search;
+
+  setNodeHeight(tableNodeRef.value.$el, '', true);
+};
+
+/** 表格表头输入框搜索 */
+const inputsc = (index, col) => {
+  handleInputQuery(index, col, details.query);
+  initOnLoad();
+};
+
+/** 表格表头时间选择 */
+const timesc = (index, row) => {
+  console.log(index, row);
+  if (!!index) {
+    index = dayjs(index).format('YYYY-MM-DD');
+  }
+  details.query[row.prop] = index;
+  if (!index) {
+    delete details.query[row.prop];
+  }
+  initOnLoad();
+};
+
+/** 表格表头下拉框选择 */
+const selectsc = (index, colors) => {
+  handleSelectQuery(index, colors, details.query);
+  initOnLoad();
+};
+
+/** 表格表头复选框选择 */
+const selectionChange = (list: any) => {
+  details.selectionList = list;
+};
+
+/** 每页数量改变执行的回调 */
+const sizeChange = (pageSize: number) => {
+  details.page.pageSize = pageSize;
+  initOnLoad();
+};
+
+/** 页码改变执行的回调 */
+const currentChange = pageNum => {
+  details.page.pageNum = pageNum;
+  onLoad();
+};
+
+/** 批量审核 */
+const handleAudit = () => {
+  if (details.selectionList.length === 0) {
+    ElMessage.warning('请选择要审核的单据');
+    return;
+  }
+};
+
+/** 取消审核 */
+const handleCloseAudit = () => {
+  if (details.selectionList.length === 0) {
+    ElMessage.warning('请选择要取消审核的单据');
+    return;
+  }
+};
+
+/** 作废 */
+const handleCancellation = () => {
+  if (details.selectionList.length === 0) {
+    ElMessage.warning('请选择要取消审核的单据');
+    return;
+  }
+};
+
+/** 导出 */
+const handleExport = () => {
+  ElMessageBox.confirm('是否确认导出?', '提示', {
+    confirmButtonText: '确定',
+    cancelButtonText: '取消',
+    type: 'warning',
+  }).then(() => {
+    ElMessage({
+      type: 'success',
+      message: '导出成功!',
+    });
+  });
+};
+</script>
+
+<style scoped lang="scss">
+// 日期选择器
+:deep(.el-date-editor.el-input) {
+  height: 100% !important;
+  width: 100% !important;
+}
+
+:deep(.el-range-editor.el-input__wrapper) {
+  height: 100% !important;
+}
+</style>