web-trackMangaer/src/views/quoteManage/buyQuote.vue

<template>
  <div class="contentList">
    <Input v-model="typesearchFilter.name" placeholder="请输入标题名称" style="width: 480px"></Input>

    <el-button type="primary" @click="changePage(1)">查询</el-button>

    <el-table v-loading="loading" :data="tabData.data" style="width: 100%; margin-top: 2em" border>
      <el-table-column label="序号" type="index" width="70" align="center"></el-table-column>
      <el-table-column label="发布时间" width="160" align="center">
        <template #default="scope">
          {{ moment(scope.row.addTime).format('yyyy-MM-DD hh:mm:ss') || '暂无' }}
        </template>
      </el-table-column>
      <el-table-column label="联系人" width="100" prop="contactName" align="center"></el-table-column>
      <el-table-column label="联系电话" width="120" prop="contactCell" align="center"></el-table-column>
      <el-table-column label="信息标题" prop="name" width="200"></el-table-column>
      <el-table-column label="状态" align="center" width="100">
        <template #default="scope">
          <Tag color="orange" v-if="scope.row.status == 4">{{ publishStatus(scope.row.status) }}</Tag>
          <Tag color="green" v-if="scope.row.status == 3">{{ publishStatus(scope.row.status) }}</Tag>
          <Tag color="red" v-if="scope.row.status == 2">{{ publishStatus(scope.row.status) }}</Tag>
          <Tag color="blue" v-if="scope.row.status == 1">{{ publishStatus(scope.row.status) }}</Tag>
          <Tag color="skyblue" v-if="scope.row.status == 5">{{ publishStatus(scope.row.status) }}</Tag>
        </template>
      </el-table-column>
      <el-table-column label="牛只分类" width="200">
        <template #default="scope">
          {{ scope.row.classifyOneName }}/{{ scope.row.classifyTwoName }}/{{ scope.row.classifyThreeName }}
        </template>
      </el-table-column>
      <el-table-column label="牛只规格重量" prop="weight" min-width="120">
        <template #default="scope">
          <Tag color="blue">{{ scope.row.weight }}</Tag>
        </template>
      </el-table-column>
      <el-table-column prop="buyPrice" label="意向价格" align="center" min-width="120">
        <template #default="scope">
          <b style="color: red">{{ scope.row.price }}</b>
        </template>
      </el-table-column>
      <el-table-column label="销售数量" min-width="120" align="center">
        <template #default="scope">
          {{ scope.row.count }}
        </template>
      </el-table-column>
      <el-table-column label="牛只图片" align="center" width="120">
        <template #default="scope">
          <img :src="scope.row.imageUrl" style="width: 100%" />
        </template>
      </el-table-column>
      <el-table-column label="发布天数" align="center" width="100" prop="validDays"></el-table-column>
      <el-table-column label="操作" fixed="right" width="120">
        <template #default="scope">
          <!--按钮-->
          <!-- <el-button type="danger" size="small" @click="delContent(scope.row.id)">删除</el-button> -->
          <el-button type="primary" @click="showDetail(scope.row.id)">查看报价</el-button>
        </template>
      </el-table-column>
    </el-table>

    <div class="page_style">
      <Page :total="tabData.total" :model-value="currentPage" show-elevator show-total @on-change="changePage" />
    </div>

    <el-dialog v-model="dialogTableVisible" v-loading="tableLoading" title="报价列表" width="90%">
      <el-table :data="tableData" border>
        <el-table-column property="contactName" label="报价人" width="150" />
        <el-table-column property="contactPhone" label="联系方式" width="150" />
        <el-table-column property="round" label="报价轮数" />
        <el-table-column property="quotePrice" label="报价金额（元/公斤）" />
        <el-table-column property="quoteCount" label="报价数量（头）" />
        <el-table-column property="addTime" label="报价时间">
          <template #default="scope">
            {{ moment(scope.row.addTime).format('yyyy-MM-DD hh:mm:ss') || '暂无' }}
          </template>
        </el-table-column>
        <el-table-column property="quotePriceRound2" label="二轮报价金额（元/公斤）">
          <template #default="scope">
            {{ scope.row.quotePriceRound2 || '无' }}
          </template>
        </el-table-column>
        <el-table-column property="quoteCountRound2" label="二轮报价数量（头）">
          <template #default="scope">
            {{ scope.row.quoteCountRound2 || '无' }}
          </template>
        </el-table-column>
        <el-table-column property="addTimeRound2" label="二轮报价时间">
          <template #default="scope">
            {{ scope.row.addTimeRound2 ? moment(scope.row.addTimeRound2).format('yyyy-MM-DD hh:mm:ss') : '无' }}
          </template>
        </el-table-column>

        <el-table-column property="validTime" label="报价有效期（天）" />
        <el-table-column property="status" label="状态">
          <template #default="scope">
            {{ quoteStatus(scope.row.status) }}
          </template>
        </el-table-column>
      </el-table>
    </el-dialog>
  </div>
</template>

<script setup>
import { defineComponent, ref, reactive, onMounted } from 'vue'
import { Modal } from 'view-ui-plus'
import { publishStatus, quoteStatus } from '@/utils/system/filters'
import moment from 'moment'
import { cow } from '@/request/api'
let typesearchFilter = reactive({ limit: 10, offset: 0, type: 2, hasQuote: 1 })

let tabData = ref({})
const loading = ref(false)
//获取列表内容
async function getData() {
  loading.value = true
  await cow.getCattleDealPageByAdminAndType(typesearchFilter).then(res => {
    if (res.code == 101) {
      tabData.value = res || {}
    }
  })
  loading.value = false
}

let currentPage = ref(1)
//更改页码
function changePage(page) {
  if (tabData.value.limit) {
    typesearchFilter.offset = (page - 1) * tabData.value.limit //更新偏移量
    currentPage.value = page //切换当前页码
    getData() //获取广告数据
  }
}

const tableData = ref([])
let dialogTableVisible = ref(false)
let tableLoading = ref(false)
async function showDetail(id) {
  tableLoading.value = true
  dialogTableVisible.value = true
  await cow.quoteList({ cattleDealId: id, limit: 1000 }).then(res => {
    tableData.value = res.data
  })
  tableLoading.value = false
}

onMounted(() => {
  getData()
})
</script>

<style lang="scss" scoped>
.contentList {
  padding: 1em;
  .page_style {
    text-align: right;
    margin-top: 1em;
    background-color: var(--system-container-background);
  }
}
</style>