423 lines
14 KiB
Vue
423 lines
14 KiB
Vue
|
|
||
|
|
<script lang="ts">
|
||
|
|
export default {
|
||
|
|
name: 'region' // 现状分析
|
||
|
|
};
|
||
|
|
</script>
|
||
|
|
<script setup lang="ts">
|
||
|
|
import { ref, onMounted } from 'vue';
|
||
|
|
import { ElForm, ElMessageBox, ElMessage } from 'element-plus';
|
||
|
|
import { downloadFile } from '@/utils/index';
|
||
|
|
import Page from '@/components/Pagination/page.vue';
|
||
|
|
|
||
|
|
import {
|
||
|
|
queryRegionList,
|
||
|
|
addRegion,
|
||
|
|
updateRegion,
|
||
|
|
delRegion,
|
||
|
|
exportExcel
|
||
|
|
} from '@/api/regionmodule/region';
|
||
|
|
const queryInfo :any = ref({
|
||
|
|
name:'',
|
||
|
|
current:1,
|
||
|
|
size:20,
|
||
|
|
total:0
|
||
|
|
})
|
||
|
|
//定义表格数据
|
||
|
|
const tableData: any = ref([]);
|
||
|
|
function gteTabledata() {
|
||
|
|
menuname.value = menuname.value.replace(/\s+/g, "");
|
||
|
|
let params = {
|
||
|
|
name: menuname.value,
|
||
|
|
status:queryInfo.value.status,
|
||
|
|
current: queryInfo.value.current,
|
||
|
|
size:queryInfo.value.size
|
||
|
|
}
|
||
|
|
loading.value = true
|
||
|
|
queryRegionList(params).then((res) => {
|
||
|
|
tableData.value = res.data.records
|
||
|
|
queryInfo.value.total = res.data.total
|
||
|
|
loading.value = false
|
||
|
|
}).catch(() => {
|
||
|
|
loading.value = false
|
||
|
|
})
|
||
|
|
}
|
||
|
|
const regionInfoRef = ref();
|
||
|
|
const loading = ref(false);
|
||
|
|
//定义搜索框文本
|
||
|
|
const menuname = ref('')
|
||
|
|
//点击搜索
|
||
|
|
function search() {
|
||
|
|
queryInfo.current = 1
|
||
|
|
gteTabledata()
|
||
|
|
}
|
||
|
|
function resetdata(){
|
||
|
|
menuname.value = ""
|
||
|
|
queryInfo.value = {
|
||
|
|
name:'',
|
||
|
|
current:1,
|
||
|
|
size:20,
|
||
|
|
total:0
|
||
|
|
}
|
||
|
|
gteTabledata()
|
||
|
|
}
|
||
|
|
//目录添加
|
||
|
|
const title = ref('')
|
||
|
|
const regionInfo: any = ref({
|
||
|
|
code: '',
|
||
|
|
name: '',
|
||
|
|
parent_id: '00',
|
||
|
|
type: '2',
|
||
|
|
education_bureau: '',
|
||
|
|
status: '01'
|
||
|
|
})
|
||
|
|
const dialogVisible = ref(false)
|
||
|
|
//关闭目录
|
||
|
|
function handleClose() {
|
||
|
|
dialogVisible.value = false;
|
||
|
|
btnVisible.value = false;
|
||
|
|
menuVisible.value = false;
|
||
|
|
if (regionInfoRef.value != null) regionInfoRef.value.resetFields();
|
||
|
|
}
|
||
|
|
//表格规则定义
|
||
|
|
const rules = ref({
|
||
|
|
name: [
|
||
|
|
{ required: true, message: '请输入区域名称', trigger: 'blur' }
|
||
|
|
]
|
||
|
|
})
|
||
|
|
//添加子目录
|
||
|
|
function addchilder(row: any,type:any,name:any) {
|
||
|
|
regiontitle.value = name
|
||
|
|
isSwitch.value = false
|
||
|
|
parentName.value = row.name
|
||
|
|
regionInfo.value = {
|
||
|
|
code: '',
|
||
|
|
name: '',
|
||
|
|
parent_id: row.id,
|
||
|
|
type: type,
|
||
|
|
education_bureau: '',
|
||
|
|
status: '01'
|
||
|
|
}
|
||
|
|
dialogVisible.value = true
|
||
|
|
}
|
||
|
|
//新增目录-确认按钮
|
||
|
|
function expertsubmit() {
|
||
|
|
if (regionInfo.value.name == '') {
|
||
|
|
ElMessage({
|
||
|
|
message: '请填写目录名称',
|
||
|
|
type: 'error',
|
||
|
|
})
|
||
|
|
return false
|
||
|
|
|
||
|
|
}
|
||
|
|
if(isSwitch.value == true){
|
||
|
|
return
|
||
|
|
}
|
||
|
|
isSwitch.value = true
|
||
|
|
if (regionInfo.value.id) {
|
||
|
|
let params = {
|
||
|
|
id:regionInfo.value.id,
|
||
|
|
code: regionInfo.value.code,
|
||
|
|
name: regionInfo.value.name,
|
||
|
|
parentId: regionInfo.value.parent_id,
|
||
|
|
type: regionInfo.value.type,
|
||
|
|
educationBureau: regionInfo.value.education_bureau
|
||
|
|
}
|
||
|
|
updateRegion(params).then(() => {
|
||
|
|
gteTabledata()
|
||
|
|
dialogVisible.value = false
|
||
|
|
ElMessage({
|
||
|
|
message: '修改成功',
|
||
|
|
type: 'success',
|
||
|
|
})
|
||
|
|
}).catch(()=>{
|
||
|
|
isSwitch.value = false
|
||
|
|
})
|
||
|
|
} else {
|
||
|
|
let params = {
|
||
|
|
code: regionInfo.value.code,
|
||
|
|
name: regionInfo.value.name,
|
||
|
|
parentId: regionInfo.value.parent_id,
|
||
|
|
type: regionInfo.value.type,
|
||
|
|
educationBureau: regionInfo.value.education_bureau,
|
||
|
|
status: '01'
|
||
|
|
}
|
||
|
|
addRegion(params).then(() => {
|
||
|
|
gteTabledata()
|
||
|
|
dialogVisible.value = false
|
||
|
|
ElMessage({
|
||
|
|
message: '新建成功',
|
||
|
|
type: 'success',
|
||
|
|
})
|
||
|
|
}).catch(()=>{
|
||
|
|
isSwitch.value = false
|
||
|
|
})
|
||
|
|
}
|
||
|
|
}
|
||
|
|
const menuVisible = ref(false)
|
||
|
|
const regiontitle = ref('')
|
||
|
|
const btnVisible = ref(false)
|
||
|
|
|
||
|
|
//修改信息
|
||
|
|
function handleEdit(row: any) {
|
||
|
|
isSwitch.value = false
|
||
|
|
regionInfo.value = JSON.parse(JSON.stringify(row))
|
||
|
|
regiontitle.value = '修改信息'
|
||
|
|
dialogVisible.value = true
|
||
|
|
}
|
||
|
|
//新增信息
|
||
|
|
function addClick() {
|
||
|
|
isSwitch.value = false
|
||
|
|
regiontitle.value = '新增省/直辖市'
|
||
|
|
regionInfo.value = {
|
||
|
|
code: '',
|
||
|
|
name: '',
|
||
|
|
parent_id: '00',
|
||
|
|
type: '2',
|
||
|
|
education_bureau: '',
|
||
|
|
status: '01'
|
||
|
|
}
|
||
|
|
dialogVisible.value = true
|
||
|
|
}
|
||
|
|
function exportOut(){
|
||
|
|
menuname.value = menuname.value.replace(/\s+/g, "");
|
||
|
|
let params = {
|
||
|
|
name:menuname.value
|
||
|
|
};
|
||
|
|
exportExcel(params).then((response: any) => {
|
||
|
|
downloadFile(response, '行政区域', 'xlsx')
|
||
|
|
});
|
||
|
|
}
|
||
|
|
//删除
|
||
|
|
function handleDelete(row: any) {
|
||
|
|
ElMessageBox.confirm('确定删除此区域及此区域下的所有菜单吗？', '删除提示', {
|
||
|
|
confirmButtonText: '确定',
|
||
|
|
cancelButtonText: '取消',
|
||
|
|
type: 'warning'
|
||
|
|
}).then(() => {
|
||
|
|
const params = {
|
||
|
|
id: row.id
|
||
|
|
}
|
||
|
|
delRegion(params).then(() => {
|
||
|
|
gteTabledata()
|
||
|
|
ElMessage({
|
||
|
|
message: '删除成功',
|
||
|
|
type: 'success',
|
||
|
|
})
|
||
|
|
})
|
||
|
|
|
||
|
|
})
|
||
|
|
}
|
||
|
|
const parentName = ref("") // 上级区域名称
|
||
|
|
const isSwitch = ref(false) // 提交开关
|
||
|
|
function dateFormat(row: any) {
|
||
|
|
const daterc = row;
|
||
|
|
if (daterc != null) {
|
||
|
|
var date = new Date(daterc);
|
||
|
|
var year = date.getFullYear();
|
||
|
|
var month = date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1;
|
||
|
|
date.getMonth() + 1 < 10 ? "0" + (date.getMonth() + 1) : date.getMonth() + 1;
|
||
|
|
var day = date.getDate() < 10 ? "0" + date.getDate() : date.getDate();
|
||
|
|
var hours = date.getHours() < 10 ? "0" + date.getHours() : date.getHours();
|
||
|
|
var minutes = date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes();
|
||
|
|
var seconds = date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds();
|
||
|
|
// 拼接
|
||
|
|
return year + "-" + month + "-" + day + " " + hours + ":" + minutes + ":" + seconds;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
//状态改变
|
||
|
|
function switchChange(row: any) {
|
||
|
|
const elMessage = ref('')
|
||
|
|
if (row.status == '00') {
|
||
|
|
elMessage.value = "确定停用该行政区域吗？"
|
||
|
|
} else if (row.status == '01') {
|
||
|
|
elMessage.value = "确定启用该行政区域吗？"
|
||
|
|
}
|
||
|
|
ElMessageBox.confirm(elMessage.value, "提示信息", {
|
||
|
|
confirmButtonText: "确定",
|
||
|
|
cancelButtonText: "取消",
|
||
|
|
type: "warning",
|
||
|
|
}).then(() => {
|
||
|
|
let params = {
|
||
|
|
status: row.status,
|
||
|
|
id: row.id,
|
||
|
|
};
|
||
|
|
updateRegion(params).then((res: any) => {
|
||
|
|
if (res.code == 0) {
|
||
|
|
gteTabledata()
|
||
|
|
ElMessage({
|
||
|
|
type: "success",
|
||
|
|
message: "改变成功",
|
||
|
|
})
|
||
|
|
}
|
||
|
|
}).catch(() => {
|
||
|
|
if(row.status == "01"){
|
||
|
|
row.status = "00"
|
||
|
|
}else{
|
||
|
|
row.status = "01"
|
||
|
|
}
|
||
|
|
})
|
||
|
|
}).catch(() => {
|
||
|
|
if(row.status == "01"){
|
||
|
|
row.status = "00"
|
||
|
|
}else{
|
||
|
|
row.status = "01"
|
||
|
|
}
|
||
|
|
});
|
||
|
|
}
|
||
|
|
onMounted(() => {
|
||
|
|
gteTabledata()
|
||
|
|
})
|
||
|
|
</script>
|
||
|
|
<template>
|
||
|
|
<div class="collectiontemplate-box">
|
||
|
|
<section class="detail-box">
|
||
|
|
<div style="display: flex;display: -webkit-flex; justify-content: space-between; -webkit-justify-content: space-between; margin-bottom:10px">
|
||
|
|
<div style="display: flex;display: -webkit-flex;">
|
||
|
|
<el-input v-model="menuname" placeholder="请输入名称查询" clearable style="width:200px;margin-right:10px"
|
||
|
|
@keyup.enter="search()" />
|
||
|
|
<el-button type="primary" @click="search()">搜索</el-button>
|
||
|
|
<el-button @click="resetdata">重置</el-button>
|
||
|
|
</div>
|
||
|
|
<div>
|
||
|
|
|
||
|
|
<!-- <el-button type="primary" @click="addClick">
|
||
|
|
<img src="@/assets/MenuIcon/jscz_xz.png" alt="" style="margin-right: 4px;">新增省/直辖市</el-button> -->
|
||
|
|
<el-button type="primary" @click="exportOut"><img src="@/assets/MenuIcon/u455.png" alt="" style="margin-right: 5px;">导出</el-button>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="draggable">
|
||
|
|
<el-table v-loading="loading" ref="multipleTable" :data="tableData" default-expand-all tooltip-effect="dark"
|
||
|
|
style="width: 100%;height: calc(100vh - 240px)" row-key="id" border
|
||
|
|
:header-cell-style="{ background: 'rgb(250 250 250)', color: '#383838', height: '50px' }">
|
||
|
|
<el-table-column label="区域代码" width="150" prop="name" show-overflow-tooltip>
|
||
|
|
<template #default="scope">
|
||
|
|
<div>{{ scope.row.code }}</div>
|
||
|
|
</template>
|
||
|
|
</el-table-column>
|
||
|
|
<el-table-column label="区域名称" prop="name" min-width="100" show-overflow-tooltip />
|
||
|
|
<!-- <el-table-column label="上级ID" prop="parent_id" width="100" show-overflow-tooltip /> -->
|
||
|
|
<el-table-column label="区域类型" prop="type" width="130" >
|
||
|
|
<template #default="scope">
|
||
|
|
<span v-if="scope.row.type == '1'">国家</span>
|
||
|
|
<span v-if="scope.row.type == '2'">省/直辖市</span>
|
||
|
|
<span v-if="scope.row.type == '3'">市/自治州</span>
|
||
|
|
<span v-if="scope.row.type == '4'">区/县/县级市</span>
|
||
|
|
</template>
|
||
|
|
</el-table-column>
|
||
|
|
<el-table-column label="教育局名称" prop="education_bureau" min-width="100" show-overflow-tooltip />
|
||
|
|
<el-table-column label="地区地址" prop="custom1" min-width="100" show-overflow-tooltip />
|
||
|
|
<el-table-column prop="creator" label="创建人" width="130"></el-table-column>
|
||
|
|
<el-table-column prop="create_time" label="创建日期" width="180" align="center">
|
||
|
|
<template #default="scope">
|
||
|
|
{{ dateFormat(scope.row.create_time) }}
|
||
|
|
</template>
|
||
|
|
</el-table-column>
|
||
|
|
<el-table-column label="操作" width="160" fixed="right" align="center"
|
||
|
|
style="display: flex; display: -webkit-flex;">
|
||
|
|
<template #default="scope">
|
||
|
|
<el-switch v-model="scope.row.status" active-value="01" inactive-value="00"
|
||
|
|
@change="switchChange(scope.row)" style="margin-right: 4px"></el-switch>
|
||
|
|
<span v-if="scope.row.status == '00'" class="effective">启用</span>
|
||
|
|
<span v-else style="color: #d7d7d7">停用</span>
|
||
|
|
<!-- <span
|
||
|
|
style="display: flex;display: -webkit-flex; justify-content: space-around;-webkit-justify-content: space-around; ">
|
||
|
|
<img src="@/assets/MenuIcon/lbcz_xg.png" alt="" title="修改"
|
||
|
|
@click="handleEdit(scope.row)" style="cursor: pointer;">
|
||
|
|
<img src="@/assets/MenuIcon/lbcz_zml.png" alt="" v-if="scope.row.type == '1'"
|
||
|
|
title="添加省/直辖市" @click="addchilder(scope.row,'2','新增省/直辖市')" style="cursor: pointer;">
|
||
|
|
<img src="@/assets/tableicon/u225.png" alt="" v-else-if="scope.row.type == '2'"
|
||
|
|
title="添加市/自治州" @click="addchilder(scope.row,'3','新增市/自治州')" style="cursor: pointer;">
|
||
|
|
<img src="@/assets/tableicon/u226.png" alt="" v-else-if="scope.row.type == '3'"
|
||
|
|
title="添加区/县/县级市" @click="addchilder(scope.row,'4','新增区/县/县级市')" style="cursor: pointer;">
|
||
|
|
<img src="@/assets/MenuIcon/lbcz_zml1.png" alt="" v-else
|
||
|
|
style="cursor: pointer;">
|
||
|
|
<img src="@/assets/MenuIcon/lbcz_sc.png" alt="" v-if="scope.row.status == '09'"
|
||
|
|
title="删除">
|
||
|
|
<img src="@/assets/MenuIcon/lbcz_sc.png" alt="" v-else title="删除"
|
||
|
|
@click="handleDelete(scope.row)" style="cursor: pointer; ">
|
||
|
|
</span> -->
|
||
|
|
</template>
|
||
|
|
</el-table-column>
|
||
|
|
</el-table>
|
||
|
|
<Page class="mt-[20px]" :total="queryInfo.total" v-model:size="queryInfo.size" v-model:current="queryInfo.current"
|
||
|
|
@pagination="gteTabledata" />
|
||
|
|
</div>
|
||
|
|
<!-- </div> -->
|
||
|
|
</section>
|
||
|
|
<!-- 新增目录 -->
|
||
|
|
<el-dialog v-model="dialogVisible" :close-on-click-modal="false" :before-close="handleClose" :title="regiontitle " draggable
|
||
|
|
append-to-body width="620px" class="dialogClass">
|
||
|
|
<el-form ref="regionInfoRef" :model="regionInfo" :rules="rules" label-width="90px">
|
||
|
|
|
||
|
|
<el-form-item label="上级区域" prop="code" v-if="regionInfo.type != '1' && regionInfo.type != '2' && regiontitle!='修改信息'">
|
||
|
|
<el-input v-model="parentName" placeholder="" style="width: 100%;" :disabled="true"></el-input>
|
||
|
|
</el-form-item>
|
||
|
|
<el-form-item label="区域代码" prop="code">
|
||
|
|
<el-input v-model="regionInfo.code" placeholder="" style="width: 100%;"></el-input>
|
||
|
|
</el-form-item>
|
||
|
|
<el-form-item label="区域名称" prop="name">
|
||
|
|
<el-input v-model="regionInfo.name" placeholder="" style="width: 100%;"></el-input>
|
||
|
|
</el-form-item>
|
||
|
|
<el-form-item label="教育局名称" prop="type">
|
||
|
|
<el-input v-model="regionInfo.education_bureau" placeholder="" style="width: 100%;"></el-input>
|
||
|
|
</el-form-item>
|
||
|
|
</el-form>
|
||
|
|
<span class="dialog-footer"
|
||
|
|
style="display: flex; display: -webkit-flex; justify-content: flex-end;-webkit-justify-content: flex-end;">
|
||
|
|
<el-button @click="handleClose">取 消</el-button>
|
||
|
|
<el-button type="primary" @click="expertsubmit">确 定</el-button>
|
||
|
|
</span>
|
||
|
|
</el-dialog>
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
<style scoped lang="scss">
|
||
|
|
.detail-box {
|
||
|
|
width: 100%;
|
||
|
|
height: calc(100vh - 130px);
|
||
|
|
overflow: auto;
|
||
|
|
background-color: rgba(255, 255, 255, 1);
|
||
|
|
border: none;
|
||
|
|
border-radius: 3px;
|
||
|
|
padding: 5px 20px 0px;
|
||
|
|
box-sizing: border-box;
|
||
|
|
}
|
||
|
|
|
||
|
|
:deep(.el-tooltip) {
|
||
|
|
display: flex;
|
||
|
|
display: -webkit-flex;
|
||
|
|
align-items: center;
|
||
|
|
-webkit-align-items: center;
|
||
|
|
position: relative;
|
||
|
|
}
|
||
|
|
|
||
|
|
.delicon {
|
||
|
|
width: 20px;
|
||
|
|
height: 25px;
|
||
|
|
position: relative;
|
||
|
|
display: flex;
|
||
|
|
display: -webkit-flex;
|
||
|
|
align-items: center;
|
||
|
|
-webkit-align-items: center;
|
||
|
|
// margin-left: 20px;
|
||
|
|
|
||
|
|
}
|
||
|
|
|
||
|
|
.delicon:hover {
|
||
|
|
// background-color: red;
|
||
|
|
|
||
|
|
.delIcon {
|
||
|
|
display: block !important;
|
||
|
|
color: #fff;
|
||
|
|
cursor: pointer;
|
||
|
|
}
|
||
|
|
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
:deep(.el-table__expand-icon) {
|
||
|
|
margin-left: 15px;
|
||
|
|
margin-right: -10px !important;
|
||
|
|
}
|
||
|
|
</style>
|