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

<template>
  <div>
    <div class="search-container">
      <el-input
        v-model="queryParams.quotProject"
        placeholder="请输入项目名称"
        class="search-input"
        clearable
      >
        <el-button slot="append" icon="el-icon-search" @click="handleSearch">搜索</el-button>
        <el-button slot="append" icon="el-icon-plus" @click="handleAdd">新增</el-button>
      </el-input>
    </div>
    <div v-if="quoteList.length === 0">内容为空</div>
    <div v-for="(quote, index) in quoteList" :key="index">
      <el-card class="box-card">
        <div slot="header" class="clearfix">
          <span>{{quote.quotCode}}</span>
          <el-button style="float: right; padding: 3px 0" type="text" @click="handleEdit(quote)">编辑</el-button>
        </div>
        <div class="text item">
          <div v-if="false">订单号Id:{{quote.quotId}}</div>
          <div>客户:{{quote.quotCustomerName}}</div>
          <div>项目名称:{{quote.quotProject}}</div>
          <div>提交状态:{{quote.quotApprovalStatus === '0' ? '待提交' : (quote.quotApprovalStatus === '1' ? '协助中' :
            (quote.quotApprovalStatus === '2' ? '已完成' : '已驳回'))}}</div>
          <div>询价日期:{{quote.quotInquiryDate}}</div>
          <div>报价日期:{{quote.quotQuotationDate}}</div>
          <div>创建时间:{{quote.createTime}}</div>
        </div>
      </el-card>
    </div>
  </div>
</template>

<script>
import { getQuoteList} from "@/api/mobile/quoteMobile/quoteMobile";
export default {
  name: "index",
  data() {
    return {
      quoteList: [],
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        quotCode: null,
        quotCustomerName: null,
        quotProject: null,
        quotApprovalStatus: null,
      },
    };
  },
  created() {
    this.queryQuoteList();
  },
  methods: {
    queryQuoteList() {
      getQuoteList(this.queryParams).then(response => {
        this.quoteList = response.data
        console.log(this.quoteList);
      });
    },
    handleSearch() {
      console.log(this.queryParams)
      getQuoteList(this.queryParams).then(response => {
        this.quoteList = response.data
        console.log(this.quoteList);
      });
    },
    handleAdd() {
      this.$router.push('/quoteMobile/add');
    },
    handleEdit(quote) {
      const quotId = quote.quotId
      this.$router.push("/quoteMobile/edit/edit/" + quotId);
      console.log(quote)
    }
  },

}
</script>

<style>
.search-container {
  display: flex;
  justify-content: center;
  margin-bottom: 10px;
  margin-top: 10px;
}

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


</style>