|
@@ -0,0 +1,272 @@
|
|
|
+<script lang="ts" setup>
|
|
|
+import PaneModel from '@/components/splitpanes/PaneModel.vue'
|
|
|
+import type { FormRules } from 'element-plus'
|
|
|
+import { ElTree } from 'element-plus'
|
|
|
+import type { BasicForm, ICRUD } from '@/types/form'
|
|
|
+import { getAreaList } from '@/api/area'
|
|
|
+interface Tree {
|
|
|
+ id: number
|
|
|
+ label: string
|
|
|
+ children?: Tree[]
|
|
|
+ icon?: string
|
|
|
+}
|
|
|
+const config = {
|
|
|
+ size: 20,
|
|
|
+ lMinSize: 20
|
|
|
+}
|
|
|
+
|
|
|
+const filterText = ref('')
|
|
|
+const treeRef = ref<InstanceType<typeof ElTree>>()
|
|
|
+const defaultProps = {
|
|
|
+ children: 'children',
|
|
|
+ label: 'label'
|
|
|
+}
|
|
|
+
|
|
|
+let data = ref<any>([])
|
|
|
+getAreaList().then((res: any) => {
|
|
|
+ data.value = res.fields
|
|
|
+})
|
|
|
+const dialogVisible = ref(false)
|
|
|
+const areaType = ref([
|
|
|
+ { label: '国家', value: 1 },
|
|
|
+ { label: '省份、直辖市', value: 2 },
|
|
|
+ { label: '地市', value: 3 },
|
|
|
+ { label: '区县', value: 4 }
|
|
|
+])
|
|
|
+watch(filterText, val => {
|
|
|
+ treeRef.value?.filter(val)
|
|
|
+})
|
|
|
+const filterNode = (value: string, data: any) => {
|
|
|
+ if (!value) return true
|
|
|
+ return data.label.includes(value)
|
|
|
+}
|
|
|
+const menuId = ref('')
|
|
|
+const handleNodeClick = (val: any) => {
|
|
|
+ console.log(val)
|
|
|
+ formData.name = val.label
|
|
|
+ formData.encoded = val.id
|
|
|
+ formData.type = 2
|
|
|
+ menuId.value = val.id
|
|
|
+}
|
|
|
+
|
|
|
+const create = (data: any) => {
|
|
|
+ console.log(data)
|
|
|
+}
|
|
|
+const update = (data: any) => {
|
|
|
+ console.log(data)
|
|
|
+}
|
|
|
+const formData = reactive<any>({})
|
|
|
+
|
|
|
+const formConfig = reactive<BasicForm>({
|
|
|
+ span: 24,
|
|
|
+ formItems: [
|
|
|
+ {
|
|
|
+ label: '区域名称',
|
|
|
+ value: '',
|
|
|
+ name: 'name',
|
|
|
+ type: 'input',
|
|
|
+ rules: [{ required: true, message: '请输入区域名称', trigger: 'blur' }]
|
|
|
+ },
|
|
|
+ {
|
|
|
+ label: '区域编码',
|
|
|
+ value: '',
|
|
|
+ name: 'encoded',
|
|
|
+ type: 'input'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ label: '区域类型',
|
|
|
+ value: '',
|
|
|
+ name: 'type',
|
|
|
+ type: 'select',
|
|
|
+ options: areaType.value
|
|
|
+ }
|
|
|
+ ]
|
|
|
+})
|
|
|
+const ruleFormRef = ref()
|
|
|
+let ruleForm = ref({
|
|
|
+ id: '',
|
|
|
+ type: 1,
|
|
|
+ encoded: '',
|
|
|
+ name: ''
|
|
|
+})
|
|
|
+
|
|
|
+const addArea = () => {
|
|
|
+ dialogVisible.value = true
|
|
|
+}
|
|
|
+const submitForm = (data: any) => {
|
|
|
+ dialogVisible.value = false
|
|
|
+}
|
|
|
+const resetForm = (data: any) => {
|
|
|
+ dialogVisible.value = false
|
|
|
+}
|
|
|
+</script>
|
|
|
+
|
|
|
+<template>
|
|
|
+ <PaneModel :config="config">
|
|
|
+ <template #left>
|
|
|
+ <el-card class="left">
|
|
|
+ <el-container>
|
|
|
+ <el-header>
|
|
|
+ <el-input v-model="filterText" placeholder="输入关键字进行过滤" />
|
|
|
+ </el-header>
|
|
|
+ <el-main>
|
|
|
+ <el-tree
|
|
|
+ ref="treeRef"
|
|
|
+ class="filter-tree"
|
|
|
+ :data="data"
|
|
|
+ :expand-on-click-node="false"
|
|
|
+ :props="defaultProps"
|
|
|
+ :filter-node-method="filterNode"
|
|
|
+ show-checkbox
|
|
|
+ @node-click="handleNodeClick"
|
|
|
+ >
|
|
|
+ </el-tree>
|
|
|
+ </el-main>
|
|
|
+ <el-footer>
|
|
|
+ <el-button icon="plus" type="primary" size="small" @click="addArea"></el-button>
|
|
|
+ <el-button icon="delete" type="danger" size="small"></el-button>
|
|
|
+ <el-button icon="refresh" size="small"></el-button>
|
|
|
+ </el-footer>
|
|
|
+ </el-container>
|
|
|
+ </el-card>
|
|
|
+ </template>
|
|
|
+ <template #right>
|
|
|
+ <el-empty
|
|
|
+ v-if="menuId == ''"
|
|
|
+ description="请选择左侧菜单后操作"
|
|
|
+ image="http://cloud.jeeplus.org/assets/empty.066d9fc7.svg"
|
|
|
+ />
|
|
|
+
|
|
|
+ <el-card>
|
|
|
+ <template #header>
|
|
|
+ <span>{{ formData.name }}</span>
|
|
|
+ </template>
|
|
|
+ <pro-form
|
|
|
+ class="form-wrap"
|
|
|
+ :formConfig="formConfig"
|
|
|
+ :formData="formData"
|
|
|
+ ref="proFormRef"
|
|
|
+ :update="update"
|
|
|
+ :create="create"
|
|
|
+ >
|
|
|
+ </pro-form>
|
|
|
+ <div class="text-center">
|
|
|
+ <el-button type="primary">保存</el-button>
|
|
|
+ </div>
|
|
|
+ </el-card>
|
|
|
+ </template>
|
|
|
+ </PaneModel>
|
|
|
+
|
|
|
+ <el-dialog v-model="dialogVisible" title="新增" width="" destroy-on-close>
|
|
|
+ <el-form
|
|
|
+ ref="ruleFormRef"
|
|
|
+ :model="ruleForm"
|
|
|
+ label-position="right"
|
|
|
+ label-width="100px"
|
|
|
+ class="demo-ruleForm"
|
|
|
+ status-icon
|
|
|
+ size="large"
|
|
|
+ >
|
|
|
+ <div class="grid grid-cols-2 justify-items-center items-center gap-y-{20px}">
|
|
|
+ <el-form-item class="w-full items-center" label="区域名称" prop="name">
|
|
|
+ <el-input v-model="ruleForm.name" placeholder="请输入区域名称" />
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item class="w-full items-center" label="区域编码" prop="name">
|
|
|
+ <el-input v-model="ruleForm.encoded" placeholder="请输入区域编码" />
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item class="w-full items-center" label="上级区域">
|
|
|
+ <el-tree-select
|
|
|
+ v-model="ruleForm.id"
|
|
|
+ :data="[]"
|
|
|
+ value-key="id"
|
|
|
+ :props="defaultProps"
|
|
|
+ :render-after-expand="false"
|
|
|
+ check-strictly
|
|
|
+ />
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item class="w-full items-center" label="区域类型">
|
|
|
+ <el-select v-model="ruleForm.type" clearable filterable placeholder="请选择区域类型">
|
|
|
+ <el-option v-for="item in areaType" :key="item.value" :label="item.label" :value="item.value" />
|
|
|
+ </el-select>
|
|
|
+ </el-form-item>
|
|
|
+ </div>
|
|
|
+ </el-form>
|
|
|
+ <template #footer>
|
|
|
+ <div class="flex justify-end w-full">
|
|
|
+ <el-button size="default" @click="resetForm(ruleFormRef)">取消</el-button>
|
|
|
+ <el-button size="default" type="primary" @click="submitForm(ruleFormRef)">确认</el-button>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ </el-dialog>
|
|
|
+</template>
|
|
|
+
|
|
|
+<style lang="scss" scoped>
|
|
|
+:deep(.splitpanes__splitter) {
|
|
|
+ background: transparent !important;
|
|
|
+}
|
|
|
+.el-container {
|
|
|
+ height: 100%;
|
|
|
+}
|
|
|
+.card-header {
|
|
|
+ padding-bottom: 14px;
|
|
|
+ border-bottom: 1px solid var(--el-card-border-color);
|
|
|
+ box-sizing: border-box;
|
|
|
+ margin-top: -2px;
|
|
|
+ margin-bottom: 16px;
|
|
|
+}
|
|
|
+.right {
|
|
|
+ height: 100%;
|
|
|
+ :deep(.el-card__body) {
|
|
|
+ height: 100%;
|
|
|
+ }
|
|
|
+ .form-wrap {
|
|
|
+ padding-right: 20px;
|
|
|
+ }
|
|
|
+}
|
|
|
+.el-empty {
|
|
|
+ height: 100%;
|
|
|
+ background-color: #fff;
|
|
|
+}
|
|
|
+.form-scoll {
|
|
|
+ :deep(.el-card__body) {
|
|
|
+ overflow: auto;
|
|
|
+ }
|
|
|
+}
|
|
|
+:deep(.splitpanes__pane) {
|
|
|
+ background-color: #fff;
|
|
|
+}
|
|
|
+.left {
|
|
|
+ height: 100%;
|
|
|
+ :deep(.el-tree-node__content) {
|
|
|
+ height: 36px;
|
|
|
+ }
|
|
|
+ .custom-tree-node {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ span {
|
|
|
+ margin-left: 5px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .el-header {
|
|
|
+ border-bottom: 1px solid #e6e6e6;
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ align-items: center;
|
|
|
+ height: 53px;
|
|
|
+ }
|
|
|
+ :deep(.el-card__body) {
|
|
|
+ padding: 0;
|
|
|
+ height: 100%;
|
|
|
+ }
|
|
|
+ .el-main {
|
|
|
+ overflow: auto;
|
|
|
+ flex: 1;
|
|
|
+ flex-basis: 100%;
|
|
|
+ }
|
|
|
+ .el-footer {
|
|
|
+ border-top: 1px solid #e6e6e6;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|