fs-admin/src/views/system/Area.vue

<script lang="ts" setup>
import PaneModel from '@/components/splitpanes/PaneModel.vue'
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'
}

const data = ref<any>([])
getAreaList().then((res: any) => {
  data.value = res
})
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()
const 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>