zant-admin 1.0.0

package/src/views/demo/importexport.vue

@@ -0,0 +1,123 @@
+<template>
+  <form-table
+    :formState="formState"
+    :columns="columns"
+    modulePath="Importexport"
+    :permissionModulePath="permissionModulePath"
+    ref="childRef"
+  >
+    <!-- 可以通过插槽自定义单元格 -->
+  </form-table>
+
+
+</template>
+<script setup>
+import { ref, inject } from 'vue'
+import FormTable from '@/components/FormTable.vue'
+import sysRole from '@/api/methods/sysRole'
+import { message } from 'ant-design-vue'
+import { menuStore } from '@/stores/menu'
+import sysMenu from '@/api/methods/sysMenu'
+import { refreshRoutes } from '@/router'
+// 注入父组件的方法
+const menuinit = inject('menuinit')
+// 权限模块路径
+const permissionModulePath = ref('demo:importexport')
+
+const formState = ref({
+  name: { label: '角色名称', value: '',defaultvalue:'', type: 'text' },
+})
+const columns = ref([
+  {
+    title: '角色名称',
+    dataIndex: 'name',
+
+  },
+  {
+    title: '备注',
+    dataIndex: 'remark',
+  },
+  {
+    title: '是否启用',
+    dataIndex: 'isEnable',
+  },
+  {
+    title: '创建时间',
+    dataIndex: 'createTime',
+  }
+])
+const childRef = ref(null)
+
+//编辑
+const editopen = ref(false)
+const editRef = ref(null)
+const edit = record => {
+  editRef.value.init(record.id)
+  editopen.value = true
+}
+const refreshData = () => {
+  childRef.value.tableLoad()
+}
+
+//修改是否启用
+const handleSwitchChange = record => {
+  var data = {
+    id: record.id,
+    isEnabled: record.isEnable,
+  }
+  sysRole.updateIsEnabled(data).then(() => {
+    childRef.value.tableLoad()
+  })
+}
+
+const empoweropen = ref(false)
+const roleMenutreeData = ref([])
+const halfCheckedKeys = ref([])
+const checkedKeys = ref([])
+const recordId = ref(0)
+//关联菜单
+const empower = record => {
+  recordId.value = record.id
+  sysRole.getRoleMenu({ roleId: record.id }).then(res => {
+    roleMenutreeData.value = res.data.output
+    checkedKeys.value = res.data.checkedKeys
+    empoweropen.value = true
+  })
+}
+
+//处理Tree组件的check事件，获取半选状态的父节点
+const onTreeCheck = (checkedKeysValue, e) => {
+  checkedKeys.value = checkedKeysValue
+  halfCheckedKeys.value = e.halfCheckedKeys || []
+}
+//关联菜单保存
+const empowerSave = () => {
+  var data = {
+    Id: recordId.value,
+    Menus:checkedKeys.value.checked,
+  }
+  sysRole.savePower(data).then(() => {
+    const menu = menuStore()
+    sysMenu
+      .getRoutesMenu()
+      .then(res => {
+        menu.menus = res.data
+        message.success('成功', 1, () => {
+          if (menuinit) {
+                refreshRoutes().then(() => {
+                // 重新加载菜单树（如果你有菜单组件）
+                 menuinit()
+                // 跳转到新菜单页面，或者刷新当前页
+              // router.replace(router.currentRoute.value.fullPath)
+              })
+
+          }
+          empoweropen.value = false
+        })
+      })
+      .catch()
+  })
+}
+</script>
+
+<style></style>

package/src/views/demo/region.vue

@@ -0,0 +1,240 @@
+<template>
+  <div class="region-container">
+    <a-card title="省市区联动选择" class="region-card">
+      <div class="region-selector">
+        <a-form layout="inline">
+          <a-form-item label="省份">
+            <a-select
+              v-model:value="selectedProvince"
+              placeholder="请选择省份"
+              style="width: 150px"
+              @change="handleProvinceChange"
+              :options="provinceOptions"
+              :filter-option="filterOption"
+              show-search
+            />
+          </a-form-item>
+          <a-form-item label="城市">
+            <a-select
+              v-model:value="selectedCity"
+              placeholder="请选择城市"
+              style="width: 150px"
+              @change="handleCityChange"
+              :options="cityOptions"
+              :disabled="!selectedProvince"
+              :filter-option="filterOption"
+              show-search
+            />
+          </a-form-item>
+          <a-form-item label="区县">
+            <a-select
+              v-model:value="selectedArea"
+              placeholder="请选择区县"
+              style="width: 150px"
+              @change="handleAreaChange"
+              :options="areaOptions"
+              :disabled="!selectedCity"
+              :filter-option="filterOption"
+              show-search
+            />
+          </a-form-item>
+        </a-form>
+        <div class="selected-result" v-if="selectedAddress">
+          <a-alert :message="selectedAddress" type="success" show-icon />
+          <div class="code-display" v-if="selectedProvince || selectedCity || selectedArea">
+            <a-descriptions title="区域代码" :column="3" size="small">
+              <a-descriptions-item label="省份代码">{{ selectedProvince || '-' }}</a-descriptions-item>
+              <a-descriptions-item label="城市代码">{{ selectedCity || '-' }}</a-descriptions-item>
+              <a-descriptions-item label="区县代码">{{ selectedArea || '-' }}</a-descriptions-item>
+            </a-descriptions>
+          </div>
+        </div>
+      </div>
+    </a-card>
+
+    <a-card title="省市区组合选择" class="region-card">
+      <div class="region-cascader">
+        <a-form layout="inline">
+          <a-form-item label="地区选择">
+            <a-cascader
+              v-model:value="cascaderValue"
+              :options="cascaderOptions"
+              placeholder="请选择地区"
+              style="width: 300px"
+              @change="handleCascaderChange"
+              :filter-option="filterCascaderOption"
+              show-search
+            />
+          </a-form-item>
+        </a-form>
+        <div class="cascader-result" v-if="cascaderAddress">
+          <a-alert :message="cascaderAddress" type="info" show-icon />
+          <div class="code-display" v-if="cascaderValue && cascaderValue.length > 0">
+            <a-descriptions title="区域代码" :column="3" size="small">
+              <a-descriptions-item label="省份代码">{{ cascaderValue[0] || '-' }}</a-descriptions-item>
+              <a-descriptions-item label="城市代码">{{ cascaderValue[1] || '-' }}</a-descriptions-item>
+              <a-descriptions-item label="区县代码">{{ cascaderValue[2] || '-' }}</a-descriptions-item>
+            </a-descriptions>
+          </div>
+        </div>
+      </div>
+    </a-card>
+  </div>
+</template>
+
+<script setup>
+import { ref, onMounted, computed } from 'vue'
+import regionUtils from '@/utils/regionUtils'
+
+// 省市区联动选择相关数据
+const selectedProvince = ref('')
+const selectedCity = ref('')
+const selectedArea = ref('')
+const provinceOptions = ref([])
+const cityOptions = ref([])
+const areaOptions = ref([])
+
+// 组合框相关数据
+const cascaderValue = ref([])
+const cascaderOptions = ref([])
+
+// 计算属性：获取选中的完整地址
+const selectedAddress = computed(() => {
+  return regionUtils.getFullAddressName(selectedProvince.value, selectedCity.value, selectedArea.value)
+})
+
+// 计算属性：获取组合框选中的完整地址
+const cascaderAddress = computed(() => {
+  if (!cascaderValue.value || cascaderValue.value.length === 0) return ''
+  const [provinceCode, cityCode, areaCode] = cascaderValue.value
+  return regionUtils.getFullAddressName(provinceCode, cityCode, areaCode)
+})
+
+/**
+ * 处理省份选择变化
+ * @param {string} value - 选中的省份代码
+ */
+const handleProvinceChange = (value) => {
+  // 重置城市和区县选择
+  selectedCity.value = ''
+  selectedArea.value = ''
+
+  // 获取该省份下的城市列表
+  cityOptions.value = regionUtils.getCitiesByProvinceCode(value)
+  areaOptions.value = []
+}
+
+/**
+ * 处理城市选择变化
+ * @param {string} value - 选中的城市代码
+ */
+const handleCityChange = (value) => {
+  // 重置区县选择
+  selectedArea.value = ''
+
+  // 获取该城市下的区县列表
+  areaOptions.value = regionUtils.getAreasByCityCode(value)
+}
+
+/**
+ * 处理区县选择变化
+ * @param {string} value - 选中的区县代码
+ */
+const handleAreaChange = (value) => {
+  // 这里可以添加区县选择后的处理逻辑
+  console.log('选中的区县代码:', value)
+}
+
+/**
+ * 处理组合框选择变化
+ * @param {Array} value - 选中的值数组 [省份代码, 城市代码, 区县代码]
+ */
+const handleCascaderChange = (value) => {
+  console.log('组合框选中的值:', value)
+}
+
+/**
+ * 搜索过滤函数
+ * @param {string} input - 输入的搜索关键词
+ * @param {Object} option - 选项对象
+ * @returns {boolean} 是否匹配
+ */
+const filterOption = (input, option) => {
+  return option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0
+}
+
+/**
+ * 级联选择器搜索过滤函数
+ * @param {string} inputValue - 输入的搜索关键词
+ * @param {Object} pathNode - 路径节点
+ * @returns {boolean} 是否匹配
+ */
+const filterCascaderOption = (inputValue, pathNode) => {
+  return pathNode.some(option => option.label.toLowerCase().indexOf(inputValue.toLowerCase()) >= 0)
+}
+
+/**
+ * 构建级联选择器的选项数据
+ * @param {Array} provinces - 省份数据
+ * @returns {Array} 级联选择器选项数据
+ */
+const buildCascaderOptions = (provinces) => {
+  return provinces.map(province => {
+    // 获取省份下的所有城市
+    const cities = regionUtils.getCitiesByProvinceCode(province.value)
+
+    return {
+      label: province.label,
+      value: province.value,
+      children: cities.map(city => {
+        // 获取城市下的所有区县
+        const areas = regionUtils.getAreasByCityCode(city.value)
+
+        return {
+          label: city.label,
+          value: city.value,
+          children: areas.length > 0 ? areas : undefined
+        }
+      })
+    }
+  })
+}
+
+// 组件挂载时初始化数据
+onMounted(async () => {
+  try {
+    // 获取所有省市区数据
+    await regionUtils.fetchAllAddressData()
+
+    // 设置省份数据
+    provinceOptions.value = regionUtils.getAllProvinces()
+
+    // 构建级联选择器数据
+    cascaderOptions.value = buildCascaderOptions(provinceOptions.value)
+  } catch (error) {
+    console.error('初始化省市区数据失败:', error)
+  }
+})
+</script>
+
+<style scoped>
+
+.region-card {
+  margin-bottom: 20px;
+}
+
+.region-selector, .region-cascader {
+  padding: 20px 0;
+}
+
+.selected-result, .cascader-result {
+  margin-top: 20px;
+}
+
+.code-display {
+  margin-top: 15px;
+  padding: 10px;
+  background-color: #f5f5f5;
+  border-radius: 6px;
+}
+</style>

package/src/views/demo/statistics.vue

@@ -0,0 +1,195 @@
+<template>
+  <div class="statistics-container">
+    <a-row :gutter="16">
+      <!-- 柱状图 -->
+      <a-col :span="12">
+        <a-card title="销售数据统计" class="chart-card">
+          <div ref="barChartRef" class="chart-container"></div>
+        </a-card>
+      </a-col>
+
+      <!-- 饼图 -->
+      <a-col :span="12">
+        <a-card title="产品占比分析" class="chart-card">
+          <div ref="pieChartRef" class="chart-container"></div>
+        </a-card>
+      </a-col>
+    </a-row>
+
+    <a-row :gutter="16" style="margin-top: 16px;">
+      <!-- 折线图 -->
+      <a-col :span="24">
+        <a-card title="月度趋势分析" class="chart-card">
+          <div ref="lineChartRef" class="chart-container"></div>
+        </a-card>
+      </a-col>
+    </a-row>
+  </div>
+</template>
+
+<script setup>
+import { ref, onMounted, onUnmounted } from 'vue'
+import { initBarChart, updateBarChart, initPieChart, updatePieChart, initLineChart, updateLineChart } from '@/utils/baseEcharts'
+
+// 图表DOM引用
+const barChartRef = ref(null)
+const pieChartRef = ref(null)
+const lineChartRef = ref(null)
+
+// 图表实例
+let barChartInstance = null
+let pieChartInstance = null
+let lineChartInstance = null
+
+/**
+ * 初始化所有图表
+ */
+const initCharts = () => {
+  // 初始化柱状图
+  if (barChartRef.value) {
+    barChartInstance = initBarChart(barChartRef.value, '销售额(万元)')
+  }
+
+  // 初始化饼图
+  if (pieChartRef.value) {
+    pieChartInstance = initPieChart(pieChartRef.value, '产品占比')
+  }
+
+  // 初始化折线图
+  if (lineChartRef.value) {
+    lineChartInstance = initLineChart(lineChartRef.value, '访问量(万次)')
+  }
+}
+
+/**
+ * 生成模拟数据
+ */
+const generateMockData = () => {
+  // 柱状图数据
+  const barData = {
+    xAxis: {
+      data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
+    },
+    series: [
+      {
+        name: '产品A',
+        data: [120, 132, 101, 134, 90, 230, 210, 220, 182, 191, 234, 290]
+      },
+      {
+        name: '产品B',
+        data: [220, 182, 191, 234, 290, 330, 310, 220, 182, 191, 234, 290]
+      },
+      {
+        name: '产品C',
+        data: [150, 232, 201, 154, 190, 330, 410, 320, 282, 291, 334, 390]
+      }
+    ]
+  }
+
+  // 饼图数据
+  const pieData = [
+    { name: '电子产品', value: 335 },
+    { name: '家居用品', value: 310 },
+    { name: '服装鞋帽', value: 234 },
+    { name: '食品饮料', value: 135 },
+    { name: '图书音像', value: 1048 }
+  ]
+
+  // 折线图数据
+  const lineData = {
+    xAxis: {
+      data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
+    },
+    series: [
+      {
+        name: '网站访问量',
+        data: [820, 932, 901, 934, 1290, 1330, 1320]
+      },
+      {
+        name: 'APP访问量',
+        data: [620, 732, 701, 734, 1090, 1130, 1120]
+      },
+      {
+        name: '小程序访问量',
+        data: [420, 532, 501, 534, 890, 930, 920]
+      }
+    ]
+  }
+
+  return { barData, pieData, lineData }
+}
+
+/**
+ * 更新所有图表数据
+ */
+const updateCharts = () => {
+  const { barData, pieData, lineData } = generateMockData()
+
+  // 更新柱状图
+  if (barChartInstance) {
+    updateBarChart({
+      chartInstance: barChartInstance,
+      data: barData,
+      shouldShowSlider: false
+    })
+  }
+
+  // 更新饼图
+  if (pieChartInstance) {
+    updatePieChart({
+      chartInstance: pieChartInstance,
+      data: pieData
+    })
+  }
+
+  // 更新折线图
+  if (lineChartInstance) {
+    updateLineChart({
+      chartInstance: lineChartInstance,
+      data: lineData,
+      shouldShowSlider: false
+    })
+  }
+}
+
+/**
+ * 窗口大小变化时重新调整图表大小
+ */
+const handleResize = () => {
+  barChartInstance?.resize()
+  pieChartInstance?.resize()
+  lineChartInstance?.resize()
+}
+
+// 组件挂载时初始化图表
+onMounted(() => {
+  initCharts()
+  updateCharts()
+
+  // 监听窗口大小变化
+  window.addEventListener('resize', handleResize)
+})
+
+// 组件卸载时清理资源
+onUnmounted(() => {
+  // 销毁图表实例
+  barChartInstance?.dispose()
+  pieChartInstance?.dispose()
+  lineChartInstance?.dispose()
+
+  // 移除事件监听
+  window.removeEventListener('resize', handleResize)
+})
+</script>
+
+<style scoped>
+
+.chart-card {
+  margin-bottom: 16px;
+}
+
+.chart-container {
+  height: 300px;
+  width: 100%;
+}
+</style>

package/src/views/home.vue

@@ -0,0 +1,7 @@
+<script setup>
+import MainPage from '../components/MainPage.vue';
+</script>
+<template>
+     <MainPage/>
+</template>
+