freight-dy-admin/src/views/self/battery/b-inquiry.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>