区域权限

src/global/components/tree-data/index.vue

@@ -15,6 +15,26 @@
     </HcDataTree>
     <!--右键菜单-->
     <HcContextMenu ref="contextMenuRef" :datas="treeMenu" @closed="handleMenuClosed" @item-click="handleMenuSelect" v-if="isMenus"/>
+    <!--新增/编辑-->
+    <HcDialog isToBody bgColor="white" :show="rowModal" :title="formModel.id?'编辑区域':'新增区域'" widths="30rem" @save="rowModalSave" @close="rowModalClose">
+        <el-form ref="formRef" :model="formModel" :rules="formRules" label-position="top" size="large">
+            <el-form-item label="区域名称：" prop="key">
+                <el-input v-model="formModel.key"/>
+            </el-form-item>
+            <el-form-item label="征拆桩号：">
+                <el-input v-model="formModel.key1"/>
+            </el-form-item>
+            <el-form-item label="节点类型：">
+                <el-select block v-model="formModel.key2">
+                    <el-option label="选项1" value="选项1"/>
+                    <el-option label="选项2" value="选项2"/>
+                </el-select>
+            </el-form-item>
+            <el-form-item label="备注：">
+                <el-input type="textarea" v-model="formModel.key3" :autosize="{ minRows: 3, maxRows: 5 }"/>
+            </el-form-item>
+        </el-form>
+    </HcDialog>
 </template>
 
 <script setup>
@@ -42,6 +62,13 @@ const treeRefData = ref({});
 const isMenus = ref(props.isMenu);
 const autoExpandKeys = ref([]);
 
+//监听
+watch(() => [
+    props.isMenu,
+], ([isMenu]) => {
+    isMenus.value = isMenu
+})
+
 //事件
 const emit = defineEmits(['menuTap', 'nodeTap'])
 
@@ -129,15 +156,43 @@ const handleMenuClosed = () => {
     }
 }
 
+//弹窗
+const rowModal = ref(false)
+const formRef = ref(null)
+const formModel = ref({})
+const formRules = {
+    key: [{required: true, message: '请输入区域名称', trigger: 'blur'}],
+}
+
+
 //鼠标右键菜单被点击
 const handleMenuSelect = async ({key}) => {
     const node = treeRefNode.value;
-    const data = treeRefData.value;
-    const autoKeys = await getAutoKeys(node)
-    //返回事件
-    emit('menuTap', {key, node, data})
+    console.log(node)
+    if (key === 'add') {
+        formModel.value = {}
+        rowModal.value = true
+    } else if (key === 'edit') {
+        formModel.value = node?.data
+        rowModal.value = true
+    } else if (key === 'del') {
+
+    }
+    console.log(key)
 }
 
+//保存
+const rowModalSave = () => {
+
+}
+
+//关闭弹窗
+const rowModalClose = () => {
+    rowModal.value = false
+    formModel.value = {}
+}
+
+
 
 //处理自动展开的节点KEY
 const getAutoKeys = async (node) => {

src/styles/app/element.scss

@@ -10,3 +10,16 @@
         }
     }
 }
+
+//有卡片的弹窗
+.el-overlay-dialog .el-dialog .el-dialog__body .el-card.hc-card-box {
+    --el-card-bg-color: var(--el-dialog-bg-color);
+    --el-card-border-radius: 0;
+    box-shadow: none;
+    .hc-card-header-box .hc-card-header .el-form .el-form-item {
+        margin-bottom: 0;
+        .el-form-item__content .el-form-item__error {
+            display: none;
+        }
+    }
+}

src/styles/base/region.scss

@@ -0,0 +1,38 @@
+.base-region-box,
+.base-region-box .base-region-table,
+.base-region-box .base-region-info {
+    position: relative;
+    height: 100%;
+}
+.base-region-box {
+    display: flex;
+    .base-region-table {
+        flex: 1;
+        margin-right: 5px;
+    }
+    .base-region-info {
+        margin-left: 5px;
+        .base-region-card {
+            position: relative;
+            border: 1px solid #e9e9e9;
+            border-radius: 3px;
+            background: white;
+            .title {
+                position: relative;
+                border-bottom: 1px solid #e9e9e9;
+                padding: 12px;
+            }
+            .content {
+                position: relative;
+                padding: 0 12px 12px;
+                .el-tag {
+                    margin-top: 12px;
+                    margin-right: 12px;
+                }
+            }
+        }
+        .base-region-card + .base-region-card {
+            margin-top: 20px;
+        }
+    }
+}

src/views/base/crops.vue

@@ -1,15 +1,231 @@
 <template>
-    <div>222</div>
+    <HcPageLayout>
+        <template #left>
+            <div class="hc-layout-tree-box">
+                <el-scrollbar>
+                    <HcTreeData @nodeTap="treeNodeTap"/>
+                </el-scrollbar>
+            </div>
+        </template>
+        <HcCard>
+            <template #header>
+                <div class="w-48">
+                    <el-select v-model="searchForm.projectType" block clearable placeholder="请选择土地性质" size="large">
+                        <el-option label="选项1" value="选项1"/>
+                        <el-option label="选项2" value="选项2"/>
+                    </el-select>
+                </div>
+                <div class="w-64 ml-2">
+                    <el-input v-model="searchForm.queryValue" clearable placeholder="请输入名称进行查询" size="large"/>
+                </div>
+                <div class="ml-4">
+                    <el-button type="primary" @click="searchClick" size="large">
+                        <HcIcon name="search-2"/>
+                        <span>搜索</span>
+                    </el-button>
+                </div>
+            </template>
+            <template #extra>
+                <el-button size="large" type="primary" hc-btn @click="addRowClick">
+                    <HcIcon name="add"/>
+                    <span>新增</span>
+                </el-button>
+                <el-button size="large" type="danger" hc-btn>
+                    <HcIcon name="delete-bin"/>
+                    <span>删除</span>
+                </el-button>
+            </template>
+            <HcTable :column="tableColumn" :datas="tableData" :loading="tableLoading" isCheck @selection-change="tableSelectionChange">
+                <template #action="{row,index}">
+                    <el-button size="small" type="warning" @click="viewRowClick(row)">查看</el-button>
+                    <el-button size="small" type="primary" @click="editRowClick(row)">编辑</el-button>
+                    <el-button size="small" type="danger">删除</el-button>
+                </template>
+            </HcTable>
+            <template #action>
+                <HcPages :pages="searchForm" @change="pageChange"/>
+            </template>
+        </HcCard>
+
+        <!--新增/编辑-->
+        <HcDialog isToBody bgColor="white" :show="rowModal" isTable widths="80%" :padding="false"
+                  :title="formModel.id?'编辑':'新增'" @save="rowModalSave" @close="rowModalClose"
+        >
+            <HcCard>
+                <template #header>
+                    <el-form ref="formRef" inline :model="formModel" :rules="formRules" size="large">
+                        <el-form-item label="名称：" prop="key1">
+                            <el-input v-model="formModel.key1"/>
+                        </el-form-item>
+                        <el-form-item label="补偿性质：">
+                            <el-select block v-model="formModel.key2">
+                                <el-option label="选项1" value="选项1"/>
+                                <el-option label="选项2" value="选项2"/>
+                            </el-select>
+                        </el-form-item>
+                    </el-form>
+                </template>
+                <template #extra>
+                    <el-button size="large" type="success" hc-btn>
+                        <HcIcon name="add"/>
+                        <span>新增</span>
+                    </el-button>
+                </template>
+                <HcTable :column="tableColumn1" :datas="tableData1">
+                    <template #key1="{row,index}">
+                        <el-input v-model="row.key1"/>
+                    </template>
+                    <template #key2="{row,index}">
+                        <el-input v-model="row.key2"/>
+                    </template>
+                    <template #key3="{row,index}">
+                        <el-input v-model="row.key3"/>
+                    </template>
+                    <template #key4="{row,index}">
+                        <el-input v-model="row.key4"/>
+                    </template>
+                    <template #action="{row,index}">
+                        <el-button size="small" type="danger">
+                            <HcIcon name="delete-bin"/>
+                            <span>删除</span>
+                        </el-button>
+                    </template>
+                </HcTable>
+            </HcCard>
+        </HcDialog>
+
+        <!--查看-->
+        <HcDialog isToBody bgColor="white" :footer="false" :show="rowViewModal" isTable widths="80%" :padding="false" title="查看" @close="rowViewModalClose">
+            <HcCard>
+                <template #header>
+                    <el-form inline :model="formModel" size="large" disabled>
+                        <el-form-item label="名称：" prop="key1">
+                            <el-input v-model="formModel.key1"/>
+                        </el-form-item>
+                        <el-form-item label="补偿性质：">
+                            <el-select block v-model="formModel.key2">
+                                <el-option label="选项1" value="选项1"/>
+                                <el-option label="选项2" value="选项2"/>
+                            </el-select>
+                        </el-form-item>
+                    </el-form>
+                </template>
+                <HcTable :column="tableColumn1" :datas="tableData1"/>
+            </HcCard>
+        </HcDialog>
+
+    </HcPageLayout>
 </template>
 
 <script setup>
+import {ref} from "vue";
 
-</script>
+//树节点被点击
+const treeNodeTap = ({node, data}) => {
 
-<style lang="scss" scoped>
+}
 
-</style>
+//搜索表单
+const searchForm = ref({
+    projectType: null, queryValue: null, startTime: null, endTime: null,
+    current: 1, size: 20, total: 0
+})
+
+//搜索
+const searchClick = () => {
+    searchForm.value.current = 1;
+    getTableData()
+}
+
+//分页被点击
+const pageChange = ({current, size}) => {
+    searchForm.value.current = current
+    searchForm.value.size = size
+    getTableData()
+}
+
+//获取数据
+const tableLoading = ref(false)
+const tableColumn = [
+    {key: 'key1', name: '补偿类型'},
+    {key: 'key2', name: '名称'},
+    {key: 'action', name: '操作', width: '190', align: 'center'},
+]
+const tableData = ref([
+    {id: 1, key1: 'xxxx', key2: 'xxxx', key3: '65632'},
+    {id: 2, key1: 'xxxx', key2: 'xxxx', key3: '65632'},
+    {id: 3, key1: 'xxxx', key2: 'xxxx', key3: '65632'},
+    {id: 4, key1: 'xxxx', key2: 'xxxx', key3: '65632'},
+])
+const getTableData = () => {
+
+}
 
-<style lang="scss">
+//多选事件
+const tableSelectionChange = (rows) => {
+    console.log(rows)
+}
 
+//弹窗
+const rowModal = ref(false)
+const formRef = ref(null)
+const formModel = ref({})
+const formRules = {
+    key1: [{required: true, message: '请输入名称', trigger: 'blur'}],
+}
+
+//表格表单数据
+const tableColumn1 = [
+    {key: 'key1', name: '规格名称'},
+    {key: 'key2', name: '单位名称'},
+    {key: 'key3', name: '政府补偿标准'},
+    {key: 'key4', name: '两方协议补偿标准'},
+    {key: 'action', name: '操作', width: '100', align: 'center'},
+]
+const tableData1 = ref([
+    {id: 1, key1: 'xxxx', key2: 'xxxx', key3: '65632'},
+    {id: 2, key1: 'xxxx', key2: 'xxxx', key3: '65632'},
+    {id: 3, key1: 'xxxx', key2: 'xxxx', key3: '65632'},
+    {id: 4, key1: 'xxxx', key2: 'xxxx', key3: '65632'},
+])
+
+//新增
+const addRowClick = () => {
+    formModel.value = {}
+    rowModal.value = true
+}
+
+//编辑
+const editRowClick = (row) => {
+    formModel.value = row
+    rowModal.value = true
+}
+
+//保存
+const rowModalSave = () => {
+
+}
+
+//关闭弹窗
+const rowModalClose = () => {
+    rowModal.value = false
+    formModel.value = {}
+}
+
+//查看
+const rowViewModal = ref(false)
+const viewRowClick = (row) => {
+    rowViewModal.value = true
+}
+const rowViewModalClose = () => {
+    rowViewModal.value = false
+}
+</script>
+
+<style lang="scss" scoped>
+.hc-layout-tree-box {
+    position: relative;
+    height: 100%;
+    padding: 18px;
+}
 </style>

src/views/base/land.vue

@@ -3,32 +3,68 @@
         <template #left>
             <div class="hc-layout-tree-box">
                 <el-scrollbar>
-                    <HcTreeData @nodeTap="treeNodeTap" @menuTap="treeMenuTap"/>
+                    <HcTreeData @nodeTap="treeNodeTap"/>
                 </el-scrollbar>
             </div>
         </template>
         <HcCard>
             <template #header>
-                0000
-                <!--div class="w-72">
-                    <el-input v-model="searchForm.queryValue" clearable placeholder="请输入容器编号查询" size="large" @keyup="keyUpEvent"/>
+                <div class="w-36">
+                    <el-select v-model="searchForm.projectType" block clearable placeholder="请选择区域" size="large">
+                        <el-option label="选项1" value="选项1"/>
+                        <el-option label="选项2" value="选项2"/>
+                    </el-select>
                 </div>
-                <div class="ml-2">
-                    <el-button size="large" type="primary" @click="searchClick">
+                <div class="w-52 ml-2">
+                    <el-input v-model="searchForm.queryValue" clearable placeholder="请输入名称进行查询" size="large"/>
+                </div>
+                <div class="ml-4">
+                    <el-button type="primary" @click="searchClick" size="large">
                         <HcIcon name="search-2"/>
                         <span>搜索</span>
                     </el-button>
-                </div-->
+                </div>
             </template>
             <template #extra>
-                111
+                <el-button size="large" type="primary" hc-btn @click="addRowClick">
+                    <HcIcon name="add"/>
+                    <span>新增</span>
+                </el-button>
+                <el-button size="large" type="danger" hc-btn>
+                    <HcIcon name="delete-bin"/>
+                    <span>删除</span>
+                </el-button>
             </template>
-            2222
+            <HcTable :column="tableColumn" :datas="tableData" :loading="tableLoading" isCheck @selection-change="tableSelectionChange">
+                <template #action="{row,index}">
+                    <el-button size="small" type="primary" @click="editRowClick(row)">编辑</el-button>
+                    <el-button size="small" type="danger">删除</el-button>
+                </template>
+            </HcTable>
             <template #action>
-                333
-                <!--HcPages :pages="searchForm" @change="pageChange"/-->
+                <HcPages :pages="searchForm" @change="pageChange"/>
             </template>
         </HcCard>
+        <!--新增/编辑-->
+        <HcDialog isToBody bgColor="white" :show="rowModal" :title="formModel.id?'编辑':'新增'" widths="30rem" @save="rowModalSave" @close="rowModalClose">
+            <el-form ref="formRef" :model="formModel" :rules="formRules" label-position="top" size="large">
+                <el-form-item label="名称：" prop="key1">
+                    <el-input v-model="formModel.key1"/>
+                </el-form-item>
+                <el-form-item label="土地性质：">
+                    <el-select block v-model="formModel.key2">
+                        <el-option label="选项1" value="选项1"/>
+                        <el-option label="选项2" value="选项2"/>
+                    </el-select>
+                </el-form-item>
+                <el-form-item label="政府补偿标准：" prop="key3">
+                    <el-input v-model="formModel.key3"/>
+                </el-form-item>
+                <el-form-item label="两方协议补偿标准：" prop="key4">
+                    <el-input v-model="formModel.key4"/>
+                </el-form-item>
+            </el-form>
+        </HcDialog>
     </HcPageLayout>
 </template>
 
@@ -40,15 +76,77 @@ const treeNodeTap = ({node, data}) => {
 
 }
 
-//树菜单被点击
-const treeMenuTap = ({key, node, data}) => {
-    if (key === 'add') {
+//搜索表单
+const searchForm = ref({
+    projectType: null, queryValue: null, startTime: null, endTime: null,
+    current: 1, size: 20, total: 0
+})
+
+//搜索
+const searchClick = () => {
+    searchForm.value.current = 1;
+    getTableData()
+}
+
+//分页被点击
+const pageChange = ({current, size}) => {
+    searchForm.value.current = current
+    searchForm.value.size = size
+    getTableData()
+}
 
-    } else if (key === 'edit') {
+//获取数据
+const tableLoading = ref(false)
+const tableColumn = [
+    {key: 'key1', name: '名称'},
+    {key: 'key2', name: '政府补偿标准'},
+    {key: 'key3', name: '两方协议补偿标准'},
+    {key: 'action', name: '操作', width: '130', align: 'center'},
+]
+const tableData = ref([
+    {id: 1, key1: 'xxxx', key2: 'xxxx', key3: '65632'},
+    {id: 2, key1: 'xxxx', key2: 'xxxx', key3: '65632'},
+    {id: 3, key1: 'xxxx', key2: 'xxxx', key3: '65632'},
+    {id: 4, key1: 'xxxx', key2: 'xxxx', key3: '65632'},
+])
+const getTableData = () => {
 
-    } else if (key === 'del') {
+}
+
+//多选事件
+const tableSelectionChange = (rows) => {
+    console.log(rows)
+}
+
+//弹窗
+const rowModal = ref(false)
+const formRef = ref(null)
+const formModel = ref({})
+const formRules = {
+    key1: [{required: true, message: '请输入名称', trigger: 'blur'}],
+}
 
-    }
+//新增
+const addRowClick = () => {
+    formModel.value = {}
+    rowModal.value = true
+}
+
+//编辑
+const editRowClick = (row) => {
+    formModel.value = row
+    rowModal.value = true
+}
+
+//保存
+const rowModalSave = () => {
+
+}
+
+//关闭弹窗
+const rowModalClose = () => {
+    rowModal.value = false
+    formModel.value = {}
 }
 </script>
 
@@ -59,7 +157,3 @@ const treeMenuTap = ({key, node, data}) => {
     padding: 18px;
 }
 </style>
-
-<style lang="scss">
-
-</style>

src/views/base/region.vue

@@ -1,13 +1,151 @@
 <template>
-    <div>222</div>
+    <HcCard>
+        <template #header>
+            <div class="w-64">
+                <el-input v-model="searchForm.queryValue" clearable placeholder="请输入名称进行查询" size="large"/>
+            </div>
+            <div class="ml-4">
+                <el-button type="primary" @click="searchClick" size="large">
+                    <HcIcon name="search-2"/>
+                    <span>搜索</span>
+                </el-button>
+            </div>
+        </template>
+        <template #extra>
+            <el-button size="large" type="primary" hc-btn @click="addRowClick">
+                <HcIcon name="add"/>
+                <span>新增</span>
+            </el-button>
+            <el-button size="large" type="danger" hc-btn>
+                <HcIcon name="delete-bin"/>
+                <span>删除</span>
+            </el-button>
+        </template>
+        <div class="base-region-box">
+            <div class="base-region-table" id="region-01">
+                <HcTable :column="tableColumn" :datas="tableData" :loading="tableLoading" isCheck @selection-change="tableSelectionChange">
+                    <template #action="{row,index}">
+                        <el-button size="small" type="primary" @click="editRowClick(row)">编辑</el-button>
+                        <el-button size="small" type="danger">删除</el-button>
+                    </template>
+                </HcTable>
+            </div>
+            <div class="base-region-info" id="region-02">
+                <el-scrollbar>
+                    <div class="base-region-card">
+                        <div class="title">已关联用户信息</div>
+                        <div class="content">
+                            <el-tag>标签一</el-tag><el-tag>标签一</el-tag><el-tag>标签一</el-tag><el-tag>标签一</el-tag>
+                            <el-tag>标签一</el-tag><el-tag>标签一</el-tag><el-tag>标签一</el-tag><el-tag>标签一</el-tag>
+                            <el-tag>标签一</el-tag><el-tag>标签一</el-tag><el-tag>标签一</el-tag><el-tag>标签一</el-tag>
+                            <el-tag>标签一</el-tag><el-tag>标签一</el-tag><el-tag>标签一</el-tag><el-tag>标签一</el-tag>
+                            <el-tag>标签一</el-tag><el-tag>标签一</el-tag><el-tag>标签一</el-tag><el-tag>标签一</el-tag>
+                        </div>
+                    </div>
+                    <div class="base-region-card">
+                        <div class="title">已分配区域权限</div>
+                        <div class="content" style="padding-top: 12px">
+                            <HcTreeData :isMenu="false"/>
+                        </div>
+                    </div>
+                </el-scrollbar>
+            </div>
+        </div>
+        <template #action>
+            <HcPages :pages="searchForm" @change="pageChange"/>
+        </template>
+    </HcCard>
 </template>
 
 <script setup>
+import {onMounted, onUnmounted, ref} from "vue";
+import split from "split.js";
 
+//渲染完成
+onMounted(()=> {
+    setSplitDom()
+})
+
+// 初始化设置拖动分割线
+const splitvar = ref(null);
+const setSplitDom = () => {
+    try {
+        //配置参考： https://split.js.org/#/?direction=vertical&snapOffset=0
+        splitvar.value = split([
+            '#region-01',
+            '#region-02'
+        ], {
+            sizes: [50, 50],
+        });
+    } catch (e) {
+        setTimeout(() => {
+            setSplitDom()
+        }, 500)
+    }
+}
+
+//销毁
+onUnmounted(() => {
+    if (splitvar.value) {
+        splitvar.value.destroy()
+    }
+})
+
+//搜索表单
+const searchForm = ref({
+    projectType: null, queryValue: null, startTime: null, endTime: null,
+    current: 1, size: 20, total: 0
+})
+
+//搜索
+const searchClick = () => {
+    searchForm.value.current = 1;
+    getTableData()
+}
+
+//分页被点击
+const pageChange = ({current, size}) => {
+    searchForm.value.current = current
+    searchForm.value.size = size
+    getTableData()
+}
+
+//获取数据
+const tableLoading = ref(false)
+const tableColumn = [
+    {key: 'key1', name: '编号'},
+    {key: 'key2', name: '角色名称'},
+    {key: 'key3', name: '备注'},
+    {key: 'action', name: '操作', width: '130', align: 'center'},
+]
+const tableData = ref([
+    {id: 1, key1: 'xxxx', key2: 'xxxx', key3: '65632'},
+    {id: 2, key1: 'xxxx', key2: 'xxxx', key3: '65632'},
+    {id: 3, key1: 'xxxx', key2: 'xxxx', key3: '65632'},
+    {id: 4, key1: 'xxxx', key2: 'xxxx', key3: '65632'},
+])
+const getTableData = () => {
+
+}
+
+//多选事件
+const tableSelectionChange = (rows) => {
+    console.log(rows)
+}
+
+//新增
+const addRowClick = () => {
+
+}
+
+//编辑
+const editRowClick = (row) => {
+
+}
 </script>
 
 <style lang="scss" scoped>
-
+@import "~src/styles/base/region.scss";
 </style>
 
 <style lang="scss">