284 lines
7.4 KiB
Vue
284 lines
7.4 KiB
Vue
<!-- 明细 -->
|
||
<template>
|
||
<div>
|
||
<div class="app-container">
|
||
<el-row :gutter="20">
|
||
<!-- 列表 -->
|
||
<el-col :lg="24" :xs="24">
|
||
<div class="search-container">
|
||
<el-form ref="queryFormRef" :model="queryParams" :inline="true">
|
||
<el-form-item prop="createdTime">
|
||
<el-date-picker
|
||
v-model="range"
|
||
placeholder="时间"
|
||
type="datetimerange"
|
||
:shortcuts="shortcuts"
|
||
range-separator="-"
|
||
start-placeholder="开始日期"
|
||
end-placeholder="结束日期"
|
||
clearable
|
||
style="width: 350px"
|
||
@keyup.enter="handleQuery"
|
||
value-format="YYYY-MM-DD HH:mm:ss"
|
||
/>
|
||
</el-form-item>
|
||
<el-form-item prop="inquiryNo">
|
||
<el-input
|
||
v-model="queryParams.inquiryNo"
|
||
placeholder="请输入询价单号"
|
||
clearable
|
||
style="width: 150px"
|
||
@keyup.enter="handleQuery"
|
||
/>
|
||
</el-form-item>
|
||
<el-form-item prop="name">
|
||
<el-input
|
||
v-model="queryParams.name"
|
||
placeholder="请输入联系人"
|
||
clearable
|
||
style="width: 150px"
|
||
@keyup.enter="handleQuery"
|
||
/>
|
||
</el-form-item>
|
||
<el-form-item prop="status">
|
||
<el-select
|
||
placeholder="请选择状态"
|
||
style="width: 150px"
|
||
v-model="queryParams.status"
|
||
clearable
|
||
>
|
||
<el-option
|
||
v-for="item in statusOptions"
|
||
:key="item.id"
|
||
:label="item.name"
|
||
:value="item.id"
|
||
/>
|
||
</el-select>
|
||
</el-form-item>
|
||
|
||
<el-form-item>
|
||
<el-button type="primary" @click="handleQuery">
|
||
<i-ep-search />
|
||
搜索
|
||
</el-button>
|
||
<el-button @click="handleResetQuery">
|
||
<i-ep-refresh />
|
||
重置
|
||
</el-button>
|
||
</el-form-item>
|
||
</el-form>
|
||
</div>
|
||
|
||
<el-card shadow="never" class="table-container">
|
||
<el-table v-loading="loading" :data="pageData">
|
||
<el-table-column type="index" width="50" />
|
||
<el-table-column
|
||
v-for="item in tableTitleList"
|
||
:key="item.prop"
|
||
:label="item.label"
|
||
align="center"
|
||
:prop="item.prop"
|
||
>
|
||
<template #default="scope">
|
||
<text v-if="item.prop === 'status'">
|
||
{{ scope.row[item.prop] ? "已联系" : "待联系" }}
|
||
</text>
|
||
|
||
<text v-else>
|
||
{{ scope.row[item.prop] }}
|
||
</text>
|
||
</template>
|
||
</el-table-column>
|
||
|
||
<el-table-column label="操作" fixed="right" width="220">
|
||
<template #default="scope">
|
||
<el-button
|
||
type="primary"
|
||
link
|
||
size="small"
|
||
@click="handleOpenDialog(scope.row.id, scope.row, '备注')"
|
||
>
|
||
{{ scope.row.status ? "备注" : "标记为已联系" }}
|
||
</el-button>
|
||
<el-button
|
||
v-if="scope.row.photoUrl"
|
||
type="primary"
|
||
link
|
||
size="small"
|
||
@click="handleOpenDialog(scope.row.id, scope.row, '照片')"
|
||
>
|
||
照片
|
||
</el-button>
|
||
</template>
|
||
</el-table-column>
|
||
</el-table>
|
||
<pagination
|
||
v-if="total > 0"
|
||
v-model:total="total"
|
||
v-model:page="queryParams.pageNum"
|
||
v-model:limit="queryParams.pageSize"
|
||
@pagination="handleQuery"
|
||
/>
|
||
</el-card>
|
||
</el-col>
|
||
</el-row>
|
||
</div>
|
||
|
||
<!-- 表单弹窗 -->
|
||
<el-drawer
|
||
v-model="dialog.visible"
|
||
:title="dialog.title"
|
||
append-to-body
|
||
@close="handleCloseDialog"
|
||
size="800"
|
||
>
|
||
<!-- 照片 -->
|
||
<photo v-if="dialog.title === '照片'" :formData="formData" />
|
||
|
||
<!-- 备注 -->
|
||
<remarkDialog
|
||
v-if="dialog.title === '备注'"
|
||
:type="'询价'"
|
||
:obj="formData"
|
||
@handle-close-dialog="handleCloseDialog"
|
||
@handle-reset-query="handleResetQuery"
|
||
/>
|
||
</el-drawer>
|
||
</div>
|
||
</template>
|
||
|
||
<script setup lang="ts">
|
||
import BatteryAPI, { PageParams, BatteryDTO } from "@/api/battery";
|
||
import {
|
||
timeShortcuts,
|
||
formatDate,
|
||
getCurrentMonthStartAndEnd,
|
||
} from "@/utils/index";
|
||
import photo from "./components/photo.vue";
|
||
import remarkDialog from "./components/remarkDialog.vue";
|
||
const shortcuts = timeShortcuts();
|
||
|
||
const statusOptions = [
|
||
{
|
||
id: 1,
|
||
name: "已联系",
|
||
},
|
||
{
|
||
id: 0,
|
||
name: "待联系",
|
||
},
|
||
];
|
||
|
||
const tableTitleList = ref([
|
||
{
|
||
label: "询价单号",
|
||
prop: "trackingNumber",
|
||
align: "center",
|
||
},
|
||
{
|
||
label: "询价时间",
|
||
prop: "createdTime",
|
||
align: "center",
|
||
},
|
||
{
|
||
label: "联系人",
|
||
prop: "name",
|
||
align: "center",
|
||
},
|
||
{
|
||
label: "联系电话",
|
||
prop: "contactInfo",
|
||
align: "center",
|
||
},
|
||
{
|
||
label: "回收种类",
|
||
prop: "recyclingType",
|
||
align: "center",
|
||
},
|
||
{
|
||
label: "回收重量（KG）",
|
||
prop: "recyclingWeight",
|
||
align: "center",
|
||
},
|
||
{
|
||
label: "状态",
|
||
prop: "status",
|
||
align: "center",
|
||
},
|
||
{
|
||
label: "备注",
|
||
prop: "remarks",
|
||
align: "center",
|
||
},
|
||
]);
|
||
|
||
/** 弹窗对象 */
|
||
const dialog = reactive({
|
||
visible: false,
|
||
title: "",
|
||
});
|
||
|
||
const queryFormRef = ref(ElForm);
|
||
|
||
const loading = ref(false);
|
||
const total = ref(0);
|
||
const pageData = ref<BatteryDTO[]>();
|
||
|
||
const range = ref([
|
||
formatDate(getCurrentMonthStartAndEnd().start, "{y}-{m}-{d}") + " 00:00:00",
|
||
formatDate(getCurrentMonthStartAndEnd().end, "{y}-{m}-{d}") + " 23:59:59",
|
||
]);
|
||
/** 查询参数 */
|
||
const queryParams = reactive<PageParams>({});
|
||
|
||
// 表单数据
|
||
let formData = reactive<any>({});
|
||
|
||
/** 查询 */
|
||
function handleQuery() {
|
||
loading.value = true;
|
||
BatteryAPI.queryPage({
|
||
...queryParams,
|
||
startTime: range.value ? range.value[0] : null,
|
||
endTime: range.value ? range.value[1] : null,
|
||
})
|
||
.then((data) => {
|
||
pageData.value = data.list;
|
||
total.value = data.total;
|
||
})
|
||
.finally(() => {
|
||
loading.value = false;
|
||
});
|
||
}
|
||
|
||
/** 重置查询 */
|
||
function handleResetQuery() {
|
||
queryFormRef.value.resetFields();
|
||
queryParams.pageNum = 1;
|
||
queryParams.pageSize = 10;
|
||
range.value = [
|
||
formatDate(getCurrentMonthStartAndEnd().start, "{y}-{m}-{d}") + " 00:00:00",
|
||
formatDate(getCurrentMonthStartAndEnd().end, "{y}-{m}-{d}") + " 23:59:59",
|
||
];
|
||
handleQuery();
|
||
}
|
||
|
||
async function handleOpenDialog(id: number, item?: any, title?: string) {
|
||
dialog.visible = true;
|
||
dialog.title = title || "";
|
||
formData = item;
|
||
}
|
||
|
||
/** 关闭弹窗 */
|
||
function handleCloseDialog() {
|
||
dialog.visible = false;
|
||
formData = {};
|
||
}
|
||
|
||
onMounted(() => {
|
||
handleQuery();
|
||
});
|
||
</script>
|
||
|
||
<style lang="scss" scoped></style>
|