ss-crm-manage-web/src/views/SchoolManagement/Class/index.vue

<template>
  <div>
    <el-form :model="searchForm" ref="searchRef" inline label-width="0">
      <el-form-item>
        <el-input
          v-model="searchForm.schoolName"
          placeholder="请输入驾校名称"
          @keyup.enter="handleQuery"
        />
      </el-form-item>
      <el-form-item>
        <el-input
          v-model="searchForm.placeName"
          placeholder="请输入场地名称"
          @keyup.enter="handleQuery"
        />
      </el-form-item>
      <el-form-item>
        <el-input
          v-model="searchForm.className"
          placeholder="请输入班型名称"
          @keyup.enter="handleQuery"
        />
      </el-form-item>
      <el-form-item>
        <el-select
          v-model="searchForm.cartypeId"
          placeholder="请选择驾照类型"
          clearable
          filterable
          @change="handleQuery"
        >
          <el-option
            v-for="item in cartypeOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button plain @click="handleQuery">查询</el-button>
        <el-button plain @click="handleReset">重置</el-button>
        <el-button type="primary" plain @click="handleOpenDialog('create')">新增</el-button>
        <el-button type="danger" @click="handleBatchDelete">批量删除</el-button>
        <el-button type="warning" @click="handleBatchStatus">批量启/停用</el-button>
      </el-form-item>
    </el-form>

    <el-row :gutter="20">
      <el-col :span="6" :offset="0">
        <div class="head-container" style="max-height: 700px; overflow-y: auto">
          <el-tree
            ref="tree"
            :data="schoolOption.filter((item) => item.label.includes(searchForm.schoolName))"
            accordion
            node-key="id"
            :default-expanded-keys="selectNodes.map((item) => item.id)"
            @node-click="handleNodeClick"
          />
        </div>
      </el-col>
      <el-col :span="18" :offset="0">
        <el-table
          :data="tableList"
          v-loading="loading"
          border
          @selection-change="handleSelectionChange"
        >
          <el-table-column type="selection" width="50" />
          <el-table-column type="index" label="序号" width="60" />
          <el-table-column
            v-for="col in columns"
            :prop="col.props"
            :key="col.props"
            :label="col.label"
            :width="col.width"
            show-overflow-tooltip
          />
          <el-table-column label="状态" width="80">
            <template #default="{ row }">
              <el-switch
                v-model="row.status"
                :active-value="1"
                :inactive-value="0"
                @change="handleChangeStatus(row)"
              />
            </template>
          </el-table-column>
          <el-table-column label="操作" width="120px">
            <template #default="{ row }">
              <el-button
                type="primary"
                style="padding: 0"
                text
                @click="handleOpenDialog('update', row)"
              >
                修改
              </el-button>
              <el-button type="danger" style="padding: 0" text @click="handleRemove(row)">
                删除
              </el-button>
            </template>
          </el-table-column>
        </el-table>
        <!-- 分页 -->
        <Pagination
          v-model:limit="searchForm.pageSize"
          v-model:page="searchForm.pageNum"
          :total="total"
          @pagination="getList"
        />
      </el-col>
    </el-row>
    <el-dialog title="批量修改" v-model="batchStatusDialogShow" width="400px">
      <el-form :model="statusForm" ref="statusRef" label-width="80px">
        <el-form-item label="选择状态" prop="status">
          <el-radio-group v-model="statusForm.status">
            <el-radio :label="1"> 启用 </el-radio>
            <el-radio :label="2"> 禁用 </el-radio>
          </el-radio-group>
        </el-form-item>
      </el-form>

      <template #footer>
        <span>
          <el-button @click="batchStatusDialogShow = false">取 消</el-button>
          <el-button type="primary" @click="handleSureStatus">确 认</el-button>
        </span>
      </template>
    </el-dialog>

    <DialogClass ref="ClassDialog" @success="getList" />
  </div>
</template>

<script setup name="Class">
import DialogClass from './Comp/DialogClass.vue'
const message = useMessage() // 消息弹窗

const loading = ref(false)
const total = ref(0)

const tableList = ref([])
// const schoolDialog = ref()

const searchForm = ref({
  schoolName: '',
  placeName: undefined,
  className: undefined,
  cartypeId: undefined,
  pageNum: 1,
  pageSize: 20
})

const cartypeOptions = ref([])
const schoolOption = ref([])
const selectNodes = ref([])

function getSchoolList() {
  schoolOption.value = [
    {
      id: 179,
      label: '安审驾校',
      level: 1,
      children: [{ id: 308, label: '（皖西）安审驾校已备案', level: 2 }]
    },
    {
      id: 141,
      label: '通顺驾校',
      level: 1,
      children: [
        { id: 173, label: '（皖北）通顺驾校信地报名点', level: 2 },
        { id: 320, label: '（皖北）通顺驾校包河花园训练基地《备案》', level: 2 },
        { id: 351, label: '（皖西）通顺驾校总校（D）已备案', level: 2 },
        { id: 359, label: '（皖北）通顺驾校龙岗训练基地《备案》', level: 2 }
      ]
    },
    {
      id: 178,
      label: '新宇驾校',
      level: 1,
      children: [{ id: 243, label: '（皖北）新宇驾校磨店校区《备案》', level: 2 }]
    },
    {
      id: 176,
      label: '鑫缘驾校',
      level: 1,
      children: [{ id: 385, label: '（皖北）鑫缘驾校南二环校区', level: 2 }]
    },
    { id: 194, label: '环宇驾校', level: 1, children: [] },
    {
      id: 193,
      label: '舒城同兴驾校',
      level: 1,
      children: [
        { id: 414, label: '舒城同兴驾校南港训练场', level: 2 },
        { id: 415, label: '同兴驾校杭埠分校训练场', level: 2 },
        { id: 416, label: '同兴驾校城区训练场', level: 2 }
      ]
    },
    { id: 195, label: '新快捷驾校', level: 1, children: [] },
    {
      id: 187,
      label: '鑫金陵驾校',
      level: 1,
      children: [{ id: 405, label: '（皖南）鑫金陵建大校区', level: 2 }]
    },
    { id: 186, label: '途安驾校', level: 1, children: [] },
    { id: 163, label: '金灵驾校', level: 1, children: [] },
    { id: 185, label: '金湖驾校', level: 1, children: [] },
    {
      id: 172,
      label: '精越驾校',
      level: 1,
      children: [
        { id: 111, label: '（皖北）精越驾校恒大校区 《夜训》《备案》', level: 2 },
        { id: 386, label: '（皖北）精越驾校岗集校区已备案', level: 2 }
      ]
    },
    {
      id: 184,
      label: '宏昌驾校',
      level: 1,
      children: [{ id: 394, label: '（皖西）宏昌驾校海棠校区已备案', level: 2 }]
    },
    {
      id: 183,
      label: '启点驾校',
      level: 1,
      children: [
        { id: 390, label: '（皖南）启点驾校（高新校区）', level: 2 },
        { id: 391, label: '（皖南）启点驾校（蜀山校区）', level: 2 }
      ]
    },
    {
      id: 182,
      label: '泓运驾校',
      level: 1,
      children: [
        { id: 401, label: '（皖南）泓运驾校临湖校区', level: 2 },
        { id: 402, label: '（皖南）泓运始信路总校', level: 2 }
      ]
    },
    {
      id: 171,
      label: '三联驾校',
      level: 1,
      children: [
        { id: 136, label: '（皖西）三联泰科驾校十里庙校区已备案', level: 2 },
        { id: 380, label: '（皖南）三联泰科经开校区', level: 2 }
      ]
    },
    {
      id: 181,
      label: '金冈山驾校',
      level: 1,
      children: [{ id: 161, label: '（皖北）金冈山驾校宁国路训练场《备案》', level: 2 }]
    },
    { id: 167, label: '菜鸟学车', level: 1, children: [{ id: 218, label: '众顺驾校', level: 2 }] },
    { id: 101, label: '金马驾校', level: 1, children: [] },
    {
      id: 161,
      label: '瑞星驾校',
      level: 1,
      children: [{ id: 221, label: '（皖西）瑞星驾校花峰路校区已备案', level: 2 }]
    },
    {
      id: 165,
      label: '久安驾校',
      level: 1,
      children: [{ id: 325, label: '（皖北）久安驾校环湖路训练基地 《备案》', level: 2 }]
    },
    {
      id: 146,
      label: '金新驾校',
      level: 1,
      children: [
        { id: 112, label: '（皖北）金新驾校（悠然）京商报名点', level: 2 },
        { id: 172, label: '（皖北）金新驾校天水路校区D《备案》', level: 2 },
        { id: 229, label: '（皖北）金新驾校磨店分校《备案》', level: 2 },
        { id: 232, label: '（皖北）金新驾校新蚌埠路训练场D,B2《备案》', level: 2 },
        { id: 233, label: '（皖北）金新驾校澥河路校区《备案》', level: 2 },
        { id: 387, label: '（皖北）金新驾校东二环校区《备案》', level: 2 },
        { id: 397, label: '（皖北）金新驾校北京路校区《备案》', level: 2 }
      ]
    },
    {
      id: 115,
      label: '畅通驾校',
      level: 1,
      children: [{ id: 350, label: '（皖西）畅通临泉路', level: 2 }]
    },
    { id: 117, label: '一级合伙教练场地', level: 1, children: [] },
    {
      id: 125,
      label: '金武联驾校',
      level: 1,
      children: [
        { id: 163, label: '（皖南）金武联驾校柳树塘校区（已备案）', level: 2 },
        { id: 190, label: '（皖北）金武联驾校大店报名点（B2 D）', level: 2 },
        {
          id: 222,
          label: '（皖北）金武联总校训练场（客货运网约车出租车资格证）《备案》',
          level: 2
        },
        { id: 248, label: '（皖西)金武联驾校四里河校区已备案', level: 2 },
        { id: 291, label: '（皖南）金冈山李河湾校区', level: 2 },
        { id: 301, label: '（皖北）金武联裕溪路训练场《备案》', level: 2 },
        { id: 315, label: '（皖北）金新。金武联驾校（杨岗报名大厅）（D）B2', level: 2 },
        { id: 346, label: '（皖南）金武联高速时代广场训练基地', level: 2 },
        { id: 378, label: '（皖北）金武联大店训练场《备案》', level: 2 }
      ]
    },
    {
      id: 126,
      label: '巢湖顺达驾校',
      level: 1,
      children: [
        { id: 194, label: '顺达驾校半汤分校', level: 2 },
        { id: 265, label: '顺达驾校裕溪路训练基地', level: 2 }
      ]
    },
    { id: 128, label: '悠然驾校', level: 1, children: [] },
    {
      id: 140,
      label: '徽安驾校',
      level: 1,
      children: [{ id: 162, label: '（皖南）徽安驾校科技训练基地', level: 2 }]
    },
    {
      id: 142,
      label: '新安驾校',
      level: 1,
      children: [
        { id: 263, label: '（皖南）新安驾校（已备案）', level: 2 },
        { id: 393, label: '（皖南）新安黄山路校区', level: 2 }
      ]
    },
    {
      id: 144,
      label: '万锦驾校',
      level: 1,
      children: [
        { id: 258, label: '（皖北）万锦驾校磨店《备案》', level: 2 },
        { id: 327, label: '（皖南）万锦驾校冬梅路校区（已备案）', level: 2 }
      ]
    },
    { id: 123, label: '康庄驾校', level: 1, children: [] },
    {
      id: 147,
      label: '晨泰驾校',
      level: 1,
      children: [{ id: 245, label: '（皖北）晨泰驾校金梅路校区《备案》', level: 2 }]
    },
    { id: 158, label: '金岗山驾校（摩托车）', level: 1, children: [] },
    { id: 160, label: '陪练陪驾', level: 1, children: [] },
    { id: 112, label: '浩宇驾校', level: 1, children: [] },
    {
      id: 139,
      label: '合顺驾校',
      level: 1,
      children: [{ id: 332, label: '（皖西）合顺驾校临泉路校区（D）已备案', level: 2 }]
    },
    {
      id: 152,
      label: '新桥驾校',
      level: 1,
      children: [{ id: 389, label: '（皖北）新桥驾校东七训练场《备案》', level: 2 }]
    },
    {
      id: 130,
      label: '金路驾校',
      level: 1,
      children: [{ id: 208, label: '（皖南）金路名邦报名训练基地', level: 2 }]
    },
    { id: 133, label: '众安驾校', level: 1, children: [] },
    {
      id: 116,
      label: '顺通驾校',
      level: 1,
      children: [{ id: 410, label: '顺通驾校总校', level: 2 }]
    },
    {
      id: 148,
      label: '国安驾校',
      level: 1,
      children: [
        { id: 400, label: '（皖南）国安包公路校区', level: 2 },
        { id: 403, label: '(皖南）国安三河校区', level: 2 }
      ]
    },
    { id: 135, label: '安申驾校', level: 1, children: [] },
    { id: 110, label: '九号驾校', level: 1, children: [{ id: 349, label: '九号驾校', level: 2 }] },
    { id: 129, label: '新地驾校', level: 1, children: [] },
    {
      id: 113,
      label: '世纪驾校',
      level: 1,
      children: [
        { id: 146, label: '（皖西）世纪驾校晨光训练场已备案', level: 2 },
        { id: 209, label: '（皖西）世纪驾校桂王路六中训练基地已备案', level: 2 },
        { id: 223, label: '（皖西）世纪驾校撮镇义和训练场已备案', level: 2 },
        { id: 246, label: '（皖西）世纪驾校包公像训练场已备案', level: 2 }
      ]
    },
    { id: 103, label: '起航驾校', level: 1, children: [] },
    {
      id: 137,
      label: '庐州驾校',
      level: 1,
      children: [{ id: 155, label: '（皖西）庐州驾校北五里井校区已备案', level: 2 }]
    },
    {
      id: 143,
      label: '长安驾校',
      level: 1,
      children: [
        { id: 101, label: '（皖西）长安驾校蜀山校区已备案', level: 2 },
        { id: 104, label: '（皖北）长安驾校明光路训练基地《备案》', level: 2 },
        { id: 199, label: '（皖北）长安驾校龙岗报名点', level: 2 },
        { id: 204, label: '（皖西）长安驾校临泉路总校已备案', level: 2 },
        { id: 259, label: '（皖南）长安经开校区（已备案）', level: 2 },
        { id: 266, label: '长安驾校名人馆训练基地（C1 C2 已备案)', level: 2 },
        { id: 290, label: '（皖北）长安驾校高铁南站报名训练场《备案》', level: 2 },
        { id: 300, label: '（皖北）长安驾校龙岗训练场《备案》', level: 2 },
        { id: 316, label: '长安驾校万达城报名点（C2 早晚）', level: 2 },
        { id: 396, label: '（皖南）长安南七分校', level: 2 }
      ]
    },
    {
      id: 153,
      label: '肥东金荣驾校',
      level: 1,
      children: [
        { id: 107, label: '金荣驾校', level: 2 },
        { id: 181, label: '金荣驾校店埠镇训练基地', level: 2 },
        { id: 358, label: '（皖南）金荣驾校报名点', level: 2 }
      ]
    },
    { id: 170, label: '和安驾校', level: 1, children: [] },
    {
      id: 119,
      label: '平安驾校',
      level: 1,
      children: [
        { id: 250, label: '平安驾校总部报名点', level: 2 },
        { id: 267, label: '巢湖市平安驾校夏阁训练场', level: 2 },
        { id: 312, label: '巢湖平安驾校市区训练场', level: 2 },
        { id: 353, label: '巢湖市平安驾校巢湖学院训练场', level: 2 }
      ]
    },
    { id: 168, label: '心诚驾校', level: 1, children: [] },
    {
      id: 132,
      label: '新亚驾校',
      level: 1,
      children: [{ id: 164, label: '新亚驾校汽车站训练基地C2', level: 2 }]
    },
    {
      id: 138,
      label: '五星驾校',
      level: 1,
      children: [
        { id: 134, label: '（皖西）五星驾岗集校训练场', level: 2 },
        { id: 192, label: '（皖西）五星驾校岗集报名点', level: 2 },
        { id: 269, label: '（皖南）五星驾校总校合作化路训练基地（D已备案）', level: 2 },
        { id: 280, label: '（皖南）五星华府训练基地 ', level: 2 },
        { id: 388, label: '（皖西）五星驾校黄山路校区', level: 2 },
        { id: 399, label: '（皖南）五星明珠校区', level: 2 }
      ]
    },
    {
      id: 121,
      label: '永泰驾校',
      level: 1,
      children: [
        { id: 234, label: '（皖北）永泰驾校蒙河路校区《备案》', level: 2 },
        { id: 314, label: '（皖北）永泰驾校下塘校区《备案》', level: 2 },
        { id: 352, label: '（皖北）永泰驾校魏武路校区《备案》', level: 2 }
      ]
    },
    {
      id: 111,
      label: '宏运驾校',
      level: 1,
      children: [
        { id: 189, label: '（皖西）宏运驾校界首路校区已备案', level: 2 },
        { id: 404, label: '（皖北）宏运红旗建材校区《备案》', level: 2 }
      ]
    },
    { id: 105, label: '众顺驾校', level: 1, children: [] },
    { id: 114, label: '东方驾校', level: 1, children: [] },
    { id: 104, label: '信达驾校', level: 1, children: [] },
    {
      id: 109,
      label: '摩托车培训驾校',
      level: 1,
      children: [
        { id: 374, label: '（抖音）摩托车报名登记用', level: 2 },
        { id: 375, label: '非抖音学员摩托车报名登记用', level: 2 },
        { id: 413, label: '领航机车（运城滨湖）训练基地', level: 2 }
      ]
    },
    {
      id: 145,
      label: '运程驾校',
      level: 1,
      children: [
        { id: 139, label: '（皖南）运程蜀山校区', level: 2 },
        { id: 150, label: '（皖北）运程驾校北京路校区《备案》', level: 2 }
      ]
    }
  ]
}

function handleNodeClick(data, node) {
  if (data.level === 1) {
    selectNodes.value = [{ id: data.id, name: data.label }]
  } else {
    selectNodes.value = [
      { id: node.parent.data.id, name: node.parent.data.label },
      { id: data.id, name: data.label }
    ]
  }
  handleQuery()
}

const columns = [
  { props: 'schoolName', label: '驾校', width: '100px' },
  { props: 'placeName', label: '场地' },
  { props: 'className', label: '班型名称' },
  { props: 'cartypeName', label: '驾照类型', width: '100px' },
  { props: '', label: '最新报价', width: '100px' },
  { props: '', label: '最新底价', width: '100px' },
  { props: 'remark', label: '备注', width: '100px' }
]

function handleQuery() {
  searchForm.value.pageNum = 1
  getList()
}

function getList() {
  tableList.value = [
    { schoolName: '测试驾校', placeName: '测试场地', className: '测试', status: 1 }
  ]
}

const ClassDialog = ref()
function handleOpenDialog(type, row = null) {
  ClassDialog.value.open(type, row)
}

function handleReset() {
  searchForm.value = {
    schoolName: '',
    placeName: undefined,
    className: undefined,
    cartypeId: undefined,
    pageSize: 20,
    pageNum: 1
  }
  getList()
}

async function handleBatchDelete(arr = []) {
  if (!arr.length || !selectRows.value.length) {
    message.info('请选择表格行！')
    return
  }
  try {
    console.log(arr)
    // 删除的二次确认
    await message.delConfirm()
    // 发起删除
    // await UserApi.deleteUser(row.id)
    message.success(t('common.delSuccess'))
    // 刷新列表
    await getList()
  } catch {}
}

const selectRows = ref([])
function handleSelectionChange(selection) {
  selectRows.value = selection.map((item) => item.classId)
}

function handleRemove(row) {
  handleBatchDelete([row])
}

async function handleChangeStatus(row) {
  try {
    console.log(row)
    // 删除的二次确认
    await message.confirm('是否确认修改状态')
    // 发起删除
    // await UserApi.deleteUser(row.id)
    message.success('修改成功')
    // 刷新列表
    await getList()
  } catch {}
}

const batchStatusDialogShow = ref(false)
const statusForm = ref({ status: 1 })

function handleBatchStatus() {
  if (!selectRows.value.length) {
    message.info('请选择表格行！')
    return
  }
  batchStatusDialogShow.value = true
}

function handleSureStatus() {
  console.log(statusForm.value)
  message.success('保存成功')
  batchStatusDialogShow.value = false
}

onMounted(() => {
  getSchoolList()
})
</script>

<style lang="scss" scoped></style>