JNBusiness/ruoyi-ui/src/views/mobile/quoteMobile/index.vue

<template>
  <div>
    <div class="search-container">
      <el-input
        v-model="queryParams.quotCustomerName"
        style="margin-bottom: 10px"
        placeholder="请输入客户名称"
        class="search-input"
        clearable>
      </el-input>
      <el-input
        v-model="queryParams.quotProject"
        placeholder="请输入项目名称"
        style="margin-bottom: 10px"
        class="search-input"
        clearable>
      </el-input>
      <div style="display: flex">
        <el-select
          v-model="queryParams.quotApprovalStatus"
          placeholder="请选择审批状态"
          style="width: 50%; margin-right: 10px"
          clearable
        >
          <el-option
            v-for="dict in dict.type.quot_approval_status"
            :key="dict.value"
            :label="dict.label"
            :value="dict.value"
          />
        </el-select>
        <div style="width: 50%">
          <el-button size="mini" icon="el-icon-search" @click="handleSearch">搜索</el-button>
          <el-button size="mini" icon="el-icon-plus" @click="handleAdd">新增</el-button>
        </div>
      </div>
    </div>
      <div v-loading="loading" v-for="(quote, index) in quoteList" :key="index">
        <div style="padding: 10px">
          <el-card class="box-card">
            <div slot="header" class="clearfix">
              <span>{{quote.quotCode}}</span>
              <el-button style="float: right; padding: 3px; " type="text" @click="handleEdit(quote)">编辑</el-button>
            </div>
            <div class="text item">
              <div v-if="false">订单号Id:{{quote.quotId}}</div>
              <div style="margin-bottom: 5px">客户:{{quote.quotCustomerName}}</div>
              <div style="margin-bottom: 5px">项目名称:{{quote.quotProject}}</div>
              <div style="margin-bottom: 5px">提交状态:{{quote.quotApprovalStatus === '0' ? '待提交' : (quote.quotApprovalStatus === '1' ? '协助中' :
                (quote.quotApprovalStatus === '2' ? '已完成' : '已驳回'))}}</div>
              <div style="margin-bottom: 5px">OA审批状态:{{quote.quotOAApprovalStatus === '0' ? '待提交' : (quote.quotOAApprovalStatus === '1' ? '协助中' :
                (quote.quotOAApprovalStatus === '2' ? '已完成' : '已驳回'))}}</div>
              <div style="margin-bottom: 5px">询价日期:{{formatDate(quote.quotInquiryDate)}}</div>
              <div style="margin-bottom: 5px">报价日期:{{formatDate(quote.quotQuotationDate)}}</div>
              <div >创建时间:{{quote.createTime}}</div>
            </div>
          </el-card>
        </div>
      </div>
      <div style="margin-bottom: 40px">
        <pagination
          v-show="total>0"
          :total="total"
          :page.sync="queryParams.pageNum"
          :limit.sync="queryParams.pageSize"
          @pagination="handleSearch"
        />
      </div>


    </div>
</template>

<script>
import { getQuoteList} from "@/api/mobile/quoteMobile/quoteMobile";
import { listQuot } from "@/api/quot/quot";
export default {
  name: "index",
  dicts: ['quot_approval_status'],
  data() {
    return {
      loading: false,
      quoteList: [],
      total: 0,
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        quotCode: null,
        quotCustomerName: null,
        quotProject: null,
        quotApprovalStatus: null,
      },
    };
  },
  computed: {

  },
  created() {

    this.queryParams.orderByColumn = "a.create_time";//查询字段是表格中字段名字
    this.queryParams.isAsc = "desc";//动态取值排序顺序

    this.handleSearch();
  },
  mounted() {
    this.$store.dispatch('app/toggleSideBarHide', true);
    document.querySelector('.navbar').style.display = "none";
    document.querySelector('.tags-view-container').style.display = "none";
  },
  methods: {
    handleSearch() {
      try {
        this.loading = true;
        listQuot(this.queryParams).then(response => {
          this.quoteList = response.rows;
          this.total = response.total;
          this.loading = false;
        });
      } catch (error) {
        console.error(error);
      }
    },
    handleAdd() {
      this.$router.push('/quoteMobile/add');
    },
    handleEdit(quote) {
      const info = {quotId : quote.quotId}
      this.$router.push({ path: '/quoteMobile/edit/edit', query: info});
      console.log(quote)
    },

    formatDate(dateString) {
      if (dateString !== undefined && dateString !== null) {
        const date = new Date(dateString);
        return date.toLocaleString('zh-CN', {
          year: 'numeric',
          month: '2-digit',
          day: '2-digit',
          hour: '2-digit',
          minute: '2-digit',
          second: '2-digit',
          hour12: false,
          timeZone: 'Asia/Shanghai'
        });
      } else {
        return ''
      }

    }
  },

}
</script>

<style>
.search-container {
  padding: 5px 10px 0px 10px;
  justify-content: center;
  margin-bottom: 10px;
  margin-top: 10px;
}

.search-input {
  width: 100%;
  max-width: 600px;
  border-radius: 25px;
}

.box-card {
  margin-bottom: 0;
}

.loading,
.end-of-data {
  text-align: center;
  padding: 10px;
}

.quote-list {
  overflow-y: auto;
  height: 100vh; /* 设置高度以触发滚动 */
}
</style>