tenant-Platform/src/views/additionalOrder/order/index.vue

<template>
  <div class="order">
    <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
      <el-tab-pane name="first">
        <template #label>
          待审核（12）
        </template>
        <el-form label-width="100" label-position="left" :model="form">
          <el-row :gutter="20">
            <el-col :span="8">
              <el-form-item label="订单号">
                <el-input v-model="form.orderNo" placeholder="请输入订单号查找"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="业务员信息">
                <el-input v-model="form.salesman" placeholder="请输入业务员信息，手机号查找"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="业务员归属">
                <el-cascader
                  clearable
                  style="width: 100%"
                  v-model="form.salesmanCompany"
                  :options="option"
                  :props="tableProps"
                />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="保险公司">
                <el-select v-model="form.companyName" placeholder="请选择">
                  <el-option label="公司1" value="1" key="1"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="车牌号">
                <el-input v-model="form.licenseNo" placeholder="输入车牌号"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="录单时间">
                <el-date-picker
                  v-model="form.recordingTime"
                  type="daterange"
                  range-separator="至"
                  start-placeholder="开始时间"
                  end-placeholder="结束时间"
                  format="YYYY-MM-DD"
                  value-format="YYYY-MM-DD"
                  @change="timeChange"
                />
              </el-form-item>
            </el-col>
            <el-col :span="24" style="display: flex; justify-content: flex-end">
              <el-button type="primary" @click="search">查询</el-button>
              <el-button plain type="primary" @click="reset">重置</el-button>
            </el-col>
          </el-row>
        </el-form>
        <el-table
          :data="tableData"
          style="margin-top: 24px"
          hight="500"
        >
          <el-table-column label="订单号" prop="a" width="200">
            <template #default="scope">
              <el-button link type="primary" @click="handleDetail(scope.row)">{{ scope.row.quoteNo }}</el-button>
            </template>
          </el-table-column  >
          <el-table-column label="业务员信息" prop="realQuoteUserName" width="120"></el-table-column>
          <el-table-column label="业务员归属" prop="salesmanCompany" width="120"></el-table-column>
          <el-table-column label="保险公司" prop="companyName" width="120"></el-table-column>
          <el-table-column label="车牌号" prop="licenseNo" width="120"></el-table-column>
          <el-table-column label="交强险保费" prop="jqPremium" width="120"></el-table-column>
          <el-table-column label="车船税" prop="taxPremium" width="120"></el-table-column>
          <el-table-column label="商业险保费" prop="syPremium" width="120"></el-table-column>
          <el-table-column label="驾意险保费" prop="jyPremium" width="120"></el-table-column>
          <el-table-column label="保费总额" prop="sumPremium" width="120"></el-table-column>
          <el-table-column label="录单时间" prop="createTime" width="150"></el-table-column>
          <el-table-column label="录单人" prop="createBy" width="100"></el-table-column>
          <el-table-column label="操作" fixed="right" width="200">
            <template #default="scope">
              <el-button link type="primary">审核</el-button>
              <el-button link type="primary" @click="handleEdit(scope.row)">编辑</el-button>
              <el-button link type="primary" @click="handleDel(scope.row)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <div class="pagination">
          <el-pagination
            v-model:current-page="pages"
            v-model:page-size="size"
            :page-sizes="[10, 20, 30, 40]"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
          ></el-pagination>
        </div>
      </el-tab-pane>
      <el-tab-pane name="second">
        <template #label>
          审核通过（12）
        </template>
        <el-form label-width="100" label-position="left" :model="form">
          <el-row :gutter="20">
            <el-col :span="8">
              <el-form-item label="订单号">
                <el-input v-model="form.orderNo" placeholder="请输入订单号查找"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="业务员信息">
                <el-input v-model="form.salesman" placeholder="请输入业务员信息，手机号查找"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="业务员归属">
                <el-cascader
                  clearable
                  style="width: 100%"
                  v-model="form.salesmanCompany"
                  :options="option"
                  :props="tableProps"
                />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="保险公司">
                <el-select v-model="form.companyName" placeholder="请选择">
                  <el-option label="公司1" value="1" key="1"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="车牌号">
                <el-input v-model="form.licenseNo" placeholder="输入车牌号"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="录单时间">
                <el-date-picker
                  v-model="form.recordingTime"
                  type="daterange"
                  range-separator="至"
                  start-placeholder="开始时间"
                  end-placeholder="结束时间"
                  format="YYYY-MM-DD"
                  value-format="YYYY-MM-DD"
                  @change="timeChange"
                />
              </el-form-item>
            </el-col>
            <el-col :span="24" style="display: flex; justify-content: flex-end">
              <el-button type="primary" @click="search">查询</el-button>
              <el-button plain type="primary" @click="reset">重置</el-button>
            </el-col>
          </el-row>
        </el-form>
        <el-table
          :data="tableData"
          style="margin-top: 24px"
          hight="500"
        >
          <el-table-column label="订单号" prop="a" width="200">
            <template #default="scope">
              <el-button link type="primary" @click="handleDetail(scope.row)">{{ scope.row.quoteNo }}</el-button>
            </template>
          </el-table-column  >
          <el-table-column label="业务员信息" prop="auditName" width="120"></el-table-column>
          <el-table-column label="业务员归属" prop="salesmanCompany" width="120"></el-table-column>
          <el-table-column label="保险公司" prop="companyName" width="120"></el-table-column>
          <el-table-column label="车牌号" prop="licenseNo" width="120"></el-table-column>
          <el-table-column label="交强险保费" prop="jqPremium" width="120"></el-table-column>
          <el-table-column label="车船税" prop="taxPremium" width="120"></el-table-column>
          <el-table-column label="商业险保费" prop="syPremium" width="120"></el-table-column>
          <el-table-column label="驾意险保费" prop="jyPremium" width="120"></el-table-column>
          <el-table-column label="保费总额" prop="sumPremium" width="120"></el-table-column>
          <el-table-column label="录单时间" prop="createTime" width="150"></el-table-column>
          <el-table-column label="录单人" prop="createBy" width="100"></el-table-column>
          <el-table-column label="操作" fixed="right" width="200">
            <template #default="scope">
              <el-button link type="primary">审核</el-button>
              <el-button link type="primary" @click="handleEdit(scope.row)">编辑</el-button>
              <el-button link type="primary" @click="handleDel(scope.row)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <div class="pagination">
          <el-pagination
            v-model:current-page="pages"
            v-model:page-size="size"
            :page-sizes="[10, 20, 30, 40]"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
          ></el-pagination>
        </div>
      </el-tab-pane>
      <el-tab-pane name="third">
        <template #label>
          审核不通过（12）
        </template>
        <el-form label-width="100" label-position="left" :model="form">
          <el-row :gutter="20">
            <el-col :span="8">
              <el-form-item label="订单号">
                <el-input v-model="form.orderNo" placeholder="请输入订单号查找"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="业务员信息">
                <el-input v-model="form.salesman" placeholder="请输入业务员信息，手机号查找"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="业务员归属">
                <el-cascader
                  clearable
                  style="width: 100%"
                  v-model="form.salesmanCompany"
                  :options="option"
                  :props="tableProps"
                />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="保险公司">
                <el-select v-model="form.companyName" placeholder="请选择">
                  <el-option label="公司1" value="1" key="1"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="车牌号">
                <el-input v-model="form.licenseNo" placeholder="输入车牌号"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="录单时间">
                <el-date-picker
                  v-model="form.recordingTime"
                  type="daterange"
                  range-separator="至"
                  start-placeholder="开始时间"
                  end-placeholder="结束时间"
                  format="YYYY-MM-DD"
                  value-format="YYYY-MM-DD"
                  @change="timeChange"
                />
              </el-form-item>
            </el-col>
            <el-col :span="24" style="display: flex; justify-content: flex-end">
              <el-button type="primary" @click="search">查询</el-button>
              <el-button plain type="primary" @click="reset">重置</el-button>
            </el-col>
          </el-row>
        </el-form>
        <el-table
          :data="tableData"
          style="margin-top: 24px"
          height="500"
        >
          <el-table-column label="订单号" prop="a" width="200">
            <template #default="scope">
              <el-button link type="primary" @click="handleDetail(scope.row)">{{ scope.row.quoteNo }}</el-button>
            </template>
          </el-table-column  >
          <el-table-column label="业务员信息" prop="realQuoteUserName" width="120"></el-table-column>
          <el-table-column label="业务员归属" prop="salesmanCompany" width="120"></el-table-column>
          <el-table-column label="保险公司" prop="companyName" width="120"></el-table-column>
          <el-table-column label="车牌号" prop="licenseNo" width="120"></el-table-column>
          <el-table-column label="交强险保费" prop="jqPremium" width="120"></el-table-column>
          <el-table-column label="车船税" prop="taxPremium" width="120"></el-table-column>
          <el-table-column label="商业险保费" prop="syPremium" width="120"></el-table-column>
          <el-table-column label="驾意险保费" prop="jyPremium" width="120"></el-table-column>
          <el-table-column label="保费总额" prop="sumPremium" width="120"></el-table-column>
          <el-table-column label="录单时间" prop="createTime" width="150"></el-table-column>
          <el-table-column label="录单人" prop="createBy" width="100"></el-table-column>
          <el-table-column label="操作" fixed="right" width="200">
            <template #default="scope">
              <el-button link type="primary">审核</el-button>
              <el-button link type="primary" @click="handleEdit(scope.row)">编辑</el-button>
              <el-button link type="primary" @click="handleDel(scope.row)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <div class="pagination">
          <el-pagination
            v-model:current-page="pages"
            v-model:page-size="size"
            :page-sizes="[10, 20, 30, 40]"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
          ></el-pagination>
        </div>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script setup lang="ts">
import { useRouter } from 'vue-router'
import api from '@/api'
import { ElMessage, ElMessageBox } from "element-plus";

const myRouter = useRouter()

let activeName = ref('first')
let type = ref('first')
const handleClick = (e) => {
  pages.value = 1
  size.value = 10
  reset()
  type.value = e.props.name
  switch (e.props.name) {
    case 'first':
      initData(0)
      break;
    case 'second':
      initData(1)
      break;
    case 'third':
      initData(2)
      break;
  }
}

let form = ref({})
const tableProps = ref({
  value: "id",
  label: "name",
  children: "children",
  checkStrictly: true,
});
let option = ref([])
const timeChange = (val) => {

}
// 搜索
const search = () => {
  switch (type.value) {
    case 'first':
      initData(0)
      break;
    case 'second':
      initData(1)
      break;
    case 'third':
      initData(2)
      break;
  }
}
const reset = () => {
  form.value = {}
}

// 列表
let tableData = ref([])
const handleDetail = (row) => {
  myRouter.push({
    path: '/additionalOrder/order/orderDetail',
    query: {
      id: row.id
    }
  })
}
const handleEdit = (row) => {
  myRouter.push({
    path: '/additionalOrder/additionalOrderIndex',
    query: {
      id: row.id
    }
  })
}
const handleDel = (row) => {
  ElMessageBox({
    title: '提示',
    message: '确认要删除当前数据吗?',
    confirmButtonText: "确认",
    cancelButtonText: "取消",
    type: "warning",
    center:true
  }).then((action) => {
    if(action === 'confirm') {
      api.additionalApi.deleteById(row.id).then((res: any) => {
        if(res.code == 200) {
          ElMessage({
            message: res.msg,
            type: 'success'
          })
          switch (type.value) {
            case 'first':
              initData(0)
              break;
            case 'second':
              initData(1)
              break;
            case 'third':
              initData(2)
              break;
          }
        } else {
          ElMessage({
            message: res.msg,
            type: 'warning'
          })
        }
      })
    }
  })
}

// 分页
let pages = ref(1)
let size = ref(10)
let total = ref(0)
const handleSizeChange = (size) => {
  size.value = size
  initData(type.value)
}
const handleCurrentChange = (page) => {
  pages.value = page
  initData(type.value)
}

const initData = (type) => {
  api.additionalApi.pageList({
    pages: pages.value,
    size: size.value,
    isTemporarily: 0,
    auditStatus: type,
    orderNo: form.value.orderNo,
    salesman: form.value.salesman,
    salesmanCompany: form.value.salesmanCompany,
    companyName: form.value.companyName,
    licenseNo: form.value.licenseNo,
    recordingTime: form.value.recordingTime
  }).then((res: any) => {
    if(res.code == 200) {
      tableData.value = res.data.records
      total.value = res.data.total
    } else {
      ElMessage({
        message: res.msg,
        type: 'warning'
      })
    }
  })
}

onMounted(() => {
  initData(0);
})

</script>

<style scoped lang="scss">
.order{
  width: 100%;
  height: calc(100vh - 120px);
  background: #FFFFFF;
  padding: 24px;
  overflow-y: auto;
  .pagination{
    margin-top: 24px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
  }
}
</style>