<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="培训省份" prop="province">
<el-select v-model="queryParams.province" placeholder="请选择省" v-on="{focus:seeProvince,change:seeCity}">
<el-option
v-for="item in ProvinceList"
:key="item.dictValue"
:label="item.dictLabel"
:value="item.dictValue"
:disabled="item.status == 1"
></el-option>
</el-select>
</el-form-item>
<el-form-item label="培训城市" prop="city">
<el-select v-model="queryParams.city" placeholder="请选择市" >
<el-option
v-for="item in CityList"
:key="item.dictValue"
:label="item.dictLabel"
:value="item.dictValue"
:disabled="item.status == 1"
></el-option>
</el-select>
</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-row :gutter="10" class="mb8">
<el-col :span="1.5">
<el-button
type="primary"
plain
icon="el-icon-plus"
size="mini"
@click="handleAdd"
v-hasPermi="['employment:train:add']"
>新增</el-button>
</el-col>
<el-col :span="1.5">
<el-button
type="success"
plain
icon="el-icon-edit"
size="mini"
:disabled="single"
@click="handleUpdate"
v-hasPermi="['employment:train:edit']"
>修改</el-button>
</el-col>
<el-col :span="1.5">
<el-button
type="danger"
plain
icon="el-icon-delete"
size="mini"
:disabled="multiple"
@click="handleDelete"
v-hasPermi="['employment:train:remove']"
>删除</el-button>
</el-col>
<el-col :span="1.5">
<el-button
type="warning"
plain
icon="el-icon-download"
size="mini"
@click="handleExport"
v-hasPermi="['employment:train:export']"
>导出</el-button>
</el-col>
<right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
</el-row>
<el-table v-loading="loading" :data="trainList" @selection-change="handleSelectionChange">
<el-table-column type="selection" width="55" align="center" />
<!-- <el-table-column label="主键" align="center" prop="id" /> -->
<el-table-column label="培训标题" align="center" prop="title" />
<el-table-column label="培训院校" align="center" prop="schoolName" />
<el-table-column label="首页图片" align="center" prop="picture" width="100">
<template slot-scope="scope">
<image-preview :src="scope.row.picture" :width="50" :height="50"/>
</template>
</el-table-column>
<el-table-column label="培训方向" align="center" prop="direction">
<template slot-scope="scope">
<dict-tag :options="dict.type.speciality_train_direction" :value="scope.row.direction"/>
</template>
</el-table-column>
<el-table-column label="培训省份" align="center" prop="province">
<template slot-scope="scope">
<dict-tag :options="dict.type.sys_area_province" :value="scope.row.province"/>
</template>
</el-table-column>
<el-table-column label="培训城市" align="center" prop="city">
<template slot-scope="scope">
<dict-tag :options="dict.type.sys_area_city" :value="scope.row.city"/>
</template>
</el-table-column>
<el-table-column label="联系方式" align="center" prop="phonenumber" />
<el-table-column label="操作" align="center" class-name="small-padding fixed-width">
<template slot-scope="scope">
<el-button
size="mini"
type="text"
icon="el-icon-edit"
@click="handleUpdate(scope.row)"
v-hasPermi="['employment:train:edit']"
>修改</el-button>
<el-button
size="mini"
type="text"
icon="el-icon-delete"
@click="handleDelete(scope.row)"
v-hasPermi="['employment:train:remove']"
>删除</el-button>
</template>
</el-table-column>
</el-table>
<pagination
v-show="total>0"
:total="total"
:page.sync="queryParams.pageNum"
:limit.sync="queryParams.pageSize"
@pagination="getList"
/>
<!-- 添加或修改专业培训对话框 -->
<el-dialog :title="title" :visible.sync="open" width="40%" append-to-body v-dialogDrag>
<el-form ref="form" :model="form" :rules="rules" label-width="80px">
<el-row>
<el-col :span="12">
<el-form-item label="培训省份" prop="province">
<el-select v-model="form.province" placeholder="培训省份" v-on="{focus:formProvince,change:formCity}">
<el-option
v-for="item in FormProvinceList"
:key="item.dictValue"
:label="item.dictLabel"
:value="item.dictValue"
></el-option>
</el-select>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="培训城市" prop="city" >
<el-select v-model="form.city" placeholder="培训城市">
<el-option
v-for="item in FormCityList"
:key="item.dictValue"
:label="item.dictLabel"
:value="item.dictValue"
></el-option>
</el-select>
</el-form-item>
</el-col>
</el-row>
<div slot="footer" class="dialog-footer">
<el-button type="primary" @click="submitForm">确 定</el-button>
<el-button @click="cancel">取 消</el-button>
</div>
</el-dialog>
</div>
</template>
<script>
import { listTrain, getTrain, delTrain, addTrain, updateTrain, getCity, getProvince } from "@/api/employment/train";
export default {
name: "Train",
dicts: ['sys_area_province', 'speciality_train_direction', 'sys_area_city'],
data() {
return {
CityList: null,
ProvinceList: null,
FormCityList: null,
FormProvinceList: null,
// 查询参数
queryParams: {
pageNum: 1,
pageSize: 10,
title: null,
schoolName: null,
direction: null,
province: null,
city: null,
},
// 表单参数
form: {},
};
},
created() {
this.getList();
},
methods: {
seeProvince(){
const dictType='sys_area_province';
getProvince(dictType).then(response =>{this.ProvinceList=response.data});
},
seeCity(){
getCity('sys_area_city',this.queryParams.province.substr(0,2)).then(response =>{this.CityList=response.data});
this.queryParams.city=null;
},
formProvince(){
const dictType='sys_area_province';
getProvince(dictType).then(response =>{
this.FormProvinceList=response.data});
},
formCity(){
getCity('sys_area_city',this.form.province.substr(0,2)).then(response =>{this.FormCityList=response.data});
this.from.city=null;
}
};
</script>
若依实现级联查询
最新推荐文章于 2024-06-04 20:56:18 发布