259 lines
7.7 KiB
Vue
259 lines
7.7 KiB
Vue
<template>
|
|
|
|
<div class="default-main">
|
|
<el-form :inline="true" :model="formInline" class="demo-form-inline">
|
|
<el-form-item label="类型:">
|
|
<el-switch v-model="value" active-text="企业部门" inactive-text="行政区域" @change="handleSwitchChange"></el-switch>
|
|
</el-form-item>
|
|
<el-form-item>
|
|
<el-button
|
|
v-if="value ? true : false"
|
|
@click="AddClick1"
|
|
type="primary"
|
|
size="mini"
|
|
icon="el-icon-plus"
|
|
>
|
|
新增部门
|
|
</el-button>
|
|
</el-form-item>
|
|
</el-form>
|
|
|
|
<Table ref='tableRef' />
|
|
<!-- 修改弹窗 -->
|
|
<el-dialog
|
|
:close-on-click-modal="false"
|
|
:title="RowName + '部门'"
|
|
v-model="dialogFormVisible"
|
|
width="30%"
|
|
@close="closeDialog"
|
|
>
|
|
<el-form :model="formData" ref="formRef" label-width="110px" :rules="rules">
|
|
<el-form-item v-if="flag" label="父级节点:">
|
|
<el-input v-model="parentName" placeholder="请输入父级节点"></el-input>
|
|
</el-form-item>
|
|
<el-form-item label="企业部门:" prop="name" class="top">
|
|
<el-input v-model="formData.name" placeholder="请输入企业部门"></el-input>
|
|
</el-form-item>
|
|
<el-form-item label="简称:" prop="shortName" class="top">
|
|
<el-input v-model="formData.shortName" placeholder="请输入简称"></el-input>
|
|
</el-form-item>
|
|
<el-form-item label="排序:" prop="areaCode" class="top">
|
|
<el-input v-model="formData.areaCode" placeholder="请输入排序"></el-input>
|
|
</el-form-item>
|
|
<el-form-item label="经度:" prop="lng" class="top">
|
|
<el-input v-model="formData.lng" placeholder="请输入经度"></el-input>
|
|
</el-form-item>
|
|
<el-form-item label="纬度:" prop="lat" class="top">
|
|
<el-input v-model="formData.lat" placeholder="请输入纬度"></el-input>
|
|
</el-form-item>
|
|
</el-form>
|
|
<template #footer>
|
|
<span class="dialog-footer">
|
|
<el-button @click="closeDialog">取 消</el-button>
|
|
<el-button type="primary" @click="submitEvent">确 定</el-button>
|
|
</span>
|
|
</template>
|
|
</el-dialog>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { ref, reactive, onMounted, onBeforeUnmount } from 'vue'
|
|
import { ElMessage, ElMessageBox } from 'element-plus'
|
|
import { areaTree, areaAdd, areaDelete, update, selectPid } from '@/api/system-boot/area'
|
|
import TableStore from '@/utils/tableStore'
|
|
import Table from '@/components/table/index.vue'
|
|
|
|
defineOptions({
|
|
name: 'system-boot/area/areaTree'
|
|
})
|
|
// 响应式数据
|
|
const value = ref(false)
|
|
const flag = ref(true)
|
|
const dialogFormVisible = ref(false)
|
|
const tableData = ref([])
|
|
const formData = reactive({
|
|
type: 0,
|
|
id: '',
|
|
pid: '',
|
|
name: '',
|
|
shortName: '',
|
|
areaCode: '',
|
|
lng: 0,
|
|
lat: 0
|
|
})
|
|
const parentName = ref('')
|
|
const RowName = ref('')
|
|
const flag1 = ref('')
|
|
const row = ref(null)
|
|
const formInline = reactive({})
|
|
const rules = {
|
|
name: [{ required: true, message: '名称不能为空', trigger: 'blur' }],
|
|
shortName: [{ required: true, message: '简称不能为空', trigger: 'blur' }],
|
|
areaCode: [{ required: true, message: '排序不能为空', trigger: 'blur' }],
|
|
lng: [{ required: true, message: '经度不能为空', trigger: 'blur' }],
|
|
lat: [{ required: true, message: '纬度不能为空', trigger: 'blur' }]
|
|
}
|
|
|
|
// 表单引用
|
|
const formRef = ref(null)
|
|
|
|
|
|
const tableStore = new TableStore({
|
|
showPage:false,
|
|
url: areaTree( { id: '', type: value.value ? 1 : 0 }),
|
|
method: 'POST',
|
|
column: [
|
|
{ title: value ? '企业部门' : '行政区域', field: 'name', treeNode: true, align: 'left' },
|
|
{ title: '简称', field: 'shortName', treeNode: true, align: 'left' },
|
|
{ title: '经度', field: 'lng' },
|
|
{ title: '维度', field: 'lat' },
|
|
{ title: '行政编码', field: 'areaCode' },
|
|
],
|
|
loadCallback: () => {
|
|
console.log('tableStore.table.data')
|
|
}
|
|
})
|
|
|
|
provide('tableStore', tableStore)
|
|
tableStore.table.params.searchState = 0
|
|
const handleSwitchChange = (val) => {
|
|
|
|
areaTree( { id: '', type: value.value ? 1 : 0 })
|
|
}
|
|
// 外部新增
|
|
const AddClick1 = () => {
|
|
flag.value = true
|
|
Object.assign(formData, {})
|
|
RowName.value = '新增'
|
|
parentName.value = '企业'
|
|
dialogFormVisible.value = true
|
|
formData.type = 1
|
|
formData.pid = '0'
|
|
flag1.value = 'add'
|
|
}
|
|
|
|
// 行内新增
|
|
const AddClick = (row) => {
|
|
flag.value = true
|
|
Object.assign(formData, {})
|
|
RowName.value = `${row.name}下新增`
|
|
parentName.value = row.name
|
|
dialogFormVisible.value = true
|
|
formData.type = 1
|
|
formData.pid = row.id
|
|
formData.id = row.id
|
|
flag1.value = 'add'
|
|
}
|
|
|
|
// 行内修改
|
|
const EditClick = (row) => {
|
|
flag.value = false
|
|
RowName.value = `${row.name}下修改`
|
|
dialogFormVisible.value = true
|
|
Object.assign(formData, {
|
|
type: 1,
|
|
id: row.id,
|
|
pid: row.pid,
|
|
name: row.name,
|
|
shortName: row.shortName,
|
|
areaCode: row.areaCode,
|
|
lng: row.lng,
|
|
lat: row.lat
|
|
})
|
|
flag1.value = 'edit'
|
|
row.value = row
|
|
}
|
|
|
|
// 删除
|
|
const DeleteClick = (row) => {
|
|
const p = row.id
|
|
const arr = JSON.stringify([p])
|
|
selectPid(arr).then((response) => {
|
|
ElMessageBox.confirm('确认删除该节点吗?', '提示', {
|
|
confirmButtonText: '确认删除',
|
|
cancelButtonText: '取消',
|
|
type: 'warning'
|
|
})
|
|
.then(() => {
|
|
areaDelete(arr).then((response) => {
|
|
if (response.code === 'A0000') {
|
|
ElMessage.success('删除成功')
|
|
getAreaTree()
|
|
}
|
|
})
|
|
})
|
|
.catch(() => {})
|
|
})
|
|
}
|
|
|
|
// 提交操作
|
|
const submitEvent = () => {
|
|
dialogFormVisible.value = false
|
|
if (flag1.value === 'add') {
|
|
areaAdd(formData).then((response) => {
|
|
if (response.code === 'A0000') {
|
|
ElMessage.success('新增成功')
|
|
getAreaTree()
|
|
}
|
|
})
|
|
} else if (flag1.value === 'edit') {
|
|
update(formData).then((response) => {
|
|
if (response.code === 'A0000') {
|
|
ElMessage.success('修改成功')
|
|
tableData.value = []
|
|
getAreaTree()
|
|
}
|
|
})
|
|
}
|
|
}
|
|
|
|
// 查询树形数据
|
|
const getAreaTree = () => {
|
|
const data = { id: '', type: value.value ? 1 : 0 }
|
|
areaTree(data).then((response) => {
|
|
if (response.code === 'A0000') {
|
|
response.data.forEach((m) => {
|
|
delete m.children
|
|
m.hasChildren = true
|
|
})
|
|
tableData.value = response.data
|
|
}
|
|
})
|
|
}
|
|
|
|
// 加载子节点
|
|
const load = (tree, treeNode, resolve) => {
|
|
const id = tree.id
|
|
const data = { id, type: value.value ? 1 : 0 }
|
|
areaTree(data).then((response) => {
|
|
const childrenData = response.data.map((n) => {
|
|
delete n.children
|
|
n.hasChildren = true
|
|
return n
|
|
})
|
|
setTimeout(() => {
|
|
resolve(childrenData)
|
|
}, 30)
|
|
})
|
|
}
|
|
|
|
// 关闭弹窗
|
|
const closeDialog = () => {
|
|
if (formRef.value) {
|
|
formRef.value.resetFields()
|
|
}
|
|
dialogFormVisible.value = false
|
|
}
|
|
|
|
// 生命周期
|
|
onMounted(() => {
|
|
tableStore.index()
|
|
})
|
|
|
|
|
|
</script>
|
|
|
|
<style lang="less" scoped>
|
|
|
|
</style> |