JNBusiness/ruoyi-ui/src/views/redBook/quots.vue

<template>
  <div class="app-container">
    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
      <el-form-item label="创建时间">
        <el-date-picker
          v-model="dateRange"
          style="width: 240px"
          value-format="yyyy-MM-dd HH:mm:ss"
          type="daterange"
          range-separator="-"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          :default-time="['00:00:00', '23:59:59']"
        ></el-date-picker>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>

    <el-table width="100%"  v-loading="loading" :data="quotsList" :row-class-name="rowQuotsIndex">
      <el-table-column fixed="left" label="序号" align="center" prop="index" width="50"/>
      <el-table-column fixed="left" label="操作" align="center" width="60" class-name="small-padding fixed-width">
        <template slot-scope="scope">
          <el-button type="text" @click="handleDeleteClick(scope.row)">删除</el-button>
        </template>
      </el-table-column>
      <el-table-column label="quot_id" align="center" prop="quot_id" v-if="false"/>
      <el-table-column label="报价单号" width="260" align="center" prop="quotCode">
        <template slot-scope="scope">
          <el-link :underline="false" type="primary" @click="handleDetail(scope.row)">{{scope.row.quotCode}}</el-link>
        </template>
      </el-table-column>
      <el-table-column label="报价客户" width="200" align="center" prop="quotCustomer" />
      <el-table-column label="报价项目" width="200" align="center" prop="quotProject" />
      <el-table-column label="联系人"align="center" prop="quotLxr" />
      <el-table-column label="联系人电话"align="center" prop="quotLxrdh" />
      <el-table-column label="创建日期" width="200" align="center" prop="createTime" />
    </el-table>

    <!-- 报价详情对话框 -->
    <el-dialog :title="title" :visible.sync="open" width="1050px" append-to-body>
      <el-form ref="form" :model="form" label-width="100px">
        <el-row :gutter="8">
          <el-col :span="12">
            <el-form-item label="询价单位" prop="quotCustomer">
              <el-input v-model="form.quotCustomer" :disabled="true"/>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="项目名称" prop="quotProject">
              <el-input v-model="form.quotProject" :disabled="true"/>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="8">
          <el-col :span="12">
            <el-form-item label="联系人" prop="quotLxr">
              <el-input v-model="form.quotLxr" :disabled="true"/>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="联系电话" prop="quotLxrdh">
              <el-input v-model="form.quotLxrdh" :disabled="true"/>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="8">
          <el-col :span="12">
            <el-form-item>
              总价:<span style="color:red;font-size: 20px">{{sumSelectedResultData}} 元</span>
              <el-select v-model="form.rbDateUid" style="width: 60%;float: right" :disabled="true">
                <el-option
                  v-for="item in versionList"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                  @click.native="selectRbDate(item.value)"
                />
              </el-select>
            </el-form-item>

          </el-col>
        </el-row>

        <el-table width="100%;" :row-class-name="selectedResultIndex" :data="selectedResultData" height="400px">
          <el-table-column fixed="left" label="" align="center" prop="index" width="50"/>
          <el-table-column label="版本uid" align="center" prop="uid_0" v-if="false"/>
          <el-table-column fixed="left" label="产品型号" align="center" prop="name_0" width="180" />
          <el-table-column label="型号" align="center" prop="name_1" v-if="false"/>
          <el-table-column label="规格" align="center" prop="spec" v-if="false"/>
          <el-table-column label="电压" align="center" prop="voltage"/>
          <el-table-column label="红本价(元)" align="center" prop="price"/>
          <el-table-column label="单位" align="center" prop="stu"/>
          <el-table-column label="一次折扣" align="center" prop="per"/>
          <el-table-column label="二次折扣" align="center" prop="per2"/>
          <el-table-column label="单价" align="center" prop="setPrice"/>
          <el-table-column label="数量调整" align="center" prop="count"/>
          <el-table-column label="总价" align="center" prop="allPrice"/>
        </el-table>
      </el-form>
    </el-dialog>
    <pagination
      v-show="total>0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getList"
    />
  </div>
</template>

<script>
  import { versionList,listQuots,getQuotDetail,deleteQuots } from "@/api/redBook/redBook";

  export default {
      name: "quots",
      data() {
        return {
          // 遮罩层
          loading: true,
          // 显示搜索条件
          showSearch: true,
          // 总条数
          total: 0,
          //报价单数据
          quotsList: [],
          // 时间范围
          dateRange: [],
          //调价日期
          versionList: [], // 调价版本数据列表
          // 查询参数
          queryParams: {
            pageNum: 1,
            pageSize: 10
          },

          //表单
          form: {},
          // 弹出层标题
          title: "",
          // 是否显示弹出层
          open: false,
          // 列表数据
          selectedResultData: []
        }
      },
      created() {
        this.getList();
        this.getVersionList();
      },
      methods: {
        /** 查询报价单列表 */
        getList() {
          this.loading = true;
          listQuots(this.addDateRange(this.queryParams, this.dateRange)).then(response => {
            this.quotsList = response.rows;
            this.total = response.total;
            this.loading = false;
          });
        },
        //获取调价日期
        getVersionList(){
          versionList(this.queryParams).then(response => {
            this.versionList = response.versionList;
          });
        },

        rowQuotsIndex({ row, rowIndex }) {
          row.index = rowIndex + 1;
        },
        /** 搜索按钮操作 */
        handleQuery() {
          this.queryParams.pageNum = 1;
          this.getList();
        },
        /** 重置按钮操作 */
        resetQuery() {
          this.resetForm("queryForm");
          this.handleQuery();
        },

        /** 查看详情按钮操作 */
        handleDetail(row) {
          const quotId = row.quot_id;
          getQuotDetail(quotId).then(response => {
            this.form = response.data;
            this.selectedResultData = response.data.selectedResultData;
            this.open = true;
            this.title = "报价单信息";
          })
        },
        /** 数据序号 */
        selectedResultIndex({ row, rowIndex }) {
          row.index = rowIndex + 1;
        },

        /** 删除报价单 */
        handleDeleteClick(row) {
          const quotId = row.quot_id;
          deleteQuots(quotId).then(response => {
            this.$message.success("删除成功");
            this.getList();
          })
        },
      },
      computed: {
        // 数据汇总
        sumSelectedResultData() {
          const allPrice = this.selectedResultData.reduce((sum, row) => sum + parseFloat(row.allPrice), 0);
          return allPrice.toFixed(2);
        },
      },
    }
</script>

<style scoped>

</style>