|
@@ -0,0 +1,495 @@
|
|
|
+<template>
|
|
|
+ <a-card :bordered="false" style="margin-bottom: 10px" class="mb-2">
|
|
|
+ <a-form ref="searchFormRef" name="advanced_search" :model="searchFormState" class="ant-advanced-search-form">
|
|
|
+ <a-row :gutter="24">
|
|
|
+ <a-col :span="6">
|
|
|
+ <a-form-item label="车牌号码" name="licensePlate">
|
|
|
+ <a-input v-model:value="searchFormState.licensePlate" placeholder="请输入车牌号码" />
|
|
|
+ </a-form-item>
|
|
|
+ </a-col>
|
|
|
+ <a-col :span="6">
|
|
|
+ <a-form-item label="过毛时间" name="grossTime">
|
|
|
+ <a-range-picker
|
|
|
+ v-model:value="searchFormState.grossTime"
|
|
|
+ value-format="YYYY-MM-DD"
|
|
|
+ />
|
|
|
+ </a-form-item>
|
|
|
+ </a-col>
|
|
|
+ <a-col :span="6">
|
|
|
+ <a-form-item label="过皮时间" name="tareTime">
|
|
|
+ <a-range-picker
|
|
|
+ v-model:value="searchFormState.tareTime"
|
|
|
+ value-format="YYYY-MM-DD"
|
|
|
+ />
|
|
|
+ </a-form-item>
|
|
|
+ </a-col>
|
|
|
+ <a-col :span="6" v-show="advanced">
|
|
|
+ <a-form-item label="司机姓名" name="driverName">
|
|
|
+ <a-input v-model:value="searchFormState.driverName" placeholder="请输入司机姓名" />
|
|
|
+ </a-form-item>
|
|
|
+ </a-col>
|
|
|
+ <a-col :span="6" v-show="advanced">
|
|
|
+ <a-form-item label="司机电话" name="driverMobile">
|
|
|
+ <a-input v-model:value="searchFormState.driverMobile" placeholder="请输入司机电话" />
|
|
|
+ </a-form-item>
|
|
|
+ </a-col>
|
|
|
+ <a-col :span="6" v-show="advanced">
|
|
|
+ <a-form-item label="货品名称" name="goodsName">
|
|
|
+ <a-input v-model:value="searchFormState.goodsName" placeholder="请输入货品名称" />
|
|
|
+ </a-form-item>
|
|
|
+ </a-col>
|
|
|
+ <a-col :span="6" v-show="advanced">
|
|
|
+ <a-form-item label="规格型号" name="goodsModel">
|
|
|
+ <a-input v-model:value="searchFormState.goodsModel" placeholder="请输入规格型号" />
|
|
|
+ </a-form-item>
|
|
|
+ </a-col>
|
|
|
+ <a-col :span="6" v-show="advanced">
|
|
|
+ <a-form-item label="收货单位" name="receiptCompany">
|
|
|
+ <a-input v-model:value="searchFormState.receiptCompany" placeholder="请输入收货单位" />
|
|
|
+ </a-form-item>
|
|
|
+ </a-col>
|
|
|
+ <a-col :span="6" v-show="advanced">
|
|
|
+ <a-form-item label="发货单位" name="shippingCompany">
|
|
|
+ <a-input v-model:value="searchFormState.shippingCompany" placeholder="请输入发货单位" />
|
|
|
+ </a-form-item>
|
|
|
+ </a-col>
|
|
|
+ <a-col :span="6" v-show="advanced">
|
|
|
+ <a-form-item label="运输单位" name="transportCompany">
|
|
|
+ <a-input v-model:value="searchFormState.transportCompany" placeholder="请输入运输单位" />
|
|
|
+ </a-form-item>
|
|
|
+ </a-col>
|
|
|
+ <a-col :span="6" v-show="advanced">
|
|
|
+ <a-form-item label="订单编号" name="orderNumber">
|
|
|
+ <a-input v-model:value="searchFormState.orderNumber" placeholder="请输入订单编号" />
|
|
|
+ </a-form-item>
|
|
|
+ </a-col>
|
|
|
+ <a-col :span="6" v-show="advanced">
|
|
|
+ <a-form-item label="订单名称" name="orderName">
|
|
|
+ <a-input v-model:value="searchFormState.orderName" placeholder="请输入订单名称" />
|
|
|
+ </a-form-item>
|
|
|
+ </a-col>
|
|
|
+ <a-col :span="6" v-show="advanced">
|
|
|
+ <a-form-item label="客户名称" name="customerName">
|
|
|
+ <a-input v-model:value="searchFormState.customerName" placeholder="请输入客户名称" />
|
|
|
+ </a-form-item>
|
|
|
+ </a-col>
|
|
|
+ <a-col :span="6">
|
|
|
+ <a-button type="primary" @click="tableRef.refresh()">查询</a-button>
|
|
|
+ <a-button style="margin: 0 8px" @click="reset">重置</a-button>
|
|
|
+ <a @click="toggleAdvanced" style="margin-left: 8px">
|
|
|
+ {{ advanced ? '收起' : '展开' }}
|
|
|
+ <component :is="advanced ? 'up-outlined' : 'down-outlined'" />
|
|
|
+ </a>
|
|
|
+ </a-col>
|
|
|
+ </a-row>
|
|
|
+ </a-form>
|
|
|
+ </a-card>
|
|
|
+ <a-card :bordered="false">
|
|
|
+ <s-table
|
|
|
+ ref="tableRef"
|
|
|
+ :columns="columns"
|
|
|
+ :data="loadData"
|
|
|
+ bordered
|
|
|
+ :row-key="(record) => record.id"
|
|
|
+ >
|
|
|
+ <template #operator class="table-operator">
|
|
|
+ <a-space>
|
|
|
+<!-- <a-button type="dashed" class="snowy-buttom-left" @click="exportData()" v-if="hasPerm('bizRecordBatchExport')"
|
|
|
+ ><export-outlined />记录导出</a-button
|
|
|
+ >-->
|
|
|
+ </a-space>
|
|
|
+ </template>
|
|
|
+ <template #bodyCell="{ column, record }">
|
|
|
+ <template v-if="column.dataIndex === 'licensePlate'">
|
|
|
+ <span v-if="record.plateColor === '蓝色'" class="blue-background">{{ record.licensePlate }}</span>
|
|
|
+ <span v-else-if="record.plateColor === '黄色'" class="yellow-background">{{ record.licensePlate }}</span>
|
|
|
+ <span v-else-if="record.plateColor === '绿色'" class="green-background">{{ record.licensePlate }}</span>
|
|
|
+ <span v-else-if="record.plateColor === '白色'" class="white-background">{{ record.licensePlate }}</span>
|
|
|
+ <span v-else-if="record.plateColor === '黑色'" class="black-background">{{ record.licensePlate }}</span>
|
|
|
+ <span v-else class="blue-background">{{ record.licensePlate }}</span>
|
|
|
+ </template>
|
|
|
+
|
|
|
+ <template v-if="column.dataIndex === 'enterTime'">
|
|
|
+ <div class="time-list">
|
|
|
+ <p>
|
|
|
+ <span class="blueTag">过毛</span>
|
|
|
+ <span style="font-weight: normal">{{ record.grossTime }}</span>
|
|
|
+ </p>
|
|
|
+ <p style="margin-bottom: 0">
|
|
|
+ <span class="orangeTag">过皮</span>
|
|
|
+ <span style="font-weight: normal">{{ record.tareTime }}</span>
|
|
|
+ </p>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+
|
|
|
+ <template v-if="column.dataIndex === 'weight'">
|
|
|
+ <div class="time-list">
|
|
|
+ <p>
|
|
|
+ <span class="blueTag">毛重</span>
|
|
|
+ <span class="showNum">{{ record.grossWeight }} </span>
|
|
|
+ </p>
|
|
|
+ <p>
|
|
|
+ <span class="orangeTag">皮重</span>
|
|
|
+ <span class="showNum">{{ record.tareWeight }}</span>
|
|
|
+ </p>
|
|
|
+ <p>
|
|
|
+ <span class="greenTag">净重</span>
|
|
|
+ <span class="showNum">{{ record.netWeight }}</span>
|
|
|
+ </p>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+
|
|
|
+ <template v-if="column.dataIndex === 'company'">
|
|
|
+ <div class="company-list">
|
|
|
+ <p>收货:{{ record.receiptCompany }}</p>
|
|
|
+ <p>发货:{{ record.shippingCompany }}</p>
|
|
|
+ <p style="margin-bottom: 0">运输:{{ record.transportCompany }}</p>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+
|
|
|
+ <template v-if="column.dataIndex === 'goods'">
|
|
|
+ <div class="time-list">
|
|
|
+ <p>名称:{{ record.goodsName }}</p>
|
|
|
+ <p style="margin-bottom: 0">规格:{{ record.goodsModel }}</p>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+
|
|
|
+ <template v-if="column.dataIndex === 'driver'">
|
|
|
+ <div class="time-list">
|
|
|
+ <p>姓名:{{ record.driverName }}</p>
|
|
|
+ <p style="margin-bottom: 0">电话:{{ record.driverMobile }}</p>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ <template v-if="column.dataIndex === 'orderInfo'">
|
|
|
+ <div class="time-list">
|
|
|
+ <p>名称:{{ record.orderName }}</p>
|
|
|
+ <p style="margin-bottom: 0">编号:{{ record.orderNumber }}</p>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ <template v-if="column.dataIndex === 'action'">
|
|
|
+ <a-space>
|
|
|
+ <a @click="detailRef.onOpen(record)">详情</a>
|
|
|
+ <a-divider type="vertical" v-if="hasPerm('bizRecordConfirm') && record.confirmUser==null " />
|
|
|
+ <a @click="confirmRecord(record)" v-if="hasPerm('bizRecordConfirm') && record.confirmUser==null ">确认</a>
|
|
|
+ </a-space>
|
|
|
+ </template>
|
|
|
+ </template>
|
|
|
+ </s-table>
|
|
|
+ </a-card>
|
|
|
+ <Form ref="formRef" @successful="tableRef.refresh()" />
|
|
|
+ <Detail ref="detailRef" />
|
|
|
+</template>
|
|
|
+
|
|
|
+<script setup name="record">
|
|
|
+ import { message, Modal } from 'ant-design-vue'
|
|
|
+ import { cloneDeep } from 'lodash-es'
|
|
|
+ import Form from './form.vue'
|
|
|
+ import Detail from './detail.vue'
|
|
|
+ import bizRecordApi from '@/api/biz/bizRecordApi'
|
|
|
+ import downloadUtil from '@/utils/downloadUtil'
|
|
|
+ import {createVNode} from "vue";
|
|
|
+ import {ExclamationCircleOutlined} from "@ant-design/icons-vue";
|
|
|
+ import bizAppointmentRecordApi from "@/api/biz/bizAppointmentRecordApi";
|
|
|
+ const searchFormState = ref({isFlag:1})
|
|
|
+ const searchFormRef = ref()
|
|
|
+ const tableRef = ref()
|
|
|
+ const formRef = ref()
|
|
|
+ const detailRef = ref()
|
|
|
+ const toolConfig = { refresh: true, height: true, columnSetting: true, striped: false }
|
|
|
+ // 查询区域显示更多控制
|
|
|
+ const advanced = ref(false)
|
|
|
+
|
|
|
+ const submitLoading = ref(false)
|
|
|
+
|
|
|
+ const toggleAdvanced = () => {
|
|
|
+ advanced.value = !advanced.value
|
|
|
+ }
|
|
|
+ const columns = [
|
|
|
+ {
|
|
|
+ title: '车次编码',
|
|
|
+ dataIndex: 'carNumber',
|
|
|
+ width: 120,
|
|
|
+ align: 'center'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '车牌号码',
|
|
|
+ dataIndex: 'licensePlate',
|
|
|
+ width: '130px',
|
|
|
+ align: 'center'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '过车时间',
|
|
|
+ dataIndex: 'enterTime',
|
|
|
+ width: '130px'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '重量(KG)',
|
|
|
+ dataIndex: 'weight',
|
|
|
+ align: 'center'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '订单信息',
|
|
|
+ dataIndex: 'orderInfo'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '收发货单位',
|
|
|
+ dataIndex: 'company'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '货品',
|
|
|
+ dataIndex: 'goods'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '司机信息',
|
|
|
+ dataIndex: 'driver',
|
|
|
+ width: '200px'
|
|
|
+ }
|
|
|
+ ]
|
|
|
+ // 操作栏通过权限判断是否显示
|
|
|
+ if (hasPerm(['bizRecordEdit', 'bizRecordDelete', 'bizRecordDetail'])) {
|
|
|
+ columns.push({
|
|
|
+ title: '操作',
|
|
|
+ dataIndex: 'action',
|
|
|
+ align: 'center',
|
|
|
+ width: 150
|
|
|
+ })
|
|
|
+ }
|
|
|
+
|
|
|
+ const loadData = (parameter) => {
|
|
|
+ const searchFormParam = cloneDeep(searchFormState.value)
|
|
|
+ // grossTime范围查询条件重载
|
|
|
+ if (searchFormParam.grossTime) {
|
|
|
+ searchFormParam.startGrossTime = searchFormParam.grossTime[0]
|
|
|
+ searchFormParam.endGrossTime = searchFormParam.grossTime[1]
|
|
|
+ delete searchFormParam.grossTime
|
|
|
+ }
|
|
|
+ // tareTime范围查询条件重载
|
|
|
+ if (searchFormParam.tareTime) {
|
|
|
+ searchFormParam.startTareTime = searchFormParam.tareTime[0]
|
|
|
+ searchFormParam.endTareTime = searchFormParam.tareTime[1]
|
|
|
+ delete searchFormParam.tareTime
|
|
|
+ }
|
|
|
+ return bizRecordApi.bizRecordPage(Object.assign(parameter, searchFormParam)).then((data) => {
|
|
|
+ return data
|
|
|
+ })
|
|
|
+ }
|
|
|
+ const dateRangeOnChange = (date, dateString) => {
|
|
|
+ searchFormState.startGrossTime = dateString[0]
|
|
|
+ searchFormState.endGrossTime = dateString[1]
|
|
|
+ }
|
|
|
+ const dateRangeOnChangeTare = (date, dateString) => {
|
|
|
+ searchFormState.startTareTime = dateString[0]
|
|
|
+ searchFormState.endTareTime = dateString[1]
|
|
|
+ }
|
|
|
+ // 重置
|
|
|
+ const reset = () => {
|
|
|
+ searchFormRef.value.resetFields()
|
|
|
+ searchFormState.startGrossTime = null
|
|
|
+ searchFormState.endGrossTime = null
|
|
|
+ searchFormState.startTareTime = null
|
|
|
+ searchFormState.endTareTime = null
|
|
|
+ tableRef.value.refresh(true)
|
|
|
+ }
|
|
|
+ const exportData = () => {
|
|
|
+ const paramData = {
|
|
|
+ licensePlate: searchFormState.value.licensePlate,
|
|
|
+ carNumber: searchFormState.value.carNumber,
|
|
|
+ goodsName: searchFormState.value.goodsName,
|
|
|
+ goodsModel: searchFormState.value.goodsModel,
|
|
|
+ receiptCompany: searchFormState.value.receiptCompany,
|
|
|
+ shippingCompany: searchFormState.value.shippingCompany,
|
|
|
+ transportCompany: searchFormState.value.transportCompany,
|
|
|
+ driverName: searchFormState.value.driverName,
|
|
|
+ driverMobile: searchFormState.value.driverMobile,
|
|
|
+ startGrossTime: searchFormState.startGrossTime,
|
|
|
+ endGrossTime: searchFormState.endGrossTime,
|
|
|
+ startTareTime: searchFormState.startTareTime,
|
|
|
+ endTareTime: searchFormState.endTareTime
|
|
|
+ }
|
|
|
+ Modal.confirm({
|
|
|
+ title: '提示',
|
|
|
+ content: '确定要导出过磅记录?',
|
|
|
+ maskClosable: true,
|
|
|
+ onOk: () => {
|
|
|
+ bizRecordApi.bizRecordExport(paramData).then((res) => {
|
|
|
+ downloadUtil.resultDownload(res)
|
|
|
+ tableRef.value.clearSelected()
|
|
|
+ })
|
|
|
+ }
|
|
|
+ })
|
|
|
+ }
|
|
|
+
|
|
|
+ //确认
|
|
|
+ const confirmRecord = (record) => {
|
|
|
+
|
|
|
+ Modal.confirm({
|
|
|
+ title: '提示',
|
|
|
+ content: '确定完成发货吗?',
|
|
|
+ onOk() {
|
|
|
+ submitLoading.value = true
|
|
|
+ let params =
|
|
|
+ {
|
|
|
+ id: record.id
|
|
|
+ }
|
|
|
+
|
|
|
+
|
|
|
+ bizRecordApi
|
|
|
+ .confirmRecord(params)
|
|
|
+ .then(() => {
|
|
|
+ tableRef.value.refresh(true)
|
|
|
+ })
|
|
|
+ .finally(() => {
|
|
|
+ submitLoading.value = false
|
|
|
+ })
|
|
|
+ },
|
|
|
+ onCancel() {}
|
|
|
+ })
|
|
|
+ }
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="less" scoped>
|
|
|
+ /** 表头居中 */
|
|
|
+ :deep .ant-table-thead > tr > th {
|
|
|
+ text-align: center;
|
|
|
+ }
|
|
|
+
|
|
|
+ .time-list {
|
|
|
+ -webkit-text-size-adjust: none;
|
|
|
+ font-size: 13px;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+
|
|
|
+ p {
|
|
|
+ white-space: nowrap;
|
|
|
+ span {
|
|
|
+ display: inline-block;
|
|
|
+ font-weight: 600;
|
|
|
+ height: 16px;
|
|
|
+ line-height: 16px;
|
|
|
+ border-radius: 5px;
|
|
|
+ text-align: center;
|
|
|
+ margin-right: 2px;
|
|
|
+ padding: 0 5px;
|
|
|
+ }
|
|
|
+ .blueTag {
|
|
|
+ color: #1890ff;
|
|
|
+ background: rgba(24, 144, 255, 0.1);
|
|
|
+ }
|
|
|
+ .orangeTag {
|
|
|
+ color: #ff7c18;
|
|
|
+ background: rgba(24, 144, 255, 0.1);
|
|
|
+ }
|
|
|
+ .greenTag {
|
|
|
+ color: rgb(82, 196, 26);
|
|
|
+ background: rgba(82, 196, 26, 0.1);
|
|
|
+ }
|
|
|
+ .purpleTag {
|
|
|
+ color: rgb(77, 26, 196);
|
|
|
+ background: rgba(82, 196, 26, 0.1);
|
|
|
+ }
|
|
|
+ .showNum {
|
|
|
+ display: inline-block;
|
|
|
+ height: 16px;
|
|
|
+ line-height: 16px;
|
|
|
+ width: 45px;
|
|
|
+ border-radius: 5px;
|
|
|
+ text-align: center;
|
|
|
+ margin-right: 2px;
|
|
|
+ text-align: right;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .order-list,
|
|
|
+ .company-list {
|
|
|
+ -webkit-text-size-adjust: none;
|
|
|
+ font-size: 13px;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ p {
|
|
|
+ white-space: nowrap;
|
|
|
+ margin-bottom: 5px;
|
|
|
+ .weightSpan,
|
|
|
+ .company {
|
|
|
+ display: inline-block;
|
|
|
+ width: 17px;
|
|
|
+ height: 17px;
|
|
|
+ line-height: 16px;
|
|
|
+ border-radius: 50%;
|
|
|
+ color: #fff;
|
|
|
+ text-align: center;
|
|
|
+ }
|
|
|
+ .company {
|
|
|
+ margin-right: 5px;
|
|
|
+ }
|
|
|
+ .weight,
|
|
|
+ .receiptCompany {
|
|
|
+ background-color: #1890ff;
|
|
|
+ }
|
|
|
+ .tare {
|
|
|
+ background-color: #2f54eb;
|
|
|
+ }
|
|
|
+ .netWeight,
|
|
|
+ .shippingCompany {
|
|
|
+ background-color: #52c41a;
|
|
|
+ }
|
|
|
+ .transportCompany {
|
|
|
+ background-color: #c61263;
|
|
|
+ }
|
|
|
+ .showNum {
|
|
|
+ display: inline-block;
|
|
|
+ height: 16px;
|
|
|
+ line-height: 16px;
|
|
|
+ width: 45px;
|
|
|
+ border-radius: 5px;
|
|
|
+ text-align: center;
|
|
|
+ margin-right: 2px;
|
|
|
+ text-align: right;
|
|
|
+ }
|
|
|
+ em {
|
|
|
+ font-style: normal;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .blue-background {
|
|
|
+ background-color: #0d84ff;
|
|
|
+ border-radius: 5px; /* 你可以根据需要调整圆角的大小 */
|
|
|
+ padding: 5px; /* 可选:添加一些内边距 */
|
|
|
+ color: white; /* 可选:设置文字颜色 */
|
|
|
+ font-size: large;
|
|
|
+ }
|
|
|
+ .yellow-background {
|
|
|
+ background-color: yellow;
|
|
|
+ border-radius: 5px;
|
|
|
+ padding: 5px;
|
|
|
+ color: black;
|
|
|
+ font-size: large;
|
|
|
+ }
|
|
|
+ .green-background {
|
|
|
+ background: linear-gradient(to bottom, white, #39b54a);
|
|
|
+ border-radius: 5px;
|
|
|
+ padding: 5px;
|
|
|
+ color: black; /* 文字颜色改为黑色以便在渐变背景上更清晰 */
|
|
|
+ font-size: large;
|
|
|
+ border: 1px solid #ccc; /* 增加边框 */
|
|
|
+ box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* 增加阴影 */
|
|
|
+ }
|
|
|
+
|
|
|
+ .white-background {
|
|
|
+ background-color: white;
|
|
|
+ border-radius: 5px;
|
|
|
+ padding: 5px;
|
|
|
+ color: black;
|
|
|
+ font-size: large;
|
|
|
+ border: 1px solid #ccc; /* 增加边框 */
|
|
|
+ box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* 增加阴影 */
|
|
|
+ }
|
|
|
+
|
|
|
+ .black-background {
|
|
|
+ background-color: black;
|
|
|
+ border-radius: 5px;
|
|
|
+ padding: 5px;
|
|
|
+ color: white;
|
|
|
+ font-size: large;
|
|
|
+ }
|
|
|
+</style>
|