tenant-Platform/src/views/quoteConfig/project/project.vue

<template>
  <PageMain class="vh100">
    <div class="flex  h-full">
      <div class="w-282px h-full relative flex-shrink-0 member-tree box-border">
        <el-input class="w-250px m-l-8px" placeholder="请输入保险公司名称" v-model="company" @keyup.enter="searchCompany">
          <template #append>
            <el-button icon="Search" link @click="searchCompany" />
          </template>
        </el-input>
        <div style="height: calc(100% - 80px); overflow: auto;" class="m-t-14px">
          <div v-for="item, index in filterList" :key="item.id" :class="companyIndex == index ? 'on' : 'role-item'"
            @click="companyChose(item, index)"
            class="h-64px w-266px p-[0_8px] flex flex-col items-start justify-center">
            <div class="text-16px color-[#333]">{{ item.nameSimple }}</div>
          </div>
        </div>
      </div>
      <div class="w-[calc(100%-282px)]">
        <div
          class="flex m-r--16px m-t-4px h-52px justify-between items-center p-b-20px p-l-24px p-r-24px b-b-(1px solid #EEEEEE)">
          <div class="">

            <div class="text-20px color-[#333] font-500">险种方案配置</div>
            <div class="text-14px color-[#999]">配置各家保险公司险种方案套餐，报价时根据规则信息匹配符合报价车辆的保司与保司内的方案</div>
          </div>
          <div>
            <ElButton type="primary" @click="addProject">添加新方案</ElButton>
          </div>
        </div>
        <el-form class="p-[20px_8px_0_24px]" :model="projectForm" ref="projectRefs">
          <el-row :gutter="20">
            <el-col :span="8">
              <el-form-item label="方案类型">
                <el-select clearable v-model="projectForm.schemeType" placeholder="请选择" @change="search">
                  <el-option key="1" value="1" label="基础方案"></el-option>
                  <el-option key="2" value="2" label="自选方案"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="险种">
                <el-select clearable v-model="projectForm.productId" placeholder="请选择" @change="search">
                  <el-option v-for="item in insuranceType" :key="item.value" :value="item.value"
                    :label="item.label"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item>
                <el-input clearable prefix-icon="search" placeholder="输入规则描述查找" @keyup.enter="search"
                  v-model="projectForm.ruleDesc"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
        <el-table class="p-l-24px" :data="tableData" height="calc(100% - 182px)">
          <el-table-column label="方案名称" prop="schemeName"></el-table-column>
          <el-table-column label="方案描述" prop="description"></el-table-column>
          <el-table-column label="方案类型" prop="schemeType">
            <template #default="scope">
              {{ scope.row.schemeType == '1' ? '基础方案' : scope.row.schemeType == '2' ? '自选方案' : '' }}
            </template>
          </el-table-column>
          <el-table-column label="险种" prop="productName"></el-table-column>
          <el-table-column label="排序" prop="sort"></el-table-column>
          <el-table-column label="驾意险" prop="drivingIntentionNum"></el-table-column>
          <el-table-column label="规则描述" prop="ruleDesc"></el-table-column>
          <el-table-column label="操作">
            <template #default="scope">
              <el-button link type="primary" @click="handleEdit(scope.row)">编辑</el-button>
              <el-button link type="primary" @click="handleCopy(scope.row)">复制</el-button>
              <el-button link type="primary" @click="handleDel(scope.row)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <div class="paginationBox p-r-8px">
          <el-pagination v-model:current-page="currentPage" v-model:page-size="pageSize" :page-sizes="[10, 20, 30, 40]"
            layout="total, sizes, prev, pager, next, jumper" :total="total" @size-change="handleSizeChange"
            @current-change="handleCurrentChange"></el-pagination>
        </div>
      </div>
    </div>
    <!-- <el-row :gutter="20" style="height: 100%; padding: 10px">
      <el-col :span="4">
        <el-input placeholder="请输入保险公司名称" v-model="company" prefix-icon="search"
          @keyup.enter="searchCompany"></el-input>
        <div class="companyList">
          <div class="companyItem" :class="{ 'active': companyIndex === index }" v-for="(item, index) in filterList"
            @click="companyChose(item, index)">{{ item.nameSimple }}</div>
        </div>
      </el-col>
      <el-col :span="20">
        <el-row :gutter="20" align="middle">
          <el-col :span="20">
            <h4>险种方案配置</h4>
            <p>配置各家保险公司险种方案套餐，报价时根据规则信息匹配符合报价车辆的保司与保司内的方案</p>
          </el-col>
          <el-col :span="4">
            <el-button icon="plus" type="primary" @click="addProject">添加新方案</el-button>
          </el-col>
        </el-row>
        <el-divider></el-divider>
        <el-form :model="projectForm" ref="projectRefs">
          <el-row :gutter="20">
            <el-col :span="4">
              <el-form-item label="方案类型">
                <el-select clearable v-model="projectForm.schemeType" placeholder="请选择" @change="search">
                  <el-option key="1" value="1" label="基础方案"></el-option>
                  <el-option key="2" value="2" label="自选方案"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="4">
              <el-form-item label="险种">
                <el-select clearable v-model="projectForm.productId" placeholder="请选择" @change="search">
                  <el-option v-for="item in insuranceType" :key="item.value" :value="item.value"
                    :label="item.label"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="4">
              <el-form-item>
                <el-input clearable prefix-icon="search" placeholder="输入规则描述查找" @keyup.enter="search"
                  v-model="projectForm.ruleDesc"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
        <el-table :data="tableData" height="600">
          <el-table-column label="方案名称" prop="schemeName"></el-table-column>
          <el-table-column label="方案描述" prop="description"></el-table-column>
          <el-table-column label="方案类型" prop="schemeType">
            <template #default="scope">
              {{ scope.row.schemeType == '1' ? '基础方案' : scope.row.schemeType == '2' ? '自选方案' : '' }}
            </template>
          </el-table-column>
          <el-table-column label="险种" prop="productName"></el-table-column>
          <el-table-column label="驾意险" prop="drivingIntentionNum"></el-table-column>
          <el-table-column label="规则描述" prop="ruleDesc"></el-table-column>
          <el-table-column label="操作">
            <template #default="scope">
              <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="paginationBox">
          <el-pagination v-model:current-page="currentPage" v-model:page-size="pageSize" :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-col>
    </el-row> -->
  </PageMain>
  <el-dialog :close-on-click-modal="false" v-model="copyDialog" title="复制" width="600">
    <el-form>
      <el-form-item label="险种类型">
        <el-select v-model="insuranceTypeValue" placeholder="请选择险种类型">
          <el-option v-for="item in insuranceType" :key="item.value" :value="item.value"
            :label="item.label"></el-option>
        </el-select>
      </el-form-item>
    </el-form>
    <template #footer>
      <el-button size="small" type="primary" :loading="loading" @click="submitCopy">确定</el-button>
    </template>
  </el-dialog>
</template>

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

const myRouter = useRouter()
const muRoute = useRoute()
const searchCompany = () => {
  currentPage.value = 1
  pageSize.value = 10
  initData()
}
let company = ref('')

const filterList = computed(() => {
  return companyOption.value.filter(a => a.nameSimple.includes(company.value))
})

const search = () => {
  initData()
}
// 保险公司
let companyOption = ref([])
let companyIndex = ref(0)
let companyId = ref('')

const initCompany = () => {
  api.projectApi.getCompanyList().then(res => {
    if (res.code == 200) {
      companyOption.value = res.data
      if (muRoute.query.id) {
        companyIndex.value = companyOption.value.findIndex(a => a.id == muRoute.query.id)
      } else {
        companyIndex.value = 0
      }
      companyId.value = muRoute.query.id || companyOption.value[companyIndex.value].id
      initData()
    } else {
      ElMessage({
        message: res.msg,
        type: 'warning'
      })
    }
  })
}
const companyChose = (item, index) => {
  companyIndex.value = index
  companyId.value = item.id
  initData()
}

const addProject = () => {
  myRouter.push({
    path: '/quoteConfig/agreement/project/projectAdd',
    query: {
      companyId: companyId.value
    }
  })
}

let projectForm = ref({})
let tableData = ref([])
// 分页数据
let currentPage = ref(0)
let pageSize = ref(10)
let total = ref(0)

const initData = () => {
  api.projectApi.getSchemeList({
    pages: currentPage.value,
    size: pageSize.value,
    companyId: companyId.value,
    productId: projectForm.value.productId,
    schemeType: projectForm.value.schemeType,
    ruleDesc: projectForm.value.ruleDesc
  }).then(res => {
    if (res.code == 200) {
      tableData.value = res.data.records
      total.value = res.data.total
    } else {
      ElMessage({
        message: res.msg,
        type: 'warning'
      })
    }
  })
}
// 险种类型
let insuranceType = ref([])
const initType = () => {
  api.commonApi.personInfo('insurance_type').then(res => {
    if (res.code == 200) {
      insuranceType.value = res.data
    } else {
      ElMessage({
        message: res.msg,
        type: 'warning'
      })
    }
  })
}
const handleSizeChange = (size) => {
  pageSize.value = size
  initData()
}
const handleCurrentChange = (page) => {
  currentPage.value = page
  initData()
}

// 编辑
const handleEdit = (row) => {
  myRouter.push({
    path: '/quoteConfig/agreement/project/projectAdd',
    query: {
      id: row.id,
      companyId: companyId.value,
      productId: row.productId
    }
  })
}
// 删除
const handleDel = (row) => {
  ElMessageBox({
    title: '删除方案',
    message: '确定要删除该方案吗？',
    type: 'warning',
    showCancelButton: true,
    confirmButtonText: '确定',
    cancelButtonText: '取消',
  }).then((action) => {
    if (action === 'confirm') {
      api.projectApi.deleteScheme({
        id: row.id
      }).then(res => {
        if (res.code == 200) {
          ElMessage({
            message: res.msg,
            type: 'success'
          })
          initData()
        } else {
          ElMessage({
            message: res.msg,
            type: 'warning'
          })
        }
      })
    }
  }).catch((action) => {

  })
}

const copyDialog = ref(false)
const copyId = ref('')
const insuranceTypeValue = ref('')
/** 复制操作处理：记录当前行的ID并打开复制确认对话框 */
const handleCopy = (row) => {
  copyId.value = row.id
  copyDialog.value = true
}

const loading = ref(false)
/** 提交复制操作，校验险种选择后触发保险公司查询 */
const submitCopy = () => {
  if (insuranceTypeValue.value.length == 0) {
    ElMessage({
      message: '请选择险种',
      type: 'warning'
    })
    return
  }
  const params = {
    schemeId: copyId.value,
    productCode: insuranceTypeValue.value
  }
  loading.value = true
  api.projectApi.copyScheme(params).then(res => {
    if (res.code == 200) {
      ElMessage({
        message: res.msg,
        type: 'success'
      })
      copyDialog.value = false
      searchCompany()
    }
  }).finally(() => loading.value = false)
}

onMounted(() => {
  // initData()
  initCompany()
  initType()
})

</script>

<style scoped lang="scss">
:deep(.main-container) {
  padding: 16px;
}

:deep(.el-input-group__append) {
  color: #fff;
  background: linear-gradient(91deg, #4FCAFF 0%, #2B62FF 100%);
}

.member-tree {
  &::after {
    content: '';
    position: absolute;
    height: calc(100% + 32px);
    width: 1px;
    background-color: #EEEEEE;
    top: -16px;
    right: 0;
    bottom: -16px;
  }
}

.role-item {
  cursor: pointer;
}

.on {
  cursor: pointer;
  background: #F4FAFF;
  border-right: 1px solid #0083FF;
}

.paginationBox {
  display: flex;
  justify-content: end;
  margin-top: 10px;
}
</style>