zhengsl/WholeProcessPlatform
1
0
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

地图单个加载，数据填报bug修改

Browse Source
This commit is contained in:
扈兆增 2026-05-13 08:44:35 +08:00
parent 48262cc162
commit b69e2eb18e
21 changed files with 2831 additions and 2379 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
frontend/src/api/guoYuSheShiShuJuTianBao/index.ts
View File

@ -69,7 +69,8 @@ export function importFishZip(data: FormData) {
url: '/data/fishDraft/importZip', url: '/data/fishDraft/importZip',
method: 'post', method: 'post',
data, data,
headers: { 'Content-Type': 'multipart/form-data' } headers: { 'Content-Type': 'multipart/form-data' },
timeout: 1000 * 60 * 5 // 5分钟
}); });
} }
// 取消导入任务 // 取消导入任务

60
frontend/src/components/gis/GisView.vue
View File

@ -56138,7 +56138,30 @@ const fetchPointData = _.debounce(async () => {
matrixIds_index: ["0", "1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11", "12"], matrixIds_index: ["0", "1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11", "12"],
tileMatrixSetID: "EPSG:3857_qgc_sx_gjjdx_arcgistiles_l13", tileMatrixSetID: "EPSG:3857_qgc_sx_gjjdx_arcgistiles_l13",
}); });
//基地
mapClass.addBaseDataLayer({
id: "hydropBase",
key: "hydropBase",
urlType: "gisurl",
url:
"https://211.99.26.225:18085/geoserver/gwc/service/tms/1.0.0/qgc%3AstationEra1117@EPSG%3A900913@pbf/{z}/{x}/{y}.pbf",
geojson_url:
"https://211.99.26.225:18085/geoserver/qgc/ows?service=WFS&version=1.0.0&request=GetFeature&typeName=qgc:stationEra1117&maxFeatures=50&outputFormat=application/json&token=bearer a9a0f227-1df3-4e68-b380-2eca5bb49bd1",
url_3d: "https://211.99.26.225:18085/geoserver/qgc/wms",
_layer: "stationEra1117",
layers: "qgc:stationEra1117",
rasteropacity: 0.5,
visible: true,
minZoom: 0,
maxZoom: 20,
type: "vector",
layerType: "line",
paint: {
"line-color": "#C5C6F3",
"line-width": 1,
"line-opacity": 1,
},
});
// 梯级流域图 // 梯级流域图
// mapClass.addBaseDataLayer( // mapClass.addBaseDataLayer(
// { // {
@ -56352,34 +56375,12 @@ watch(
watch( watch(
() => JidiSelectEventStore.selectedItem, () => JidiSelectEventStore.selectedItem,
(newVal) => { (newVal) => {
console.log(newVal);
if (newVal) { if (newVal) {
// if (newVal.wbsCode == "all") { if (newVal.wbsCode == "all") {
// } else { mapClass.jdPanelControlShowAndHidden(newVal.wbsCode, false);
// mapClass.addBaseDataLayer({ } else {
// id: "hydropBase", mapClass.jdPanelControlShowAndHidden(newVal.wbsCode, true);
// key: "hydropBase", }
// urlType: "gisurl",
// url:
// "https://211.99.26.225:18085/geoserver/gwc/service/tms/1.0.0/qgc%3AstationEra1117@EPSG%3A900913@pbf/{z}/{x}/{y}.pbf",
// geojson_url:
// "https://211.99.26.225:18085/geoserver/qgc/ows?service=WFS&version=1.0.0&request=GetFeature&typeName=qgc:stationEra1117&maxFeatures=50&outputFormat=application/json&token=bearer a9a0f227-1df3-4e68-b380-2eca5bb49bd1",
// url_3d: "https://211.99.26.225:18085/geoserver/qgc/wms",
// _layer: "stationEra1117",
// layers: "qgc:stationEra1117",
// rasteropacity: 0.5,
// visible: true,
// minZoom: 0,
// maxZoom: 20,
// type: "vector",
// layerType: "line",
// paint: {
// "line-color": "#C5C6F3",
// "line-width": 1,
// "line-opacity": 1,
// },
// });
// }
} }
}, },
{ deep: true } { deep: true }
@ -56401,8 +56402,6 @@ onUnmounted(() => {
width: 100%; width: 100%;
height: 100%; height: 100%;
position: absolute; position: absolute;
left: 0;
top: 0;
visibility: visible; visibility: visible;
} }
#mapContainer { #mapContainer {
@ -56410,6 +56409,7 @@ onUnmounted(() => {
height: 100%; height: 100%;
position: absolute; position: absolute;
background-color: #fff; background-color: #fff;
cursor: grab;
z-index: 1; z-index: 1;
} }
/* 消除瓦片之间的缝隙和默认边框 */ /* 消除瓦片之间的缝隙和默认边框 */

57
frontend/src/components/gis/map.class.ts
View File

@ -1,6 +1,6 @@
import type { layer, MapInterface } from "./map.d"; import type { layer, MapInterface } from './map.d';
// import { MapLeaflet } from "./map.leaflet"; // import { MapLeaflet } from "./map.leaflet";
import { MapOl } from "./map.ol"; import { MapOl } from './map.ol';
interface MapClassInterface extends MapInterface { interface MapClassInterface extends MapInterface {
layers: Map<string, layer>; layers: Map<string, layer>;
@ -16,7 +16,8 @@ export type MDOptions = {
isRemove?: boolean; // 是否移除标签 isRemove?: boolean; // 是否移除标签
}; };
export const mapServerBaseUrl = localStorage.getItem("gisurl") || "http://210.72.227.199:18084/"; export const mapServerBaseUrl =
localStorage.getItem('gisurl') || 'http://210.72.227.199:18084/';
export class MapClass implements MapClassInterface { export class MapClass implements MapClassInterface {
layers: Map<string, layer>; layers: Map<string, layer>;
@ -38,14 +39,14 @@ export class MapClass implements MapClassInterface {
} }
// 地图初始化 // 地图初始化
init(container: HTMLElement, rectangle?: any): Promise<any> { init(container: HTMLElement, rectangle?: any): Promise<any> {
return this.service.init(container, rectangle).then((map) => { return this.service.init(container, rectangle).then(map => {
this.view = map; this.view = map;
return map; return map;
}); });
} }
// 基地面板控制 // 基地面板控制
jdPanelControlShowAndHidden(baseid: String, isAll: boolean): void { jdPanelControlShowAndHidden(baseid: String, isAll: boolean): void {
this.service.jdPanelControlShowAndHidden(baseid, isAll) this.service.jdPanelControlShowAndHidden(baseid, isAll);
} }
mdLayerShowOrHidden(): void { mdLayerShowOrHidden(): void {
// layerType: String, key?: String, baseid: String, checked: boolean, isAll: boolean // layerType: String, key?: String, baseid: String, checked: boolean, isAll: boolean
@ -53,62 +54,71 @@ export class MapClass implements MapClassInterface {
} }
// 添加基础数据图层 // 添加基础数据图层
addBaseDataLayer(layer: any): void { addBaseDataLayer(layer: any): void {
return this.service.addBaseDataLayer(layer) return this.service.addBaseDataLayer(layer);
} }
// 基础图层显示影隐藏方法 // 基础图层显示影隐藏方法
controlBaseLayerTreeShowAndHidden(layerType: String, key: String, checked: boolean) { controlBaseLayerTreeShowAndHidden(
this.service.controlBaseLayerTreeShowAndHidden(layerType, key, checked) layerType: String,
key: String,
checked: boolean
) {
this.service.controlBaseLayerTreeShowAndHidden(layerType, key, checked);
} }
// 图层树控制描点数据显示隐藏方法 // 图层树控制描点数据显示隐藏方法
mdLayerTreeShowOrHidden(layerType: String, checked?: boolean) { mdLayerTreeShowOrHidden(layerType: String, checked?: boolean) {
this.service.mdLayerTreeShowOrHidden(layerType, checked) this.service.mdLayerTreeShowOrHidden(layerType, checked);
} }
// 初始化加载描点数据 // 初始化加载描点数据
addInitDataLayer = (pointData: any[], layerType: any, mdoptions?: any) => { addInitDataLayer = (pointData: any[], layerType: any, mdoptions?: any) => {
return this.service.addInitDataLayer(pointData, layerType, mdoptions) return this.service.addInitDataLayer(pointData, layerType, mdoptions);
} };
//切换底图 //切换底图
baseLayerSwitcher(key: string): void { baseLayerSwitcher(key: string): void {
this.service.baseLayerSwitcher(key) this.service.baseLayerSwitcher(key);
} }
// 添加梯级流域图 // 添加梯级流域图
addTertiarybasinLayer(layer: layer, fillcolor: any, outlineColor: any, datas: any): void { addTertiarybasinLayer(
this.service.addTertiarybasinLayer(layer, fillcolor, outlineColor, datas) layer: layer,
fillcolor: any,
outlineColor: any,
datas: any
): void {
this.service.addTertiarybasinLayer(layer, fillcolor, outlineColor, datas);
} }
// 移除梯级流域图 // 移除梯级流域图
removeTertiarybasinLayer(layer: layer): void { removeTertiarybasinLayer(layer: layer): void {
this.service.removeTertiarybasinLayer?.(layer) this.service.removeTertiarybasinLayer?.(layer);
} }
// 缩放 // 缩放
zoomToggle(type: 'out' | 'in') { zoomToggle(type: 'out' | 'in') {
this.service.zoomToggle(type) this.service.zoomToggle(type);
} }
/** /**
* 长度量算 * 长度量算
*/ */
lengthCalculate(): void { lengthCalculate(): void {
this.service.lengthCalculate() this.service.lengthCalculate();
} }
/** /**
* 面积量算 * 面积量算
*/ */
areCalculate(): void { areCalculate(): void {
this.service.areCalculate() this.service.areCalculate();
} }
/** /**
* 移除量算结果 * 移除量算结果
*/ */
removeQueryLayer(): void { removeQueryLayer(): void {
this.service.removeQueryLayer() this.service.removeQueryLayer();
} }
// 地图打印 // 地图打印
mapOutPut() { mapOutPut() {
this.service.mapOutPut() this.service.mapOutPut();
} }
// 销毁地图 // 销毁地图
destroy(): void { destroy(): void {
this.service.destroy() this.service.destroy();
} }
// 切换地图视图 // 切换地图视图
@ -122,8 +132,7 @@ export class MapClass implements MapClassInterface {
} }
// 飞行到指定的点 // 飞行到指定的点
flyTopanto(): void { flyTopanto(position: number[], zoom: number): void {
// this.service.flyTopanto(point) this.service.flyTopanto(position, zoom);
} }
} }

127
frontend/src/components/gis/map.d.ts vendored
View File

@ -1,15 +1,14 @@
import { MDOptions } from './map.class';
import { MDOptions } from './map.class'
export type layerType = export type layerType =
| "markers" | 'markers'
| "tiledMap" | 'tiledMap'
| "tiledMapQuery" | 'tiledMapQuery'
| "geoJson" | 'geoJson'
| "arcgisFeature" | 'arcgisFeature'
| "dynamicMapLayer" | 'dynamicMapLayer'
| "arcgisMap" | 'arcgisMap'
| "label" | 'label'
| "vector"; | 'vector';
export type layerOption = { export type layerOption = {
opacity?: number; opacity?: number;
data?: Array<any>; data?: Array<any>;
@ -18,34 +17,34 @@ export type layerOption = {
hoverEvent?: Function; hoverEvent?: Function;
legendImages?: Array<any> | null | undefined; legendImages?: Array<any> | null | undefined;
geoJsonLegend?: Array<any> | null | undefined; geoJsonLegend?: Array<any> | null | undefined;
tiledMapType?: undefined | "superMap"; tiledMapType?: undefined | 'superMap';
}; };
export interface layer { export interface layer {
id: string id: string;
key: string key: string;
_layer?: any _layer?: any;
type?: layerType type?: layerType;
url?: string url?: string;
url_3d?: string url_3d?: string;
geojson_url: string geojson_url: string;
label?: string label?: string;
thumbnail?: string thumbnail?: string;
visible?: boolean visible?: boolean;
option?: layerOption option?: layerOption;
tempobj?: any tempobj?: any;
layers?: any layers?: any;
rasteropacity?: any rasteropacity?: any;
imgUrl?: any imgUrl?: any;
minZoom?: any minZoom?: any;
maxZoom?: any maxZoom?: any;
minHeight?: number minHeight?: number;
maxHeight?: number maxHeight?: number;
/** layer 类型 */ /** layer 类型 */
layerType?: string layerType?: string;
matrixIds_index?: string[] matrixIds_index?: string[];
tileMatrixSetID?: string tileMatrixSetID?: string;
urlType: string urlType: string;
} }
export interface MapInterface { export interface MapInterface {
@ -54,48 +53,59 @@ export interface MapInterface {
* @param container DOM容器 * @param container DOM容器
* @return any 地图视图 * @return any 地图视图
*/ */
init(container: HTMLElement, rectangle?: any, center?: any, altitude?: number, bearing?: number): Promise<any> init(
container: HTMLElement,
rectangle?: any,
center?: any,
altitude?: number,
bearing?: number
): Promise<any>;
/** /**
* 初始化加载描点数据 * 初始化加载描点数据
* @param pointData * @param pointData
* @param layerType * @param layerType
*/ */
addInitDataLayer(pointData: any[], layerType: any, mdoptions: MDOptions): void addInitDataLayer(
pointData: any[],
layerType: any,
mdoptions: MDOptions
): void;
/** /**
* 初始化加载基础图层 * 初始化加载基础图层
* @param layer * @param layer
*/ */
addBaseDataLayer(layer: any): void addBaseDataLayer(layer: any): void;
/** /**
* 切换底图 * 切换底图
* @param layer * @param layer
*/ */
baseLayerSwitcher(key: string): void baseLayerSwitcher(key: string): void;
/** /**
* 切换2D或者3D视图 * 切换2D或者3D视图
* @param type '2D' | '3D' * @param type '2D' | '3D'
*/ */
switchView(type: '2D' | '3D'): any | null switchView(type: '2D' | '3D'): any | null;
/** /**
* 缩放 * 缩放
* out 缩小 * out 缩小
* in 放大 * in 放大
*/ */
zoomToggle(type: 'out' | 'in'): void zoomToggle(type: 'out' | 'in'): void;
/** /**
* 地图输出打印 * 地图输出打印
*/ */
mapOutPut(): void mapOutPut(): void;
//飞行到指定的点 //飞行到指定的点
fitBounds(bbox,bearing):void fitBounds(bbox, bearing): void;
flyTopanto(positon,zoom,stcd):void
flyTopanto(positon, zoom): void;
// /** // /**
// * 加载倾斜摄影数据 // * 加载倾斜摄影数据
// * @param HH3DUrlArray // * @param HH3DUrlArray
@ -131,7 +141,7 @@ export interface MapInterface {
* @param baseid * @param baseid
* @param isAll * @param isAll
*/ */
jdPanelControlShowAndHidden(baseid: String, isAll: boolean): void jdPanelControlShowAndHidden(baseid: String, isAll: boolean): void;
/** /**
* 图例和基地面板控制描点数据显示隐藏方法 * 图例和基地面板控制描点数据显示隐藏方法
* @param layerType * @param layerType
@ -139,49 +149,58 @@ export interface MapInterface {
* @param checked * @param checked
* @param isAll * @param isAll
*/ */
mdLayerShowOrHidden(): void mdLayerShowOrHidden(): void;
// layerType: String, key?: String, baseid: String, checked: boolean, isAll: boolean // layerType: String, key?: String, baseid: String, checked: boolean, isAll: boolean
/** /**
* 基础图层显示影隐藏方法 * 基础图层显示影隐藏方法
* @param layerType * @param layerType
* @param checked * @param checked
*/ */
controlBaseLayerTreeShowAndHidden(layerType: String, key: String, checked: boolean): void controlBaseLayerTreeShowAndHidden(
layerType: String,
key: String,
checked: boolean
): void;
/** /**
* 图层树控制描点数据显示隐藏方法 * 图层树控制描点数据显示隐藏方法
* @param layerType * @param layerType
* @param checked * @param checked
*/ */
mdLayerTreeShowOrHidden(layerType: String, checked?: boolean): void mdLayerTreeShowOrHidden(layerType: String, checked?: boolean): void;
/** /**
* 长度量算 * 长度量算
*/ */
lengthCalculate(): void lengthCalculate(): void;
/** /**
* 面积量算 * 面积量算
*/ */
areCalculate(): void areCalculate(): void;
/** /**
* 移除量算结果 * 移除量算结果
*/ */
removeQueryLayer(): void removeQueryLayer(): void;
/** /**
* 添加梯级流域图 * 添加梯级流域图
* @param layer * @param layer
* @param fillcolor * @param fillcolor
*/ */
addTertiarybasinLayer(layer: layer, fillcolor: any, outlineColor: any, datas: any): void addTertiarybasinLayer(
layer: layer,
fillcolor: any,
outlineColor: any,
datas: any
): void;
/** /**
* 移除梯级流域图 * 移除梯级流域图
* @param layer * @param layer
*/ */
removeTertiarybasinLayer(layer: layer): void removeTertiarybasinLayer(layer: layer): void;
/** /**
* 移除地图对象 * 移除地图对象
*/ */
destroy(): void destroy(): void;
} }

437
frontend/src/components/gis/map.ol.ts
View File

@ -55,8 +55,10 @@ export class MapOl implements MapInterface {
// ✅ 新增：存储 key -> layer 实例，用于控制显示隐藏和切换 // ✅ 新增：存储 key -> layer 实例，用于控制显示隐藏和切换
private layerRegistry: Map<string, any> = new Map(); private layerRegistry: Map<string, any> = new Map();
// ✅ 新增：记录当前正在显示的“切换 Key”，用于判断是否需要重新加载或只是切换显隐 // ✅ 新增：记录当前正在显示的“切换 Key”，用于判断是否需要重新加载或只是切换显隐
// 基础图层配置
private baseLayerConfig: TileLayer | null = null; private baseLayerConfig: TileLayer | null = null;
// private hydropBaseConfig: TileLayer | null = null; // 基地配置
private hydropBaseConfig: any | null = null;
private REGISTRY_KEY = 'customBaseLayer'; private REGISTRY_KEY = 'customBaseLayer';
// ✅ 新增：量算相关属性 // ✅ 新增：量算相关属性
@ -70,9 +72,9 @@ export class MapOl implements MapInterface {
// ✅ 新增：声明用于存储 mask 事件监听器的引用，以便后续移除 // ✅ 新增：声明用于存储 mask 事件监听器的引用，以便后续移除
private _maskPrerender: any = null; private _maskPrerender: any = null;
private _maskPostrender: any = null; private _maskPostrender: any = null;
// private BASEID: string = '01'; private BASEID: string = '';
constructor() { constructor() {
this.loadGeoJsonData(); // this.loadGeoJsonData();
this.loadGeoJsonData1(); this.loadGeoJsonData1();
} }
private async loadGeoJsonData(): Promise<void> { private async loadGeoJsonData(): Promise<void> {
@ -83,6 +85,15 @@ export class MapOl implements MapInterface {
console.error('配置加载失败:', error); console.error('配置加载失败:', error);
} }
} }
private async loadGeoJsonData2(url): Promise<any> {
try {
const response = await fetch(url);
const data = await response.json();
return data;
} catch (error) {
console.error('配置加载失败:', error);
}
}
private async loadGeoJsonData1(): Promise<void> { private async loadGeoJsonData1(): Promise<void> {
try { try {
const response = await fetch('/data/geoJson1.json'); const response = await fetch('/data/geoJson1.json');
@ -402,8 +413,6 @@ export class MapOl implements MapInterface {
matrixIds[z] = `${matrixSetName}:${z}`; matrixIds[z] = `${matrixSetName}:${z}`;
} }
console.log('Using Matrix IDs sample:', matrixIds[0], matrixIds[1]);
// 4. 创建 WMTS 图层 // 4. 创建 WMTS 图层
const wmtsLayer = new TileLayer({ const wmtsLayer = new TileLayer({
source: new WMTS({ source: new WMTS({
@ -428,6 +437,7 @@ export class MapOl implements MapInterface {
} else { } else {
wmtsLayer.setZIndex(-99); wmtsLayer.setZIndex(-99);
} }
console.log('基础图层', wmtsLayer);
// 5. 注册与添加 // 5. 注册与添加
this.layerRegistry.set(layer.key, wmtsLayer); this.layerRegistry.set(layer.key, wmtsLayer);
this.map.addLayer(wmtsLayer); this.map.addLayer(wmtsLayer);
@ -445,141 +455,11 @@ export class MapOl implements MapInterface {
this.map.addLayer(tileLayer); this.map.addLayer(tileLayer);
} else if (layer.type === 'vector') { } else if (layer.type === 'vector') {
if (layer.key === 'hydropBase') { if (layer.key === 'hydropBase') {
// this.hydropBaseConfig = layer; this.hydropBaseConfig = layer;
} }
// ✅ 1. 创建矢量源，关键是要配置投影转换
const vectorSource = new VectorSource({
features: new GeoJSON().readFeatures(this.geoJsonData1, {
dataProjection: 'EPSG:4326',
featureProjection: 'EPSG:3857' // 确保转换到地图使用的投影
})
// url: layer.geojson_url +`&BASEID=BASEID'${this.BASEID}'` , // 远程 GeoJSON 地址
// format: new GeoJSON({
// featureProjection: 'EPSG:3857'
// })
});
// ✅ 2. 创建矢量图层，添加默认样式防止透明
const vectorLayer = new VectorLayer({
source: vectorSource,
style: new Style({
stroke: new Stroke({
color: '#3399CC', // 默认蓝色边框
width: 2
}),
fill: new Fill({
color: 'rgba(51, 153, 204, 0.4)' // 默认半透明填充
})
}),
// ✅ 3. 调整 zIndex，确保在底图之上可见
zIndex: 101,
visible: true
});
// 监听数据加载完成事件
vectorSource.on('featuresloadend', () => {
// 获取所有加载的要素
const features = vectorSource.getFeatures();
const feature = features[0];
const geometry = feature.getGeometry();
console.log(geometry);
// this.addClipToRasterLayer(this.layerRegistry.get(this.REGISTRY_KEY), geometry);
// this.applyMapMask(geometry);
});
// 4. 注册与添加
this.layerRegistry.set(layer.key, vectorLayer);
// this.map.addLayer(vectorLayer);
layer._layer = vectorLayer;
const targetBaseLayer = this.layerRegistry.get(this.REGISTRY_KEY);
this.applyMapMask(targetBaseLayer as TileLayer, this.geoJsonData1);
console.log(`矢量图层 [${layer.key}] 已加载: ${layer.url}`); console.log(`矢量图层 [${layer.key}] 已加载: ${layer.url}`);
} }
} }
/**
* 为栅格图层添加裁切效果
* @param layer 栅格图层（TileLayer）
* @param clipGeometry 裁切几何（Polygon 或 MultiPolygon，EPSG:3857 投影）
*/
// private addClipToRasterLayer(layer: TileLayer<any>, clipGeometry: Geometry): void {
// if (!layer || !clipGeometry) return;
// // 处理几何类型，统一为多边形数组
// let polygons: Polygon[] = [];
// const type = clipGeometry.getType();
// if (type === 'Polygon') {
// polygons = [clipGeometry as Polygon];
// } else if (type === 'MultiPolygon') {
// const multiPolygon = clipGeometry as MultiPolygon;
// const coords = multiPolygon.getCoordinates();
// polygons = coords.map(coord => new Polygon(coord));
// } else {
// console.error('不支持的几何类型:', type);
// return;
// }
// // 预存储所有外环坐标
// const allRings: number[][][] = [];
// for (const polygon of polygons) {
// const coords = polygon.getCoordinates();
// if (coords && coords[0] && coords[0].length > 0) {
// allRings.push(coords[0]);
// }
// }
// // 移除旧事件
// layer.removeEventListener('prerender');
// layer.removeEventListener('postrender');
// // 渲染前：设置裁切区域
// layer.on('prerender', (event) => {
// const context = event.context;
// const frameState = event.frameState;
// if (!context || !frameState) return;
// // 获取坐标转像素函数
// const toPixel = frameState.coordinateToPixel;
// if (!toPixel) return;
// context.save();
// context.beginPath();
// let hasPath = false;
// for (const ring of allRings) {
// if (!ring || ring.length === 0) continue;
// for (let i = 0; i < ring.length; i++) {
// const coord = ring[i];
// const pixel = toPixel(coord);
// if (!pixel || pixel.length < 2) continue;
// if (i === 0) {
// context.moveTo(pixel[0], pixel[1]);
// } else {
// context.lineTo(pixel[0], pixel[1]);
// }
// hasPath = true;
// }
// context.closePath();
// }
// if (hasPath) {
// context.clip();
// } else {
// context.restore();
// }
// });
// // 渲染后：恢复状态
// layer.on('postrender', (event) => {
// if (event.context) {
// event.context.restore();
// }
// });
// }
// 在 addBaseDataLayer 方法的 vector 分支末尾，或者专门提供一个方法来激活遮罩 // 在 addBaseDataLayer 方法的 vector 分支末尾，或者专门提供一个方法来激活遮罩
enableNortheastMask(): void { enableNortheastMask(): void {
// 1. 获取全量底图图层 // 1. 获取全量底图图层
@ -603,12 +483,52 @@ export class MapOl implements MapInterface {
* @param regionId 区域ID (例如 "hebei", "13", "01" 等，需与图层 Key 或属性对应) * @param regionId 区域ID (例如 "hebei", "13", "01" 等，需与图层 Key 或属性对应)
* @param isAll 是否显示所有 (true: 显示所有图层; false: 仅显示匹配 regionId 的图层，隐藏其他) * @param isAll 是否显示所有 (true: 显示所有图层; false: 仅显示匹配 regionId 的图层，隐藏其他)
*/ */
jdPanelControlShowAndHidden(_regionId: string): void { async jdPanelControlShowAndHidden(
// this.BASEID = regionId; _regionId: string,
// console.log(this.layerRegistry); isAll: boolean
// console.log(this.layerRegistry.keys()); ): Promise<void> {
// this.addBaseDataLayer(this.hydropBaseConfig); if (!this.map || !this.hydropBaseConfig) {
// this.controlBaseLayerTreeShowAndHidden(this.REGISTRY_KEY,this.REGISTRY_KEY,false) console.warn('地图未初始化或 hydropBaseConfig 未配置');
return;
}
// 1. 更新当前选中的区域 ID
this.BASEID = _regionId;
console.log(`切换区域至: ${this.BASEID}`);
if (!isAll) {
// ✅ 情况 A: isAll == false -> 清空裁切
this.clearMapMask();
return;
}
// 2. 获取底图图层 (用于应用遮罩的目标)
const baseLayer = this.layerRegistry.get(this.REGISTRY_KEY) as TileLayer;
if (!baseLayer) {
console.warn('未找到底图图层，无法应用遮罩');
return;
}
try {
const url =
this.hydropBaseConfig.geojson_url +
`&cql_filter=BASEID='${this.BASEID}'`;
console.log('正在请求裁切数据:', url);
// 等待数据加载
const geoJsonData = await this.loadGeoJsonData2(url);
console.log('获取到的原始 GeoJSON:', geoJsonData);
// ✅ 新增：在应用遮罩前，先让地图视角聚焦到该区域
this.fitViewToGeoJson(geoJsonData);
console.log('基础图层', baseLayer);
// 应用遮罩
this.applyMapMask(baseLayer, geoJsonData);
} catch (error) {
console.error('加载裁切数据失败:', error);
// 出错时也清空遮罩，保证用户体验
this.clearMapMask();
}
} }
/** /**
* 基础图层显示影隐藏方法 * 基础图层显示影隐藏方法
@ -1224,38 +1144,18 @@ export class MapOl implements MapInterface {
private applyMapMask(rasterLayer: TileLayer, clipGeoJson: any): void { private applyMapMask(rasterLayer: TileLayer, clipGeoJson: any): void {
if (!rasterLayer || !clipGeoJson) return; if (!rasterLayer || !clipGeoJson) return;
// 1. 解析 GeoJSON // 1. 解析 GeoJSON 为 OL Features (EPSG:3857)
const features = new GeoJSON().readFeatures(clipGeoJson, { const features = new GeoJSON().readFeatures(clipGeoJson, {
dataProjection: 'EPSG:4326', dataProjection: 'EPSG:4326',
featureProjection: 'EPSG:3857' featureProjection: 'EPSG:3857'
}); });
// if (!features || features.length === 0) { if (!features || features.length === 0) {
// console.warn('裁切数据为空'); console.warn('裁切数据为空，无法应用遮罩');
// return; return;
// } }
// // ✅ 调试：添加绿线图层 // 2. 移除旧的监听器，防止重复绑定
// const debugVectorSource = new VectorSource({ features: features });
// let debugLayer = this.map!.getLayers()
// .getArray()
// .find((l: any) => l.get('isDebugMask'));
// if (debugLayer) {
// this.map!.removeLayer(debugLayer);
// }
// debugLayer = new VectorLayer({
// source: debugVectorSource,
// style: new Style({
// stroke: new Stroke({ color: '#00FF00', width: 2 }),
// fill: new Fill({ color: 'rgba(0, 255, 0, 0.1)' })
// }),
// zIndex: 9999,
// visible: true
// });
// debugLayer.set('isDebugMask', true);
// this.map!.addLayer(debugLayer);
// 移除旧监听器
if (this._maskPrerender) { if (this._maskPrerender) {
rasterLayer.un('prerender', this._maskPrerender); rasterLayer.un('prerender', this._maskPrerender);
} }
@ -1263,108 +1163,209 @@ export class MapOl implements MapInterface {
rasterLayer.un('postrender', this._maskPostrender); rasterLayer.un('postrender', this._maskPostrender);
} }
// 3. 定义 prerender 事件处理函数
// OpenLayers 在 prerender 时，context 已经包含了当前帧的状态
const maskPrerender = (event: any) => { const maskPrerender = (event: any) => {
const context = event.context; const context = event.context;
if (!context || !this.map) return;
const frameState = event.frameState; const frameState = event.frameState;
if (!frameState) return;
if (!context || !frameState || !this.map) return;
// ✅ 关键步骤 1: 保存当前 Canvas 状态
context.save(); context.save();
// ✅ 关键步骤 2: 重置变换矩阵，确保我们操作的是屏幕像素坐标
// OpenLayers 默认可能应用了平移/缩放，我们需要手动控制
context.setTransform(1, 0, 0, 1, 0, 0); context.setTransform(1, 0, 0, 1, 0, 0);
context.beginPath(); context.beginPath();
let hasPath = false; let hasValidPath = false;
// 遍历所有特征，绘制路径
for (const feature of features) { for (const feature of features) {
const geom: any = feature.getGeometry(); const geom = feature.getGeometry();
if (!geom) continue; if (!geom) continue;
const type = geom.getType(); const type = geom.getType();
// 处理 Polygon
if (type === 'Polygon') { if (type === 'Polygon') {
const rings = geom.getCoordinates() as number[][][]; const rings = (geom as any).getCoordinates() as number[][][];
for (const ring of rings) { for (const ring of rings) {
// ✅ 传递 frameState 给 drawRing if (this.drawRingToContext(context, ring, frameState)) {
this.drawRing(context, ring, frameState); hasValidPath = true;
hasPath = true;
} }
} else if (type === 'MultiPolygon') { }
const polygons = geom.getCoordinates() as number[][][][]; }
// 处理 MultiPolygon
else if (type === 'MultiPolygon') {
const polygons = (geom as any).getCoordinates() as number[][][][];
for (const polygonRings of polygons) { for (const polygonRings of polygons) {
for (const ring of polygonRings) { for (const ring of polygonRings) {
// ✅ 传递 frameState 给 drawRing if (this.drawRingToContext(context, ring, frameState)) {
this.drawRing(context, ring, frameState); hasValidPath = true;
hasPath = true;
} }
} }
} }
} }
if (hasPath) { }
context.strokeStyle = 'red';
context.lineWidth = 2; // ✅ 关键步骤 3: 如果绘制了有效路径，则执行裁剪
if (hasValidPath) {
// 闭合路径（虽然 drawRing 里做了 closePath，但为了保险）
context.save();
// 先用外描边创建裁剪区域
context.lineWidth = 6;
context.strokeStyle = '#6D64DF';
context.stroke(); context.stroke();
context.fillStyle = 'rgba(255, 255, 0, 0.2)'; context.clip(); // 裁剪到外描边的内部区域
context.fill(); context.strokeStyle = '#CCC9F4';
// context.clip(); context.lineWidth = 5;
context.stroke();
// 执行裁剪！此后所有绘制操作仅在此路径内可见
context.clip();
// 可选：如果你希望裁剪区域外有半透明黑色遮罩，可以在这里绘制一个全屏矩形
// 但通常我们只希望“隐藏”外部，所以只需 clip 即可，OL 会自动绘制瓦片
} else { } else {
console.warn('未能生成有效的裁切路径');
} }
context.restore();
}; };
// 4. 定义 postrender 事件处理函数
// 用于恢复 Canvas 状态，避免影响其他图层或后续帧
const maskPostrender = (event: any) => { const maskPostrender = (event: any) => {
if (event.context) { if (event.context) {
event.context.restore(); event.context.restore();
} }
}; };
// 5. 绑定新的事件监听器
this._maskPrerender = maskPrerender; this._maskPrerender = maskPrerender;
this._maskPostrender = maskPostrender; this._maskPostrender = maskPostrender;
rasterLayer.on('prerender', this._maskPrerender); rasterLayer.on('prerender', this._maskPrerender);
rasterLayer.on('postrender', this._maskPostrender); rasterLayer.on('postrender', this._maskPostrender);
// 6. 强制触发重绘
rasterLayer.changed(); rasterLayer.changed();
console.log('地图遮罩已应用');
} }
private drawRing( /**
* 将单个环（Ring）绘制到 Canvas 上下文
* @returns boolean 是否成功绘制了有效路径
*/
private drawRingToContext(
context: CanvasRenderingContext2D, context: CanvasRenderingContext2D,
ring: number[][], ring: number[][],
frameState: any frameState: any
) { ): boolean {
if (!ring || ring.length === 0) return; if (!ring || ring.length < 3) return false; // 至少需要3个点构成面
// ✅ 关键：获取当前 Canvas 的像素比（高清屏通常为 2）
// frameState.pixelRatio 是 OL 内部使用的像素比
const pixelRatio = frameState.pixelRatio || window.devicePixelRatio || 1; const pixelRatio = frameState.pixelRatio || window.devicePixelRatio || 1;
let moved = false;
for (let i = 0; i < ring.length; i++) { for (let i = 0; i < ring.length; i++) {
const coord = ring[i]; const coord = ring[i];
if (!this.map || !Array.isArray(coord) || typeof coord[0] !== 'number') // 坐标有效性检查
continue; if (!coord || coord.length < 2 || typeof coord[0] !== 'number') continue;
// ✅ 1. 获取相对于地图容器的 CSS 像素坐标 // 获取 CSS 像素坐标
const cssPixel = this.map.getPixelFromCoordinate( const cssPixel = this.map?.getPixelFromCoordinate(
coord as [number, number] coord as [number, number]
); );
if (!cssPixel) continue; if (!cssPixel) continue;
// ✅ 2. 转换为 Canvas 内部物理像素坐标 // 转换为物理像素坐标
// 因为我们在 maskPrerender 中执行了 context.setTransform(1, 0, 0, 1, 0, 0);
// 此时 Canvas 的原点是左上角，单位是物理像素。
// 而 getPixelFromCoordinate 返回的是 CSS 像素。
// 所以必须乘以 pixelRatio。
const canvasX = cssPixel[0] * pixelRatio; const canvasX = cssPixel[0] * pixelRatio;
const canvasY = cssPixel[1] * pixelRatio; const canvasY = cssPixel[1] * pixelRatio;
if (i === 0) { if (!moved) {
context.moveTo(canvasX, canvasY); context.moveTo(canvasX, canvasY);
moved = true;
} else { } else {
context.lineTo(canvasX, canvasY); context.lineTo(canvasX, canvasY);
} }
} }
if (moved) {
context.closePath(); context.closePath();
return true;
}
return false;
}
/**
* 根据 GeoJSON 数据调整地图视野，使其居中并适配大小
* @param geoJson GeoJSON 对象
*/
private fitViewToGeoJson(geoJson: any): void {
if (!this.map || !this.view) return;
try {
// 1. 将 GeoJSON 转换为 OpenLayers 的 Feature 数组
// 注意：这里假设输入的是 EPSG:4326，需要转换到地图使用的 EPSG:3857
const features = new GeoJSON().readFeatures(geoJson, {
dataProjection: 'EPSG:4326',
featureProjection: 'EPSG:3857'
});
if (!features || features.length === 0) return;
// 2. 创建一个临时的矢量源来计算所有要素的包围盒
const source = new VectorSource({
features: features
});
// 3. 获取包围盒 [minX, minY, maxX, maxY]
const extent = source.getExtent();
// 检查包围盒是否有效
if (extent[0] === Infinity || extent[0] === -Infinity) {
console.warn('无法计算有效的地图包围盒');
return;
}
// 4. 调整视图
// padding: 设置四周留白，防止图形贴边
// duration: 动画持续时间
// maxZoom: 限制最大缩放级别，防止放大过度导致像素化
this.view.fit(extent, {
padding: [50, 50, 50, 50], // 上右下左留白
duration: 1000, // 1秒动画
maxZoom: 15 // 根据底图精度调整，避免过度放大
});
console.log('地图视野已调整至裁切区域');
} catch (e) {
console.error('调整地图视野失败:', e);
}
}
/**
* 清除地图遮罩（恢复底图正常显示）
*/
private clearMapMask(): void {
const baseLayer = this.layerRegistry.get(this.REGISTRY_KEY) as TileLayer;
if (!baseLayer) return;
console.log('正在清除地图遮罩...');
if (this._maskPrerender) {
baseLayer.un('prerender', this._maskPrerender);
this._maskPrerender = null;
}
if (this._maskPostrender) {
baseLayer.un('postrender', this._maskPostrender);
this._maskPostrender = null;
}
// 强制重绘以移除遮罩效果
baseLayer.changed();
} }
/** /**
* 格式化长度输出 (米) * 格式化长度输出 (米)
@ -1386,7 +1387,33 @@ export class MapOl implements MapInterface {
mdLayerShowOrHidden(): void {} mdLayerShowOrHidden(): void {}
switchView(): void {} switchView(): void {}
fitBounds(): void {} fitBounds(): void {}
flyTopanto(): void {} /**
* 飞行定位到指定经纬度和缩放级别
* @param position [经度, 纬度] (EPSG:4326)
* @param zoom 缩放级别
*/
flyTopanto(position: number[], zoom: number): void {
if (!this.map || !this.view) {
console.warn('地图未初始化，无法执行飞行定位');
return;
}
// 1. 将经纬度 [lon, lat] 转换为地图投影坐标 (EPSG:3857)
const targetCenter = fromLonLat(position);
// 2. 执行动画
// duration: 动画持续时间，单位毫秒，例如 1000ms (1秒)
this.view.animate(
{
center: targetCenter,
duration: 1000
},
{
zoom: zoom,
duration: 1000
}
);
}
/** /**
* 移除地图对象，释放资源 * 移除地图对象，释放资源
*/ */

4
frontend/src/layout/components/AppMain.vue
View File

@ -16,7 +16,7 @@ const routeKey = computed(() => router.path + Math.random());
<template> <template>
<section class="app-main"> <section class="app-main">
<!-- <GisView /> --> <GisView />
<div class="gi-panels"> <div class="gi-panels">
<router-view v-slot="{ Component, route }" :key="routeKey"> <router-view v-slot="{ Component, route }" :key="routeKey">
<transition name="router-fade" mode="out-in"> <transition name="router-fade" mode="out-in">
@ -49,6 +49,6 @@ const routeKey = computed(() => router.path + Math.random());
position: absolute; position: absolute;
width: 100%; width: 100%;
height: 100%; height: 100%;
z-index: 900; pointer-events: none;
} }
</style> </style>

9
frontend/src/modules/jidiSelectorMod.vue
View File

@ -9,9 +9,7 @@ const jidiDataNum = ref(9);
const itemClick = (index: any) => { const itemClick = (index: any) => {
useJidiSelectEventStore().updataJidiData(index); useJidiSelectEventStore().updataJidiData(index);
}; };
onMounted(() => { onMounted(() => {});
JidiSelectEventStore.jidiData[0].selected = true;
});
</script> </script>
<template> <template>
@ -24,7 +22,10 @@ onMounted(() => {
> >
<div class="title" @click="isOpen = !isOpen"> <div class="title" @click="isOpen = !isOpen">
<div>水电基地</div> <div>水电基地</div>
<div style="padding-right: 5px;" :style="{ transform: !isOpen ? 'rotate(180deg)' : 'rotate(0deg)' }"> <div
style="padding-right: 5px"
:style="{ transform: !isOpen ? 'rotate(180deg)' : 'rotate(0deg)' }"
>
<i class="icon iconfont icon-topOutline"></i> <i class="icon iconfont icon-topOutline"></i>
</div> </div>
</div> </div>

722
frontend/src/store/modules/jidiSelectEvent.ts
View File

@ -2,715 +2,83 @@ import { defineStore } from 'pinia';
import { ref } from 'vue'; import { ref } from 'vue';
export const useJidiSelectEventStore = defineStore('jidiSelectEvent', () => { export const useJidiSelectEventStore = defineStore('jidiSelectEvent', () => {
const jidiData:any = ref([ const jidiData: any = ref([
{ {
"_tls": {}, wbsCode: 'all',
"id": null, wbsName: '当前全部',
"recordUser": null, selected: true
"recordTime": null,
"modifyTime": null,
"displayRecordUser": null,
"isolateType": null,
"wbsType": null,
"wbsCode": "all",
"wbsName": "当前全部",
"wbsSname": null,
"wbsNameEn": null,
"wbsSnameEn": null,
"enable": null,
"description": null,
"parentId": null,
"parentCode": null,
"treeLevel": null,
"hasChildren": null,
"objId": null,
"topWbsType": null,
"fullPath": null,
"internal": null,
"lgtd": null,
"lttd": null,
"area": null,
"perimeter": null,
"synopsis": null,
"introduce": null,
"logo": null,
"inffile": null,
"orderIndex": null,
"filterContent": null,
"departmentId": null,
"systemId": null,
"platformId": null,
"reachWwqtg": null,
"maxElev": null,
"minElev": null,
"datTp": null,
"rvAg": null,
"ifInnRv": null,
"showControl": null,
"stcd": null,
"displayDepartment": null
}, },
{ {
"_tls": {}, wbsCode: '01',
"id": null, wbsName: '金沙江干流',
"recordUser": null, selected: false
"recordTime": null,
"modifyTime": null,
"displayRecordUser": null,
"isolateType": null,
"wbsType": null,
"wbsCode": "01",
"wbsName": "金沙江干流",
"wbsSname": null,
"wbsNameEn": null,
"wbsSnameEn": null,
"enable": null,
"description": null,
"parentId": null,
"parentCode": null,
"treeLevel": null,
"hasChildren": null,
"objId": null,
"topWbsType": null,
"fullPath": null,
"internal": null,
"lgtd": null,
"lttd": null,
"area": null,
"perimeter": null,
"synopsis": null,
"introduce": null,
"logo": null,
"inffile": null,
"orderIndex": null,
"filterContent": null,
"departmentId": null,
"systemId": null,
"platformId": null,
"reachWwqtg": null,
"maxElev": null,
"minElev": null,
"datTp": null,
"rvAg": null,
"ifInnRv": null,
"showControl": null,
"stcd": null,
"displayDepartment": null
}, },
{ {
"_tls": {}, wbsCode: '02',
"id": null, wbsName: '雅砻江干流',
"recordUser": null, selected: false
"recordTime": null,
"modifyTime": null,
"displayRecordUser": null,
"isolateType": null,
"wbsType": null,
"wbsCode": "02",
"wbsName": "雅砻江干流",
"wbsSname": null,
"wbsNameEn": null,
"wbsSnameEn": null,
"enable": null,
"description": null,
"parentId": null,
"parentCode": null,
"treeLevel": null,
"hasChildren": null,
"objId": null,
"topWbsType": null,
"fullPath": null,
"internal": null,
"lgtd": null,
"lttd": null,
"area": null,
"perimeter": null,
"synopsis": null,
"introduce": null,
"logo": null,
"inffile": null,
"orderIndex": null,
"filterContent": null,
"departmentId": null,
"systemId": null,
"platformId": null,
"reachWwqtg": null,
"maxElev": null,
"minElev": null,
"datTp": null,
"rvAg": null,
"ifInnRv": null,
"showControl": null,
"stcd": null,
"displayDepartment": null
}, },
{ {
"_tls": {}, wbsCode: '03',
"id": null, wbsName: '大渡河干流',
"recordUser": null, selected: false
"recordTime": null,
"modifyTime": null,
"displayRecordUser": null,
"isolateType": null,
"wbsType": null,
"wbsCode": "03",
"wbsName": "大渡河干流",
"wbsSname": null,
"wbsNameEn": null,
"wbsSnameEn": null,
"enable": null,
"description": null,
"parentId": null,
"parentCode": null,
"treeLevel": null,
"hasChildren": null,
"objId": null,
"topWbsType": null,
"fullPath": null,
"internal": null,
"lgtd": null,
"lttd": null,
"area": null,
"perimeter": null,
"synopsis": null,
"introduce": null,
"logo": null,
"inffile": null,
"orderIndex": null,
"filterContent": null,
"departmentId": null,
"systemId": null,
"platformId": null,
"reachWwqtg": null,
"maxElev": null,
"minElev": null,
"datTp": null,
"rvAg": null,
"ifInnRv": null,
"showControl": null,
"stcd": null,
"displayDepartment": null
}, },
{ {
"_tls": {}, wbsCode: '04',
"id": null, wbsName: '乌江干流',
"recordUser": null, selected: false
"recordTime": null,
"modifyTime": null,
"displayRecordUser": null,
"isolateType": null,
"wbsType": null,
"wbsCode": "04",
"wbsName": "乌江干流",
"wbsSname": null,
"wbsNameEn": null,
"wbsSnameEn": null,
"enable": null,
"description": null,
"parentId": null,
"parentCode": null,
"treeLevel": null,
"hasChildren": null,
"objId": null,
"topWbsType": null,
"fullPath": null,
"internal": null,
"lgtd": null,
"lttd": null,
"area": null,
"perimeter": null,
"synopsis": null,
"introduce": null,
"logo": null,
"inffile": null,
"orderIndex": null,
"filterContent": null,
"departmentId": null,
"systemId": null,
"platformId": null,
"reachWwqtg": null,
"maxElev": null,
"minElev": null,
"datTp": null,
"rvAg": null,
"ifInnRv": null,
"showControl": null,
"stcd": null,
"displayDepartment": null
}, },
{ {
"_tls": {}, wbsCode: '05',
"id": null, wbsName: '长江上游干流',
"recordUser": null, selected: false
"recordTime": null,
"modifyTime": null,
"displayRecordUser": null,
"isolateType": null,
"wbsType": null,
"wbsCode": "05",
"wbsName": "长江上游干流",
"wbsSname": null,
"wbsNameEn": null,
"wbsSnameEn": null,
"enable": null,
"description": null,
"parentId": null,
"parentCode": null,
"treeLevel": null,
"hasChildren": null,
"objId": null,
"topWbsType": null,
"fullPath": null,
"internal": null,
"lgtd": null,
"lttd": null,
"area": null,
"perimeter": null,
"synopsis": null,
"introduce": null,
"logo": null,
"inffile": null,
"orderIndex": null,
"filterContent": null,
"departmentId": null,
"systemId": null,
"platformId": null,
"reachWwqtg": null,
"maxElev": null,
"minElev": null,
"datTp": null,
"rvAg": null,
"ifInnRv": null,
"showControl": null,
"stcd": null,
"displayDepartment": null
}, },
{ {
"_tls": {}, wbsCode: '10',
"id": null, wbsName: '湘西',
"recordUser": null, selected: false
"recordTime": null,
"modifyTime": null,
"displayRecordUser": null,
"isolateType": null,
"wbsType": null,
"wbsCode": "10",
"wbsName": "湘西",
"wbsSname": null,
"wbsNameEn": null,
"wbsSnameEn": null,
"enable": null,
"description": null,
"parentId": null,
"parentCode": null,
"treeLevel": null,
"hasChildren": null,
"objId": null,
"topWbsType": null,
"fullPath": null,
"internal": null,
"lgtd": null,
"lttd": null,
"area": null,
"perimeter": null,
"synopsis": null,
"introduce": null,
"logo": null,
"inffile": null,
"orderIndex": null,
"filterContent": null,
"departmentId": null,
"systemId": null,
"platformId": null,
"reachWwqtg": null,
"maxElev": null,
"minElev": null,
"datTp": null,
"rvAg": null,
"ifInnRv": null,
"showControl": null,
"stcd": null,
"displayDepartment": null
}, },
{ {
"_tls": {}, wbsCode: '08',
"id": null, wbsName: '黄河上游干流',
"recordUser": null, selected: false
"recordTime": null,
"modifyTime": null,
"displayRecordUser": null,
"isolateType": null,
"wbsType": null,
"wbsCode": "08",
"wbsName": "黄河上游干流",
"wbsSname": null,
"wbsNameEn": null,
"wbsSnameEn": null,
"enable": null,
"description": null,
"parentId": null,
"parentCode": null,
"treeLevel": null,
"hasChildren": null,
"objId": null,
"topWbsType": null,
"fullPath": null,
"internal": null,
"lgtd": null,
"lttd": null,
"area": null,
"perimeter": null,
"synopsis": null,
"introduce": null,
"logo": null,
"inffile": null,
"orderIndex": null,
"filterContent": null,
"departmentId": null,
"systemId": null,
"platformId": null,
"reachWwqtg": null,
"maxElev": null,
"minElev": null,
"datTp": null,
"rvAg": null,
"ifInnRv": null,
"showControl": null,
"stcd": null,
"displayDepartment": null
}, },
{ {
"_tls": {}, wbsCode: '09',
"id": null, wbsName: '黄河中游干流',
"recordUser": null, selected: false
"recordTime": null,
"modifyTime": null,
"displayRecordUser": null,
"isolateType": null,
"wbsType": null,
"wbsCode": "09",
"wbsName": "黄河中游干流",
"wbsSname": null,
"wbsNameEn": null,
"wbsSnameEn": null,
"enable": null,
"description": null,
"parentId": null,
"parentCode": null,
"treeLevel": null,
"hasChildren": null,
"objId": null,
"topWbsType": null,
"fullPath": null,
"internal": null,
"lgtd": null,
"lttd": null,
"area": null,
"perimeter": null,
"synopsis": null,
"introduce": null,
"logo": null,
"inffile": null,
"orderIndex": null,
"filterContent": null,
"departmentId": null,
"systemId": null,
"platformId": null,
"reachWwqtg": null,
"maxElev": null,
"minElev": null,
"datTp": null,
"rvAg": null,
"ifInnRv": null,
"showControl": null,
"stcd": null,
"displayDepartment": null
}, },
{ {
"_tls": {}, wbsCode: '06',
"id": null, wbsName: '南盘江-红水河',
"recordUser": null, selected: false
"recordTime": null,
"modifyTime": null,
"displayRecordUser": null,
"isolateType": null,
"wbsType": null,
"wbsCode": "06",
"wbsName": "南盘江-红水河",
"wbsSname": null,
"wbsNameEn": null,
"wbsSnameEn": null,
"enable": null,
"description": null,
"parentId": null,
"parentCode": null,
"treeLevel": null,
"hasChildren": null,
"objId": null,
"topWbsType": null,
"fullPath": null,
"internal": null,
"lgtd": null,
"lttd": null,
"area": null,
"perimeter": null,
"synopsis": null,
"introduce": null,
"logo": null,
"inffile": null,
"orderIndex": null,
"filterContent": null,
"departmentId": null,
"systemId": null,
"platformId": null,
"reachWwqtg": null,
"maxElev": null,
"minElev": null,
"datTp": null,
"rvAg": null,
"ifInnRv": null,
"showControl": null,
"stcd": null,
"displayDepartment": null
}, },
{ {
"_tls": {}, wbsCode: '12',
"id": null, wbsName: '东北',
"recordUser": null, selected: false
"recordTime": null,
"modifyTime": null,
"displayRecordUser": null,
"isolateType": null,
"wbsType": null,
"wbsCode": "12",
"wbsName": "东北",
"wbsSname": null,
"wbsNameEn": null,
"wbsSnameEn": null,
"enable": null,
"description": null,
"parentId": null,
"parentCode": null,
"treeLevel": null,
"hasChildren": null,
"objId": null,
"topWbsType": null,
"fullPath": null,
"internal": null,
"lgtd": null,
"lttd": null,
"area": null,
"perimeter": null,
"synopsis": null,
"introduce": null,
"logo": null,
"inffile": null,
"orderIndex": null,
"filterContent": null,
"departmentId": null,
"systemId": null,
"platformId": null,
"reachWwqtg": null,
"maxElev": null,
"minElev": null,
"datTp": null,
"rvAg": null,
"ifInnRv": null,
"showControl": null,
"stcd": null,
"displayDepartment": null
}, },
{ {
"_tls": {}, wbsCode: '07',
"id": null, wbsName: '澜沧江干流',
"recordUser": null, selected: false
"recordTime": null,
"modifyTime": null,
"displayRecordUser": null,
"isolateType": null,
"wbsType": null,
"wbsCode": "07",
"wbsName": "澜沧江干流",
"wbsSname": null,
"wbsNameEn": null,
"wbsSnameEn": null,
"enable": null,
"description": null,
"parentId": null,
"parentCode": null,
"treeLevel": null,
"hasChildren": null,
"objId": null,
"topWbsType": null,
"fullPath": null,
"internal": null,
"lgtd": null,
"lttd": null,
"area": null,
"perimeter": null,
"synopsis": null,
"introduce": null,
"logo": null,
"inffile": null,
"orderIndex": null,
"filterContent": null,
"departmentId": null,
"systemId": null,
"platformId": null,
"reachWwqtg": null,
"maxElev": null,
"minElev": null,
"datTp": null,
"rvAg": null,
"ifInnRv": null,
"showControl": null,
"stcd": null,
"displayDepartment": null
}, },
{ {
"_tls": {}, wbsCode: '13',
"id": null, wbsName: '怒江干流'
"recordUser": null,
"recordTime": null,
"modifyTime": null,
"displayRecordUser": null,
"isolateType": null,
"wbsType": null,
"wbsCode": "13",
"wbsName": "怒江干流",
"wbsSname": null,
"wbsNameEn": null,
"wbsSnameEn": null,
"enable": null,
"description": null,
"parentId": null,
"parentCode": null,
"treeLevel": null,
"hasChildren": null,
"objId": null,
"topWbsType": null,
"fullPath": null,
"internal": null,
"lgtd": null,
"lttd": null,
"area": null,
"perimeter": null,
"synopsis": null,
"introduce": null,
"logo": null,
"inffile": null,
"orderIndex": null,
"filterContent": null,
"departmentId": null,
"systemId": null,
"platformId": null,
"reachWwqtg": null,
"maxElev": null,
"minElev": null,
"datTp": null,
"rvAg": null,
"ifInnRv": null,
"showControl": null,
"stcd": null,
"displayDepartment": null
}, },
{ {
"_tls": {}, wbsCode: '11',
"id": null, wbsName: '闽浙赣'
"recordUser": null,
"recordTime": null,
"modifyTime": null,
"displayRecordUser": null,
"isolateType": null,
"wbsType": null,
"wbsCode": "11",
"wbsName": "闽浙赣",
"wbsSname": null,
"wbsNameEn": null,
"wbsSnameEn": null,
"enable": null,
"description": null,
"parentId": null,
"parentCode": null,
"treeLevel": null,
"hasChildren": null,
"objId": null,
"topWbsType": null,
"fullPath": null,
"internal": null,
"lgtd": null,
"lttd": null,
"area": null,
"perimeter": null,
"synopsis": null,
"introduce": null,
"logo": null,
"inffile": null,
"orderIndex": null,
"filterContent": null,
"departmentId": null,
"systemId": null,
"platformId": null,
"reachWwqtg": null,
"maxElev": null,
"minElev": null,
"datTp": null,
"rvAg": null,
"ifInnRv": null,
"showControl": null,
"stcd": null,
"displayDepartment": null
}, },
{ {
"_tls": {}, wbsCode: 'other',
"id": null, wbsName: '其他'
"recordUser": null,
"recordTime": null,
"modifyTime": null,
"displayRecordUser": null,
"isolateType": null,
"wbsType": null,
"wbsCode": "other",
"wbsName": "其他",
"wbsSname": null,
"wbsNameEn": null,
"wbsSnameEn": null,
"enable": null,
"description": null,
"parentId": null,
"parentCode": null,
"treeLevel": null,
"hasChildren": null,
"objId": null,
"topWbsType": null,
"fullPath": null,
"internal": null,
"lgtd": null,
"lttd": null,
"area": null,
"perimeter": null,
"synopsis": null,
"introduce": null,
"logo": null,
"inffile": null,
"orderIndex": null,
"filterContent": null,
"departmentId": null,
"systemId": null,
"platformId": null,
"reachWwqtg": null,
"maxElev": null,
"minElev": null,
"datTp": null,
"rvAg": null,
"ifInnRv": null,
"showControl": null,
"stcd": null,
"displayDepartment": null
} }
]); ]);
const selectedItem = ref(jidiData.value[0]); const selectedItem = ref(jidiData.value[0]);
const updataJidiData = (index: any) => { const updataJidiData = (index: any) => {
console.log(index);
selectedItem.value = jidiData.value[index]; selectedItem.value = jidiData.value[index];
jidiData.value.forEach((item: any) => { jidiData.value.forEach((item: any) => {
item.selected = false; item.selected = false;

23
frontend/src/views/shuJuTianBao/guoYuDaoShuTongJi/index.vue
View File

@ -24,10 +24,7 @@
<script lang="ts" setup> <script lang="ts" setup>
import { ref, reactive, onMounted, h, computed, nextTick } from "vue"; import { ref, reactive, onMounted, h, computed, nextTick } from "vue";
import { import { batchApproveByApprovalId, batchReject } from "@/api/shengPiJiLu";
batchApproveByApprovalId,
batchReject,
} from "@/api/shengPiJiLu";
import { Tag, message } from "ant-design-vue"; import { Tag, message } from "ant-design-vue";
import BasicTable from "@/components/BasicTable/index.vue"; import BasicTable from "@/components/BasicTable/index.vue";
import ApprovalDetailSearch from "../shengPiJiLu/approvalDetailSearch.vue"; import ApprovalDetailSearch from "../shengPiJiLu/approvalDetailSearch.vue";
@ -37,7 +34,10 @@ import { getFishDraftPage } from "@/api/guoYuSheShiShuJuTianBao";
const baseUrl = import.meta.env.VITE_APP_PREVIEW_URL; const baseUrl = import.meta.env.VITE_APP_PREVIEW_URL;
let columns = ref([ let columns = ref([
{ dataIndex: "hbrvnm", key: "hbrvnm", title: "流域", {
dataIndex: "hbrvnm",
key: "hbrvnm",
title: "流域",
customCell: (_, index) => { customCell: (_, index) => {
if (index === 0) { if (index === 0) {
return { rowSpan: 2 }; return { rowSpan: 2 };
@ -51,7 +51,10 @@ let columns = ref([
} }
}, },
}, },
{ dataIndex: "ennm", key: "ennm", title: "电站名称", {
dataIndex: "ennm",
key: "ennm",
title: "电站名称",
customCell: (_, index) => { customCell: (_, index) => {
if (index === 0) { if (index === 0) {
return { rowSpan: 2 }; return { rowSpan: 2 };
@ -63,7 +66,8 @@ let columns = ref([
if (index === 2) { if (index === 2) {
return { colSpan: 1 }; return { colSpan: 1 };
} }
},}, },
},
{ dataIndex: "stnm", key: "stnm", title: "月份" }, { dataIndex: "stnm", key: "stnm", title: "月份" },
{ dataIndex: "startTime", key: "startTime", title: "过鱼开始时间" }, { dataIndex: "startTime", key: "startTime", title: "过鱼开始时间" },
{ dataIndex: "endTime", key: "endTime", title: "过鱼结束时间" }, { dataIndex: "endTime", key: "endTime", title: "过鱼结束时间" },
@ -291,7 +295,6 @@ const handName = (val: any, arr: any) => {
return dictName1; return dictName1;
}; };
// 搜索相关数据 // 搜索相关数据
const searchData = ref<any>({ const searchData = ref<any>({
hbrvcd: "all", hbrvcd: "all",
@ -317,10 +320,12 @@ const computedSearchParams = computed(() => ({
<style scoped lang="scss"> <style scoped lang="scss">
.guoYuDaoShuTongJi-page { .guoYuDaoShuTongJi-page {
position: relative;
z-index: 900;
pointer-events: all;
width: 100%; width: 100%;
height: 100%; height: 100%;
background-color: #ffffff; background-color: #ffffff;
padding: 20px; padding: 20px;
} }
</style> </style>

3
frontend/src/views/shuJuTianBao/guoYuSheShiShuJuHistory/index.vue
View File

@ -351,6 +351,9 @@ onMounted(() => {
<style lang="scss" scoped> <style lang="scss" scoped>
.guoYuSheShiShuJuHistory-page { .guoYuSheShiShuJuHistory-page {
position: relative;
z-index: 900;
pointer-events: all;
width: 100%; width: 100%;
height: 100%; height: 100%;
background-color: #ffffff; background-color: #ffffff;

6
frontend/src/views/shuJuTianBao/guoYuSheShiShuJuTianBao/guoYuSheShiShuJuTianBaoForm.vue
View File

@ -113,10 +113,9 @@
<a-form-item label="过鱼时间" name="strdt"> <a-form-item label="过鱼时间" name="strdt">
<a-date-picker <a-date-picker
v-model:value="formData.strdt" v-model:value="formData.strdt"
show-time
style="width: 100%" style="width: 100%"
format="YYYY-MM-DD HH:mm:ss" format="YYYY-MM-DD"
value-format="YYYY-MM-DD HH:mm:ss" value-format="YYYY-MM-DD"
placeholder="选择日期" placeholder="选择日期"
:disabled="isView" :disabled="isView"
/> />
@ -770,6 +769,7 @@ const handleOk = async () => {
...formData, ...formData,
fwet: fwet, fwet: fwet,
fsz: fsz, fsz: fsz,
strdt: formData.strdt + " 00:00:00",
picpth: finalPicPaths.join(","), // 根据后端要求，可能是数组或逗号分隔字符串 picpth: finalPicPaths.join(","), // 根据后端要求，可能是数组或逗号分隔字符串
vdpth: finalVideoPaths.join(","), vdpth: finalVideoPaths.join(","),
}; };

7
frontend/src/views/shuJuTianBao/guoYuSheShiShuJuTianBao/guoYuSheShiShuJuTianBaoTable.vue
View File

@ -147,10 +147,9 @@
<template v-else-if="column.dataIndex === 'strdtStr'"> <template v-else-if="column.dataIndex === 'strdtStr'">
<a-date-picker <a-date-picker
v-model:value="editingData.strdtStr" v-model:value="editingData.strdtStr"
show-time
style="width: 100%" style="width: 100%"
format="YYYY-MM-DD HH:mm:ss" format="YYYY-MM-DD"
value-format="YYYY-MM-DD HH:mm:ss" value-format="YYYY-MM-DD"
@change="(val) => delWarning(val, 'strdtStr')" @change="(val) => delWarning(val, 'strdtStr')"
/> />
</template> </template>
@ -664,7 +663,7 @@ const saveEdit = async (index: number) => {
// 2. 创建新数组，替换对应索引的数据 // 2. 创建新数组，替换对应索引的数据
const newData = [...props.fileTableData]; const newData = [...props.fileTableData];
newData[index] = { ...editingData.value }; newData[index] = { ...editingData.value };
newData[index].strdt = newData[index].strdtStr; newData[index].strdt = newData[index].strdtStr + " 00:00:00";
emit("update:fileLoading", true); emit("update:fileLoading", true);
try { try {
const res: any = await revalidateAndUpdateRow({ const res: any = await revalidateAndUpdateRow({

14
frontend/src/views/shuJuTianBao/guoYuSheShiShuJuTianBao/index.vue
View File

@ -717,13 +717,16 @@ const fileChange = (file: File) => {
visible.value = true; visible.value = true;
fileLoading.value = true; fileLoading.value = true;
fileTableData.value = []; fileTableData.value = [];
const formData = new FormData();
formData.append("file", file);
let res: any = await importFishZip(formData);
console.log(res);
if (res && res?.code == 0) {
if (visible.value) importBtn();
setTimeout(() => { setTimeout(() => {
if (visible.value) importBtn(); if (visible.value) importBtn();
}, 5000); }, 5000);
const formData = new FormData(); }
formData.append("file", file);
await importFishZip(formData);
if (visible.value) importBtn();
}); });
}; };
// 获取文件列表 // 获取文件列表
@ -1005,6 +1008,9 @@ onMounted(() => {
<style lang="scss" scoped> <style lang="scss" scoped>
.guoYuSheShiShuJuTianBao-page { .guoYuSheShiShuJuTianBao-page {
position: relative;
z-index: 900;
pointer-events: all;
width: 100%; width: 100%;
height: 100%; height: 100%;
background-color: #ffffff; background-color: #ffffff;

3
frontend/src/views/shuJuTianBao/shengPiJiLu/index.vue
View File

@ -1031,6 +1031,9 @@ const computedSearchParams = computed(() => ({
<style scoped lang="scss"> <style scoped lang="scss">
.shengPiJiLu-page { .shengPiJiLu-page {
position: relative;
z-index: 900;
pointer-events: all;
width: 100%; width: 100%;
height: 100%; height: 100%;
background-color: #ffffff; background-color: #ffffff;

296
frontend/src/views/system/dept/index.vue
View File

@ -1,7 +1,6 @@
<script lang="ts"> <script lang="ts">
export default { export default {
name: 'dept' name: "dept",
}; };
</script> </script>
@ -18,7 +17,7 @@ import {
reviseDepartment, reviseDepartment,
} from "@/api/dept"; } from "@/api/dept";
import { useAppStore } from '@/store/modules/app'; import { useAppStore } from "@/store/modules/app";
//树形控件类型定义 //树形控件类型定义
interface Tree { interface Tree {
[x: string]: any; [x: string]: any;
@ -75,10 +74,11 @@ function getTree() {
const params = { const params = {
parentid: "0", parentid: "0",
}; };
treeloading.value = true treeloading.value = true;
getTreelist(params).then((res: any) => { getTreelist(params)
.then((res: any) => {
treedata.value = res; treedata.value = res;
treeloading.value = false treeloading.value = false;
if (checkedtreeid.value == "") { if (checkedtreeid.value == "") {
checkedtreeid.value = res[0].id; checkedtreeid.value = res[0].id;
} }
@ -87,19 +87,19 @@ function getTree() {
}); });
getData(); getData();
}) })
.catch(()=>{ .catch(() => {
treeloading.value = false treeloading.value = false;
}) });
} }
//获取表格类型 //获取表格类型
function getData() { function getData() {
const params = { const params = {
id: checkedtreeid.value, id: checkedtreeid.value,
}; };
loading.value = true loading.value = true;
gettableData(params).then((res) => { gettableData(params).then((res) => {
tableData.value = res.data; tableData.value = res.data;
loading.value = false loading.value = false;
}); });
} }
const multipleSelection = ref([]); const multipleSelection = ref([]);
@ -118,11 +118,11 @@ function handleSelectionChange(val: any) {
} }
//部门是否有效 //部门是否有效
function switchChange(row: any) { function switchChange(row: any) {
const elMessage = ref('') const elMessage = ref("");
if (row.isvaild == '0') { if (row.isvaild == "0") {
elMessage.value = "确定设置该部门为无效吗？" elMessage.value = "确定设置该部门为无效吗？";
} else if (row.isvaild == '1') { } else if (row.isvaild == "1") {
elMessage.value = "确定设置该部门为有效吗？" elMessage.value = "确定设置该部门为有效吗？";
} }
ElMessageBox.confirm(elMessage.value, "提示信息", { ElMessageBox.confirm(elMessage.value, "提示信息", {
confirmButtonText: "确定", confirmButtonText: "确定",
@ -142,7 +142,6 @@ function switchChange(row: any) {
message: "改变成功", message: "改变成功",
}); });
}); });
}) })
.catch(() => { .catch(() => {
getData(); getData();
@ -204,7 +203,7 @@ function confirmClick(formEl: any) {
} }
dialogVisible.value = false; dialogVisible.value = false;
} }
}) });
} }
//关闭弹窗 //关闭弹窗
function handleClose() { function handleClose() {
@ -238,7 +237,6 @@ function remove(data: any) {
type: "success", type: "success",
}); });
}); });
}); });
} }
@ -320,10 +318,10 @@ function delClick() {
}).then(() => { }).then(() => {
let id = [] as any[]; let id = [] as any[];
multipleSelection.value.forEach((item: any) => { multipleSelection.value.forEach((item: any) => {
id.push(item.id) id.push(item.id);
}) });
let params = { let params = {
id: id.join(','), id: id.join(","),
}; };
delTreelist(params).then(() => { delTreelist(params).then(() => {
getTree(); getTree();
@ -339,7 +337,8 @@ function dateFormat(row: any) {
if (daterc != null) { if (daterc != null) {
var date = new Date(daterc); var date = new Date(daterc);
var year = date.getFullYear(); var year = date.getFullYear();
var month = date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1; var month =
date.getMonth() + 1 < 10 ? "0" + (date.getMonth() + 1) : date.getMonth() + 1;
date.getMonth() + 1 < 10 ? "0" + (date.getMonth() + 1) : date.getMonth() + 1; date.getMonth() + 1 < 10 ? "0" + (date.getMonth() + 1) : date.getMonth() + 1;
var day = date.getDate() < 10 ? "0" + date.getDate() : date.getDate(); var day = date.getDate() < 10 ? "0" + date.getDate() : date.getDate();
var hours = date.getHours() < 10 ? "0" + date.getHours() : date.getHours(); var hours = date.getHours() < 10 ? "0" + date.getHours() : date.getHours();
@ -367,26 +366,54 @@ const vMove = {
document.onmousemove = document.onmouseup = null; document.onmousemove = document.onmouseup = null;
}; };
}; };
} },
} };
</script> </script>
<template> <template>
<div class="faulttemplate-box"> <div class="faulttemplate-box">
<aside id="silderLeft"> <aside id="silderLeft">
<div v-hasPerm="['add:org']" class="p-[15px]"><el-button class="w-full mb-[15px]" style="color: #0099ff; border: 1px solid #0099ff;" <div v-hasPerm="['add:org']" class="p-[15px]">
@click="causeAdd"> <img src="@/assets/MenuIcon/u241.png" style="margin-right: 10px;"> 新增企业</el-button></div> <el-button
<el-tree :class="useAppStore().size === 'default' ? 'silderLeft-large' : 'silderLeft-default'" v-loading="treeloading" class="w-full mb-[15px]"
ref="treeRef" node-key="id" :data="treedata" :highlight-current="true" :props="defaultProps" style="color: #0099ff; border: 1px solid #0099ff"
@node-click="handleNodeClick" style="height: calc(100vh - 215px); overflow: auto"> @click="causeAdd"
>
<img src="@/assets/MenuIcon/u241.png" style="margin-right: 10px" />
新增企业</el-button
>
</div>
<el-tree
:class="
useAppStore().size === 'default' ? 'silderLeft-large' : 'silderLeft-default'
"
v-loading="treeloading"
ref="treeRef"
node-key="id"
:data="treedata"
:highlight-current="true"
:props="defaultProps"
@node-click="handleNodeClick"
style="height: calc(100vh - 215px); overflow: auto"
>
<template #default="{ node, data }"> <template #default="{ node, data }">
<span class="custom-tree-node"> <span class="custom-tree-node">
<span>{{ node.label }}</span> <span>{{ node.label }}</span>
<span style="font-size: 16px;"> <span style="font-size: 16px">
<el-icon v-hasPerm="['update:org']" class="treeediticon" title="修改" @click="() => edittree(data)"> <el-icon
v-hasPerm="['update:org']"
class="treeediticon"
title="修改"
@click="() => edittree(data)"
>
<EditPen /> <EditPen />
</el-icon> </el-icon>
<el-icon v-hasPerm="['del:org']" class="treedelicon" title="删除" @click="() => remove(data)"> <el-icon
v-hasPerm="['del:org']"
class="treedelicon"
title="删除"
@click="() => remove(data)"
>
<Delete /> <Delete />
</el-icon> </el-icon>
</span> </span>
@ -401,36 +428,80 @@ const vMove = {
<el-row style="margin-bottom: 10px"> <el-row style="margin-bottom: 10px">
<el-col :span="24" class="top-nav"> <el-col :span="24" class="top-nav">
<div> <div>
<el-input v-model="querystr" placeholder="请输入部门名称" clearable style="width: 200px;" <el-input
@keyup.enter="searchOrganizations" /> v-model="querystr"
<el-button type="primary" style="margin-left: 10px;" @click="searchOrganizations">搜索</el-button> placeholder="请输入部门名称"
clearable
style="width: 200px"
@keyup.enter="searchOrganizations"
/>
<el-button
type="primary"
style="margin-left: 10px"
@click="searchOrganizations"
>搜索</el-button
>
</div> </div>
<div class="left-nav"> <div class="left-nav">
<el-button v-hasPerm="['add:org']" type="primary" @click="addClick"><img style="margin-right:5px;" src="@/assets/MenuIcon/jscz_xz.png" alt=""> 新增</el-button> <el-button v-hasPerm="['add:org']" type="primary" @click="addClick"
<el-button v-hasPerm="['del:org']" :disabled="multipleSelection.length <= 0" :type="multipleSelection.length > 0 ? 'primary' : ''" ><img
@click="delClick"><el-icon> style="margin-right: 5px"
src="@/assets/MenuIcon/jscz_xz.png"
alt=""
/>
新增</el-button
>
<el-button
v-hasPerm="['del:org']"
:disabled="multipleSelection.length <= 0"
:type="multipleSelection.length > 0 ? 'primary' : ''"
@click="delClick"
><el-icon>
<Delete /> <Delete />
</el-icon> 删除</el-button> </el-icon>
删除</el-button
>
</div> </div>
</el-col> </el-col>
</el-row> </el-row>
<el-table v-loading="loading" :data="tableData" style="width: 100%; margin-bottom: 20px" row-key="id" border <el-table
@selection-change="handleSelectionChange" default-expand-all :header-cell-style="{background:'rgb(250 250 250)',height:'50px'}" > v-loading="loading"
:data="tableData"
style="width: 100%; margin-bottom: 20px"
row-key="id"
border
@selection-change="handleSelectionChange"
default-expand-all
:header-cell-style="{ background: 'rgb(250 250 250)', height: '50px' }"
>
<el-table-column type="selection" width="50" align="center" /> <el-table-column type="selection" width="50" align="center" />
<el-table-column prop="orgcode" label="部门编号" width="100"></el-table-column> <el-table-column prop="orgcode" label="部门编号" width="100"></el-table-column>
<el-table-column prop="orgname" label="部门名称" width="140"></el-table-column> <el-table-column prop="orgname" label="部门名称" width="140"></el-table-column>
<el-table-column prop="manager" label="负责人" width="120"></el-table-column> <el-table-column prop="manager" label="负责人" width="120"></el-table-column>
<el-table-column prop="custom1" label="联系信息" width="160"></el-table-column> <el-table-column prop="custom1" label="联系信息" width="160"></el-table-column>
<el-table-column prop="description" label="部门描述" min-width="100"></el-table-column> <el-table-column
prop="description"
label="部门描述"
min-width="100"
></el-table-column>
<el-table-column prop="isvaild" label="是否有效" align="center" width="120"> <el-table-column prop="isvaild" label="是否有效" align="center" width="120">
<template #default="scope"> <template #default="scope">
<el-switch v-model="scope.row.isvaild" active-value="1" inactive-value="0" @change="switchChange(scope.row)" <el-switch
style="margin-right: 4px"></el-switch> v-model="scope.row.isvaild"
active-value="1"
inactive-value="0"
@change="switchChange(scope.row)"
style="margin-right: 4px"
></el-switch>
<span v-if="scope.row.isvaild == 1" style="color: #0099ff">有效</span> <span v-if="scope.row.isvaild == 1" style="color: #0099ff">有效</span>
<span v-else style="color: #d7d7d7">无效</span> <span v-else style="color: #d7d7d7">无效</span>
</template> </template>
</el-table-column> </el-table-column>
<el-table-column prop="lastmodifier" label="最近修改者" width="174"></el-table-column> <el-table-column
prop="lastmodifier"
label="最近修改者"
width="174"
></el-table-column>
<el-table-column prop="lastmodifydate" label="最近修改日期" width="196"> <el-table-column prop="lastmodifydate" label="最近修改日期" width="196">
<template #default="scope"> <template #default="scope">
{{ dateFormat(scope.row.lastmodifydate) }} {{ dateFormat(scope.row.lastmodifydate) }}
@ -438,11 +509,28 @@ const vMove = {
</el-table-column> </el-table-column>
<el-table-column fixed="right" label="操作" width="80"> <el-table-column fixed="right" label="操作" width="80">
<template #default="scope"> <template #default="scope">
<span style="display: flex;display: -webkit-flex;justify-content: space-around; -webkit-justify-content: space-around; "> <span
<img v-hasPerm="['update:org']" src="@/assets/MenuIcon/lbcz_xg.png" title="修改" style="cursor: pointer;" style="
@click="editdepartment(scope.row)" > display: flex;
<img v-hasPerm="['del:org']" src="@/assets/MenuIcon/lbcz_sc.png" title="删除" style="cursor: pointer;" display: -webkit-flex;
@click="deldepartment(scope.row)" > justify-content: space-around;
-webkit-justify-content: space-around;
"
>
<img
v-hasPerm="['update:org']"
src="@/assets/MenuIcon/lbcz_xg.png"
title="修改"
style="cursor: pointer"
@click="editdepartment(scope.row)"
/>
<img
v-hasPerm="['del:org']"
src="@/assets/MenuIcon/lbcz_sc.png"
title="删除"
style="cursor: pointer"
@click="deldepartment(scope.row)"
/>
</span> </span>
</template> </template>
</el-table-column> </el-table-column>
@ -450,55 +538,118 @@ const vMove = {
</main> </main>
<!-- 部门 弹框--> <!-- 部门 弹框-->
<el-dialog v-model="dialogVisible" :before-close="handleClose" :title="title" draggable width="620px"> <el-dialog
v-model="dialogVisible"
:before-close="handleClose"
:title="title"
draggable
width="620px"
>
<el-form ref="infoForm" :model="info" label-width="90px" :rules="moderules"> <el-form ref="infoForm" :model="info" label-width="90px" :rules="moderules">
<el-form-item label="部门编号" prop="orgcode"> <el-form-item label="部门编号" prop="orgcode">
<el-input v-model="info.orgcode" style="width: 100%" :disabled="true"></el-input> <el-input
v-model="info.orgcode"
style="width: 100%"
:disabled="true"
></el-input>
</el-form-item> </el-form-item>
<el-form-item label="部门名称" prop="orgname"> <el-form-item label="部门名称" prop="orgname">
<el-input v-model="info.orgname" style="width: 100%" placeholder="请输入部门名称"></el-input> <el-input
v-model="info.orgname"
style="width: 100%"
placeholder="请输入部门名称"
></el-input>
</el-form-item> </el-form-item>
<el-form-item label="负责人" prop="manager" placeholder="请输入负责人姓名"> <el-form-item label="负责人" prop="manager" placeholder="请输入负责人姓名">
<el-input v-model="info.manager" style="width: 100%"></el-input> <el-input v-model="info.manager" style="width: 100%"></el-input>
</el-form-item> </el-form-item>
<el-form-item label="联系信息" prop="custom1"> <el-form-item label="联系信息" prop="custom1">
<el-input type="textarea" v-model="info.custom1" :autosize="{ minRows: 2 }" style="width: 100%" <el-input
placeholder="请输入联系信息"></el-input> type="textarea"
v-model="info.custom1"
:autosize="{ minRows: 2 }"
style="width: 100%"
placeholder="请输入联系信息"
></el-input>
</el-form-item> </el-form-item>
<el-form-item label="部门描述" prop="description"> <el-form-item label="部门描述" prop="description">
<el-input type="textarea" v-model="info.description" :autosize="{ minRows: 2 }" style="width: 100%" <el-input
placeholder="请输入部门描述"></el-input> type="textarea"
v-model="info.description"
:autosize="{ minRows: 2 }"
style="width: 100%"
placeholder="请输入部门描述"
></el-input>
</el-form-item> </el-form-item>
</el-form> </el-form>
<span class="dialog-footer"> <span class="dialog-footer">
<el-button style="padding: 10px 15px" @click="handleClose">取 消</el-button> <el-button style="padding: 10px 15px" @click="handleClose">取 消</el-button>
<el-button type="primary" style="padding: 10px 15px" @click="confirmClick(infoForm)">确定</el-button> <el-button
type="primary"
style="padding: 10px 15px"
@click="confirmClick(infoForm)"
>确定</el-button
>
</span> </span>
</el-dialog> </el-dialog>
<!-- 企业弹框--> <!-- 企业弹框-->
<el-dialog v-model="dialogCause" :before-close="handleClose" :title="title" draggable width="620px"> <el-dialog
v-model="dialogCause"
:before-close="handleClose"
:title="title"
draggable
width="620px"
>
<el-form ref="causeForm" :model="causeInfo" label-width="90px" :rules="rules"> <el-form ref="causeForm" :model="causeInfo" label-width="90px" :rules="rules">
<el-form-item label="企业编号" prop="orgcode"> <el-form-item label="企业编号" prop="orgcode">
<el-input v-model="causeInfo.orgcode" style="width: 100%" :disabled="true"></el-input> <el-input
v-model="causeInfo.orgcode"
style="width: 100%"
:disabled="true"
></el-input>
</el-form-item> </el-form-item>
<el-form-item label="企业名称" prop="orgname"> <el-form-item label="企业名称" prop="orgname">
<el-input v-model="causeInfo.orgname" style="width: 100%" placeholder="请输入企业名称"></el-input> <el-input
v-model="causeInfo.orgname"
style="width: 100%"
placeholder="请输入企业名称"
></el-input>
</el-form-item> </el-form-item>
<el-form-item label="负责人" prop="manager"> <el-form-item label="负责人" prop="manager">
<el-input v-model="causeInfo.manager" style="width: 100%" placeholder="请输入负责人姓名"> </el-input> <el-input
v-model="causeInfo.manager"
style="width: 100%"
placeholder="请输入负责人姓名"
>
</el-input>
</el-form-item> </el-form-item>
<el-form-item label="企业描述" prop="description"> <el-form-item label="企业描述" prop="description">
<el-input v-model="causeInfo.description" type="textarea" :autosize="{ minRows: 2 }" style="width: 100%" <el-input
placeholder="请输入企业描述"></el-input> v-model="causeInfo.description"
type="textarea"
:autosize="{ minRows: 2 }"
style="width: 100%"
placeholder="请输入企业描述"
></el-input>
</el-form-item> </el-form-item>
<el-form-item label="联系信息" prop="custom1"> <el-form-item label="联系信息" prop="custom1">
<el-input v-model="causeInfo.custom1" type="textarea" :autosize="{ minRows: 2 }" style="width: 100%" <el-input
placeholder="请输入企业联系信息"></el-input> v-model="causeInfo.custom1"
type="textarea"
:autosize="{ minRows: 2 }"
style="width: 100%"
placeholder="请输入企业联系信息"
></el-input>
</el-form-item> </el-form-item>
</el-form> </el-form>
<span class="dialog-footer"> <span class="dialog-footer">
<el-button style="padding: 10px 15px" @click="handleClose">取 消</el-button> <el-button style="padding: 10px 15px" @click="handleClose">取 消</el-button>
<el-button type="primary" style="padding: 10px 15px" @click="editisrepetition(causeForm)">确定</el-button> <el-button
type="primary"
style="padding: 10px 15px"
@click="editisrepetition(causeForm)"
>确定</el-button
>
</span> </span>
</el-dialog> </el-dialog>
</div> </div>
@ -515,6 +666,9 @@ const vMove = {
} }
.faulttemplate-box { .faulttemplate-box {
position: relative;
z-index: 900;
pointer-events: all;
height: 100%; height: 100%;
display: -webkit-flex; display: -webkit-flex;
display: flex; display: flex;
@ -601,7 +755,6 @@ const vMove = {
justify-content: space-between; justify-content: space-between;
-webkit-justify-content: space-between; -webkit-justify-content: space-between;
padding-right: 8px; padding-right: 8px;
} }
.faulttemplate-box { .faulttemplate-box {
@ -627,7 +780,7 @@ const vMove = {
color: #fff; color: #fff;
margin: 0 5px; margin: 0 5px;
} }
:deep(.el-table__cell){ :deep(.el-table__cell) {
color: #383838; color: #383838;
} }
.top-nav { .top-nav {
@ -635,4 +788,5 @@ const vMove = {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
-webkit-justify-content: space-between; -webkit-justify-content: space-between;
}</style> }
</style>

402
frontend/src/views/system/dict/index.vue
View File

@ -1,30 +1,40 @@
<script lang="ts"> <script lang="ts">
export default { export default {
name: 'dept' name: "dept",
}; };
</script> </script>
<script setup lang="ts"> <script setup lang="ts">
import { onMounted, reactive, ref, nextTick } from 'vue'; import { onMounted, reactive, ref, nextTick } from "vue";
import { ElMessage, ElMessageBox, FormRules } from 'element-plus' import { ElMessage, ElMessageBox, FormRules } from "element-plus";
import Sortable from 'sortablejs'; import Sortable from "sortablejs";
import { useAppStore } from '@/store/modules/app'; import { useAppStore } from "@/store/modules/app";
import Page from '@/components/Pagination/page.vue' import Page from "@/components/Pagination/page.vue";
import { import {
getTreelist, addDict, updateDict, deleteById, changeDictOrder, getDictItemById, addDictionaryItem, updateDictionaryItem, deleteDictItemById, deleteDictItemByIds, changeItemOrder getTreelist,
} from '@/api/dict'; addDict,
updateDict,
deleteById,
changeDictOrder,
getDictItemById,
addDictionaryItem,
updateDictionaryItem,
deleteDictItemById,
deleteDictItemByIds,
changeItemOrder,
} from "@/api/dict";
const treeloading = ref(false); const treeloading = ref(false);
const activeName = ref('00'); const activeName = ref("00");
// 左侧树 - 数据 // 左侧树 - 数据
const treedata: any = ref([]) const treedata: any = ref([]);
const treeRef = ref(); const treeRef = ref();
const treeId = ref(''); const treeId = ref("");
const defaultProps = { label: 'dictName' } const defaultProps = { label: "dictName" };
// 字典弹框 // 字典弹框
const title = ref(''); const title = ref("");
const dialogdict = ref(false); const dialogdict = ref(false);
const dictInfoRef = ref() const dictInfoRef = ref();
const dictInfo = ref({ const dictInfo = ref({
id: "", id: "",
dictCode: "", dictCode: "",
@ -34,15 +44,15 @@ const dictInfo = ref({
// 字典弹框规则 // 字典弹框规则
const rules = reactive<FormRules>({ const rules = reactive<FormRules>({
dictName: [{ required: true, message: "请输入字典名称", trigger: "blur" }], dictName: [{ required: true, message: "请输入字典名称", trigger: "blur" }],
dictCode: [{ required: true, message: "请输入字典编码", trigger: "blur" }] dictCode: [{ required: true, message: "请输入字典编码", trigger: "blur" }],
}); });
// 右侧查询 // 右侧查询
const querystr = ref({ const querystr = ref({
dictId: '', dictId: "",
dictName: '', dictName: "",
size: 10, size: 10,
current: 1 current: 1,
}); });
// 右侧表格 // 右侧表格
const tableData = ref([]) as any; const tableData = ref([]) as any;
@ -50,27 +60,27 @@ const multipleSelection = ref([]);
// const total = ref(0); // const total = ref(0);
const tableloading = ref(false); const tableloading = ref(false);
// 右侧新增/修改弹框弹框 // 右侧新增/修改弹框弹框
const titleItem = ref(''); const titleItem = ref("");
const dialogdictItem = ref(false); const dialogdictItem = ref(false);
const dictInfoRefItem = ref() const dictInfoRefItem = ref();
const dictInfoItem = ref({ const dictInfoItem = ref({
id: "", id: "",
dictId: "", dictId: "",
itemCode: "", itemCode: "",
dictName: "", dictName: "",
parentCode: "", parentCode: "",
custom1: "" custom1: "",
}); });
// 字典弹框规则 // 字典弹框规则
const dictItemrules = reactive<FormRules>({ const dictItemrules = reactive<FormRules>({
dictName: [{ required: true, message: "请输入项名称", trigger: "blur" }], dictName: [{ required: true, message: "请输入项名称", trigger: "blur" }],
itemCode: [{ required: true, message: "请输入项编码", trigger: "blur" }] itemCode: [{ required: true, message: "请输入项编码", trigger: "blur" }],
}); });
// 初始加载 // 初始加载
onMounted(() => { onMounted(() => {
getTree() getTree();
rowDrop() rowDrop();
}) });
const vMove = { const vMove = {
mounted(el: any) { mounted(el: any) {
@ -87,10 +97,10 @@ const vMove = {
document.onmousemove = document.onmouseup = null; document.onmousemove = document.onmouseup = null;
}; };
}; };
} },
} };
function rowDrop() { function rowDrop() {
const tbody = document.querySelector('.draggable .el-table__body-wrapper tbody'); const tbody = document.querySelector(".draggable .el-table__body-wrapper tbody");
Sortable.create(tbody, { Sortable.create(tbody, {
draggable: ".draggable .el-table__row", draggable: ".draggable .el-table__row",
onEnd(data: any) { onEnd(data: any) {
@ -106,30 +116,31 @@ function rowDrop() {
changeItemOrder(params).then(() => { changeItemOrder(params).then(() => {
init(); init();
}); });
} },
}); });
} }
// 查询左侧树 // 查询左侧树
function getTree() { function getTree() {
const params = { const params = {
dictType: activeName.value dictType: activeName.value,
} };
treeloading.value = true treeloading.value = true;
getTreelist(params).then((res) => { getTreelist(params)
treedata.value = res.data .then((res) => {
treeloading.value = false treedata.value = res.data;
treeloading.value = false;
if (treeId.value == "") { if (treeId.value == "") {
treeId.value = res.data[0].id; treeId.value = res.data[0].id;
} }
nextTick(() => { nextTick(() => {
treeRef.value?.setCurrentKey(treeId.value); treeRef.value?.setCurrentKey(treeId.value);
}); });
if (res.data.length == 0) treeId.value = '' if (res.data.length == 0) treeId.value = "";
init(); init();
}) })
.catch(()=>{ .catch(() => {
treeloading.value = false treeloading.value = false;
}) });
} }
// 左侧树点击 // 左侧树点击
function handleNodeClick(row: any) { function handleNodeClick(row: any) {
@ -138,8 +149,8 @@ function handleNodeClick(row: any) {
} }
// 系统配置 / 用户配置 - 切换 // 系统配置 / 用户配置 - 切换
function activeNameChange(name: any) { function activeNameChange(name: any) {
activeName.value = name.props.name activeName.value = name.props.name;
getTree() getTree();
} }
// 新增字典 // 新增字典
@ -196,7 +207,7 @@ function dictSave(formEl: any) {
type: "success", type: "success",
message: "新增成功", message: "新增成功",
}); });
}) });
} else if (dictInfo.value.id) { } else if (dictInfo.value.id) {
const params = { const params = {
dictCode: dictInfo.value.dictCode, dictCode: dictInfo.value.dictCode,
@ -216,7 +227,7 @@ function dictSave(formEl: any) {
return false; return false;
} }
} }
}) });
} }
// 左侧排序 // 左侧排序
function treenodeDrop(before: any, after: any) { function treenodeDrop(before: any, after: any) {
@ -226,22 +237,21 @@ function treenodeDrop(before: any, after: any) {
}; };
changeDictOrder(params).then(() => { changeDictOrder(params).then(() => {
getTree(); getTree();
}); });
} }
const allowDrop:any = (draggingNode: any, dropNode: any, type: any) => { const allowDrop: any = (draggingNode: any, dropNode: any, type: any) => {
// 不能拖拽到级别里面 // 不能拖拽到级别里面
if (type === 'inner' || Number(dropNode.data.pid) === 0) return if (type === "inner" || Number(dropNode.data.pid) === 0) return;
if (draggingNode.nextSibling === undefined) { if (draggingNode.nextSibling === undefined) {
return type === 'prev' return type === "prev";
} else if (dropNode.nextSibling === undefined) { } else if (dropNode.nextSibling === undefined) {
return type === 'next' return type === "next";
} else if (draggingNode.nextSibling.id !== dropNode.id) { } else if (draggingNode.nextSibling.id !== dropNode.id) {
return type === 'prev' return type === "prev";
} else { } else {
return type === 'next' return type === "next";
} }
} };
// 关闭字典弹框 // 关闭字典弹框
function dictClose() { function dictClose() {
dictInfoRef.value.resetFields(); dictInfoRef.value.resetFields();
@ -251,19 +261,21 @@ function dictClose() {
function init() { function init() {
tableloading.value = true; tableloading.value = true;
querystr.value.dictId = treeId.value; querystr.value.dictId = treeId.value;
getDictItemById(querystr.value).then((result: any) => { getDictItemById(querystr.value)
.then((result: any) => {
if (result.data.records == null) { if (result.data.records == null) {
tableData.value = [] tableData.value = [];
total.value = 0; total.value = 0;
tableloading.value = false; tableloading.value = false;
return return;
} }
tableData.value = result.data.records; tableData.value = result.data.records;
total.value = result.data.total; total.value = result.data.total;
querystr.value.size = result.data.size; querystr.value.size = result.data.size;
querystr.value.current = result.data.current querystr.value.current = result.data.current;
tableloading.value = false; tableloading.value = false;
}).catch(() => { })
.catch(() => {
tableloading.value = false; tableloading.value = false;
}); });
} }
@ -277,7 +289,7 @@ function addClick() {
itemCode: "", itemCode: "",
dictName: "", dictName: "",
parentCode: "", parentCode: "",
custom1: "" custom1: "",
}); });
dictInfoItem.value = info.value; dictInfoItem.value = info.value;
} }
@ -315,10 +327,10 @@ function delsClick() {
}).then(() => { }).then(() => {
let id = [] as any[]; let id = [] as any[];
multipleSelection.value.forEach((item: any) => { multipleSelection.value.forEach((item: any) => {
id.push(item.id) id.push(item.id);
}) });
let params = { let params = {
id: id.join(','), id: id.join(","),
}; };
deleteDictItemByIds(params).then(() => { deleteDictItemByIds(params).then(() => {
init(); init();
@ -344,7 +356,7 @@ function dictItemSave(formEl: any) {
itemCode: dictInfoItem.value.itemCode, itemCode: dictInfoItem.value.itemCode,
dictName: dictInfoItem.value.dictName, dictName: dictInfoItem.value.dictName,
parentCode: dictInfoItem.value.parentCode, parentCode: dictInfoItem.value.parentCode,
custom1: dictInfoItem.value.custom1 custom1: dictInfoItem.value.custom1,
}; };
addDictionaryItem(params).then(() => { addDictionaryItem(params).then(() => {
init(); init();
@ -353,7 +365,7 @@ function dictItemSave(formEl: any) {
type: "success", type: "success",
message: "新增字典项成功", message: "新增字典项成功",
}); });
}) });
} else if (dictInfoItem.value.id) { } else if (dictInfoItem.value.id) {
const params = { const params = {
dictId: dictInfoItem.value.dictId, dictId: dictInfoItem.value.dictId,
@ -375,7 +387,7 @@ function dictItemSave(formEl: any) {
return false; return false;
} }
} }
}) });
} }
// 表格多选 // 表格多选
function handleSelectionChange(val: any) { function handleSelectionChange(val: any) {
@ -383,28 +395,59 @@ function handleSelectionChange(val: any) {
} }
//分页 //分页
const total = ref() const total = ref();
</script> </script>
<template> <template>
<div class="faulttemplate-box"> <div class="faulttemplate-box">
<aside id="silderLeft"> <aside id="silderLeft">
<el-tabs :class="useAppStore().size === 'default' ? 'silderLeft-large' : 'silderLeft-default'" v-model="activeName" <el-tabs
class="demo-tabs" @tab-click="activeNameChange"> :class="
useAppStore().size === 'default' ? 'silderLeft-large' : 'silderLeft-default'
"
v-model="activeName"
class="demo-tabs"
@tab-click="activeNameChange"
>
<el-tab-pane label="系统配置" name="00"></el-tab-pane> <el-tab-pane label="系统配置" name="00"></el-tab-pane>
<el-tab-pane label="用户配置" name="01"></el-tab-pane> <el-tab-pane label="用户配置" name="01"></el-tab-pane>
</el-tabs> </el-tabs>
<div class="menu-box"> <div class="menu-box">
<el-button style="border:1px solid #0099FF;width:100%;color:#0099FF;margin-bottom:10px;" @click="dictAdd"> <img <el-button
src="@/assets/MenuIcon/czan_xz.png" alt="" style="width: 14px; margin-right: 5px;"> 新增字典</el-button> style="
<el-tree v-loading="treeloading" ref="treeRef" border: 1px solid #0099ff;
:class="useAppStore().size === 'default' ? 'silderLeft-large' : 'silderLeft-default'" node-key="id" width: 100%;
:allow-drop="allowDrop" :data="treedata" draggable :highlight-current="true" :props="defaultProps" color: #0099ff;
@node-click="handleNodeClick" @node-drop="treenodeDrop" style="height:calc(100vh - 254px);overflow: auto;"> margin-bottom: 10px;
"
@click="dictAdd"
>
<img
src="@/assets/MenuIcon/czan_xz.png"
alt=""
style="width: 14px; margin-right: 5px"
/>
新增字典</el-button
>
<el-tree
v-loading="treeloading"
ref="treeRef"
:class="
useAppStore().size === 'default' ? 'silderLeft-large' : 'silderLeft-default'
"
node-key="id"
:allow-drop="allowDrop"
:data="treedata"
draggable
:highlight-current="true"
:props="defaultProps"
@node-click="handleNodeClick"
@node-drop="treenodeDrop"
style="height: calc(100vh - 254px); overflow: auto"
>
<template #default="{ node, data }"> <template #default="{ node, data }">
<span class="custom-tree-node"> <span class="custom-tree-node">
<span class="custom-tree-node-img"> <span class="custom-tree-node-img">
<img src="@/assets/images/linefeed.png" alt=""> <img src="@/assets/images/linefeed.png" alt="" />
<span>{{ node.label }}</span> <span>{{ node.label }}</span>
</span> </span>
<span> <span>
@ -426,93 +469,225 @@ const total = ref()
<section class="silderRight"> <section class="silderRight">
<el-row> <el-row>
<el-col :span="24" class="top-nav"> <el-col :span="24" class="top-nav">
<div style="margin-bottom:10px"> <div style="margin-bottom: 10px">
<el-input v-model="querystr.dictName" placeholder="请输入项名称" clearable style="width: 200px;margin-right: 10px;" <el-input
@keyup.enter="init" /> v-model="querystr.dictName"
placeholder="请输入项名称"
clearable
style="width: 200px; margin-right: 10px"
@keyup.enter="init"
/>
<el-button type="primary" @click="init">搜索</el-button> <el-button type="primary" @click="init">搜索</el-button>
</div> </div>
<div class="left-nav"> <div class="left-nav">
<el-button type="primary" @click="addClick()"> <img src="@/assets/MenuIcon/jscz_xz.png" alt="" <el-button type="primary" @click="addClick()">
style="width: 14px;margin-right: 3px;"> 新增</el-button> <img
<el-button :type="multipleSelection.length > 0 ? 'primary' : ''" :disabled="multipleSelection.length <= 0" src="@/assets/MenuIcon/jscz_xz.png"
@click="delsClick"> alt=""
style="width: 14px; margin-right: 3px"
/>
新增</el-button
>
<el-button
:type="multipleSelection.length > 0 ? 'primary' : ''"
:disabled="multipleSelection.length <= 0"
@click="delsClick"
>
<el-icon> <el-icon>
<Delete /> <Delete />
</el-icon> 删除</el-button> </el-icon>
删除</el-button
>
</div> </div>
</el-col> </el-col>
</el-row> </el-row>
<div class="draggable"> <div class="draggable">
<el-table v-loading="tableloading" :data="tableData" row-key="id" style="width: 100%;margin-bottom: 20px;" border <el-table
@selection-change="handleSelectionChange" default-expand-all v-loading="tableloading"
:header-cell-style="{ background: 'rgb(250 250 250)', height: '50px' }"> :data="tableData"
row-key="id"
style="width: 100%; margin-bottom: 20px"
border
@selection-change="handleSelectionChange"
default-expand-all
:header-cell-style="{ background: 'rgb(250 250 250)', height: '50px' }"
>
<el-table-column type="selection" width="50" align="center" /> <el-table-column type="selection" width="50" align="center" />
<el-table-column prop="orderNo" label="序号" width="80"> <el-table-column prop="orderNo" label="序号" width="80">
<template #default="scope"> <template #default="scope">
<span class="custom-tree-node-img"> <span class="custom-tree-node-img">
<img src="@/assets/images/linefeed.png" alt=""> <img src="@/assets/images/linefeed.png" alt="" />
{{ scope.row.orderNo }} {{ scope.row.orderNo }}
</span> </span>
</template> </template>
</el-table-column> </el-table-column>
<el-table-column prop="itemCode" label="项编码" width="160"></el-table-column> <el-table-column prop="itemCode" label="项编码" width="160"></el-table-column>
<el-table-column prop="dictName" label="项名称" width="140"></el-table-column> <el-table-column prop="dictName" label="项名称" width="140"></el-table-column>
<el-table-column prop="parentCode" label="父项编码" width="180"></el-table-column> <el-table-column
prop="parentCode"
label="父项编码"
width="180"
></el-table-column>
<el-table-column prop="custom1" label="备注"></el-table-column> <el-table-column prop="custom1" label="备注"></el-table-column>
<el-table-column fixed="right" label="操作" width="110"> <el-table-column fixed="right" label="操作" width="110">
<template #default="scope"> <template #default="scope">
<span style="display: flex;display: -webkit-flex; justify-content: space-around; -webkit-justify-content: space-around;"> <span
<img src="@/assets/MenuIcon/lbcz_xg.png" alt="" itle="修改" style="cursor: pointer;" style="
@click="editClick(scope.row)"> display: flex;
<img src="@/assets/MenuIcon/lbcz_sc.png" alt="" title="删除" style="cursor: pointer;" display: -webkit-flex;
@click="delClick(scope.row)"> justify-content: space-around;
-webkit-justify-content: space-around;
"
>
<img
src="@/assets/MenuIcon/lbcz_xg.png"
alt=""
itle="修改"
style="cursor: pointer"
@click="editClick(scope.row)"
/>
<img
src="@/assets/MenuIcon/lbcz_sc.png"
alt=""
title="删除"
style="cursor: pointer"
@click="delClick(scope.row)"
/>
</span> </span>
</template> </template>
</el-table-column> </el-table-column>
</el-table> </el-table>
<Page :total="total" v-model:size="querystr.size" v-model:current="querystr.current" @pagination="init()" ></Page> <Page
:total="total"
v-model:size="querystr.size"
v-model:current="querystr.current"
@pagination="init()"
></Page>
</div> </div>
</section> </section>
<!-- 子项 弹框--> <!-- 子项 弹框-->
<el-dialog v-model="dialogdictItem" :before-close="dictItemClose" :title="titleItem" draggable width="620px"> <el-dialog
<el-form ref="dictInfoRefItem" :model="dictInfoItem" label-width="80px" style="margin-top:10px" v-model="dialogdictItem"
:rules="dictItemrules"> :before-close="dictItemClose"
:title="titleItem"
draggable
width="620px"
>
<el-form
ref="dictInfoRefItem"
:model="dictInfoItem"
label-width="80px"
style="margin-top: 10px"
:rules="dictItemrules"
>
<el-form-item label="项编码" prop="itemCode"> <el-form-item label="项编码" prop="itemCode">
<el-input v-model="dictInfoItem.itemCode" style="width:100%" placeholder="请输入项编码"></el-input> <el-input
v-model="dictInfoItem.itemCode"
style="width: 100%"
placeholder="请输入项编码"
></el-input>
</el-form-item> </el-form-item>
<el-form-item label="项名称" prop="dictName"> <el-form-item label="项名称" prop="dictName">
<el-input v-model="dictInfoItem.dictName" style="width:100%" placeholder="请输入项名称"></el-input> <el-input
v-model="dictInfoItem.dictName"
style="width: 100%"
placeholder="请输入项名称"
></el-input>
</el-form-item> </el-form-item>
<el-form-item label="父项编码" prop="parentCode"> <el-form-item label="父项编码" prop="parentCode">
<el-input v-model="dictInfoItem.parentCode" style="width:100%" placeholder="请输入父项编码"></el-input> <el-input
v-model="dictInfoItem.parentCode"
style="width: 100%"
placeholder="请输入父项编码"
></el-input>
</el-form-item> </el-form-item>
<p style="color:#f56c6c;font-size: 12px;width: 70%;margin: auto; margin-top: -15px; padding: 5px 0px;"> <p
注：如果添加项为子项，则需输入父项编码</p> style="
color: #f56c6c;
font-size: 12px;
width: 70%;
margin: auto;
margin-top: -15px;
padding: 5px 0px;
"
>
注：如果添加项为子项，则需输入父项编码
</p>
<el-form-item label="备注"> <el-form-item label="备注">
<el-input v-model="dictInfoItem.custom1" :rows="5" type="textarea" style="width:100%" <el-input
placeholder="请输入备注"></el-input> v-model="dictInfoItem.custom1"
:rows="5"
type="textarea"
style="width: 100%"
placeholder="请输入备注"
></el-input>
</el-form-item> </el-form-item>
</el-form> </el-form>
<span class="dialog-footer" style="display: flex; display: -webkit-flex; justify-content: flex-end; -webkit-justify-content: flex-end;"> <span
<el-button style="padding: 10px 15px;" @click="dictItemClose">取 消</el-button> class="dialog-footer"
<el-button type="primary" style="padding: 10px 15px;" @click="dictItemSave(dictInfoRefItem)">确定</el-button> style="
display: flex;
display: -webkit-flex;
justify-content: flex-end;
-webkit-justify-content: flex-end;
"
>
<el-button style="padding: 10px 15px" @click="dictItemClose">取 消</el-button>
<el-button
type="primary"
style="padding: 10px 15px"
@click="dictItemSave(dictInfoRefItem)"
>确定</el-button
>
</span> </span>
</el-dialog> </el-dialog>
<!-- 字典弹框--> <!-- 字典弹框-->
<el-dialog v-model="dialogdict" :before-close="dictClose" :title="title" draggable width="620px"> <el-dialog
<el-form ref="dictInfoRef" :model="dictInfo" label-width="90px" style="margin-top:10px" :rules="rules"> v-model="dialogdict"
:before-close="dictClose"
:title="title"
draggable
width="620px"
>
<el-form
ref="dictInfoRef"
:model="dictInfo"
label-width="90px"
style="margin-top: 10px"
:rules="rules"
>
<el-form-item label="字典类型"> <el-form-item label="字典类型">
<el-input :value="dictInfo.dictType == '00' ? '系统配置' : '用户配置'" style="width:100%" :disabled="true"></el-input> <el-input
:value="dictInfo.dictType == '00' ? '系统配置' : '用户配置'"
style="width: 100%"
:disabled="true"
></el-input>
</el-form-item> </el-form-item>
<el-form-item label="字典编码" prop="dictCode"> <el-form-item label="字典编码" prop="dictCode">
<el-input v-model="dictInfo.dictCode" style="width:100%" placeholder="请输入字典编码"></el-input> <el-input
v-model="dictInfo.dictCode"
style="width: 100%"
placeholder="请输入字典编码"
></el-input>
</el-form-item> </el-form-item>
<el-form-item label="字典名称" prop="dictName"> <el-form-item label="字典名称" prop="dictName">
<el-input v-model="dictInfo.dictName" style="width:100%" placeholder="请输入字典名称"></el-input> <el-input
v-model="dictInfo.dictName"
style="width: 100%"
placeholder="请输入字典名称"
></el-input>
</el-form-item> </el-form-item>
</el-form> </el-form>
<span class="dialog-footer" style="display: flex;display: -webkit-flex; justify-content: flex-end;-webkit-justify-content: flex-end;"> <span
class="dialog-footer"
style="
display: flex;
display: -webkit-flex;
justify-content: flex-end;
-webkit-justify-content: flex-end;
"
>
<el-button @click="dictClose">取 消</el-button> <el-button @click="dictClose">取 消</el-button>
<el-button type="primary" @click="dictSave(dictInfoRef)">确定</el-button> <el-button type="primary" @click="dictSave(dictInfoRef)">确定</el-button>
</span> </span>
@ -535,6 +710,9 @@ const total = ref()
} }
.faulttemplate-box { .faulttemplate-box {
position: relative;
z-index: 900;
pointer-events: all;
height: 100%; height: 100%;
display: flex; display: flex;
background-color: #f2f4f9; background-color: #f2f4f9;

1035
frontend/src/views/system/menu/index.vue
View File

File diff suppressed because it is too large Load Diff

214
frontend/src/views/system/record/index.vue
View File

@ -7,8 +7,8 @@ export default {
<script setup lang="ts"> <script setup lang="ts">
import { onMounted, ref } from "vue"; import { onMounted, ref } from "vue";
import { getLogList, exportExcel } from "@/api/record"; import { getLogList, exportExcel } from "@/api/record";
import { downloadFile } from '@/utils/index'; import { downloadFile } from "@/utils/index";
import Page from '@/components/Pagination/page.vue' import Page from "@/components/Pagination/page.vue";
// import { VueDevToolsTimelineColors } from "@intlify/vue-devtools"; // import { VueDevToolsTimelineColors } from "@intlify/vue-devtools";
//定义表格数据 //定义表格数据
@ -18,7 +18,7 @@ const tableData: any = ref([]);
const queryParams = ref({ const queryParams = ref({
current: 1, current: 1,
size: 20, size: 20,
opttype: '' opttype: "",
}); });
// 日期查询 // 日期查询
const operationTime: any = ref(); const operationTime: any = ref();
@ -26,39 +26,41 @@ const operationTime: any = ref();
const total = ref(0); const total = ref(0);
// 日志类型 // 日志类型
const type: any = ref([ const type: any = ref([
{ name: '登录(login)', value: '00' }, { name: "登录(login)", value: "00" },
{ name: '添加(insert)', value: '01' }, { name: "添加(insert)", value: "01" },
{ name: '修改(update)', value: '02' }, { name: "修改(update)", value: "02" },
{ name: '删除(delete)', value: '03' }, { name: "删除(delete)", value: "03" },
{ name: '查询(select)', value: '04' }, { name: "查询(select)", value: "04" },
{ name: '其他(other)', value: '05' } { name: "其他(other)", value: "05" },
]); ]);
// 表格加载 // 表格加载
const loading = ref(false) const loading = ref(false);
//日志详情 //日志详情
const LogDetails = ref(false) const LogDetails = ref(false);
// 初始化加载 // 初始化加载
function init() { function init() {
let params = { let params = {
optType: queryParams.value.opttype, optType: queryParams.value.opttype,
current: queryParams.value.current, current: queryParams.value.current,
size: queryParams.value.size, size: queryParams.value.size,
startDate: '', startDate: "",
endDate: '' endDate: "",
}; };
if (operationTime.value != null) { if (operationTime.value != null) {
params.startDate = operationTime.value[0]; params.startDate = operationTime.value[0];
params.endDate = operationTime.value[1]; params.endDate = operationTime.value[1];
} }
loading.value = true; loading.value = true;
getLogList(params).then((result: any) => { getLogList(params)
.then((result: any) => {
tableData.value = result.data.list; tableData.value = result.data.list;
total.value = result.data.total; total.value = result.data.total;
queryParams.value.size = result.data.size queryParams.value.size = result.data.size;
pcode.value = result.data.size pcode.value = result.data.size;
queryParams.value.current = result.data.current queryParams.value.current = result.data.current;
loading.value = false; loading.value = false;
}).catch(() => { })
.catch(() => {
loading.value = false; loading.value = false;
}); });
} }
@ -86,78 +88,141 @@ function leadingOut() {
optType: queryParams.value.opttype, optType: queryParams.value.opttype,
current: queryParams.value.current, current: queryParams.value.current,
size: queryParams.value.size, size: queryParams.value.size,
startDate: '', startDate: "",
endDate: '' endDate: "",
}; };
if (operationTime.value != null) { if (operationTime.value != null) {
params.startDate = operationTime.value[0]; params.startDate = operationTime.value[0];
params.endDate = operationTime.value[1]; params.endDate = operationTime.value[1];
} }
exportExcel(params).then((response: any) => { exportExcel(params).then((response: any) => {
downloadFile(response, '日志', 'xlsx') downloadFile(response, "日志", "xlsx");
}); });
} }
//分页 //分页
const pcode = ref(20) const pcode = ref(20);
onMounted(() => { onMounted(() => {
init(); init();
}); });
//日志详情 //日志详情
const Logdata:any = ref([]) const Logdata: any = ref([]);
function Loglist(row:any){ function Loglist(row: any) {
console.log(row) console.log(row);
Logdata.value.push(row) Logdata.value.push(row);
if(Logdata.value.length == 2){ if (Logdata.value.length == 2) {
Logdata.value.shift() Logdata.value.shift();
} }
console.log(Logdata.value) console.log(Logdata.value);
LogDetails.value = true LogDetails.value = true;
} }
function handleClose(){ function handleClose() {
LogDetails.value = false LogDetails.value = false;
} }
</script> </script>
<template> <template>
<div> <div>
<div class="record-box"> <div class="record-box">
<div <div
style="margin-bottom: 10px;display: flex; display: -webkit-flex; align-items: center; -webkit-align-items: center;"> style="
<el-select v-model="queryParams.opttype" placeholder="日志类型" clearable @change="init" margin-bottom: 10px;
style="width: 220px;margin-right:10px;"> display: flex;
<el-option v-for="item in type" :key="item.value" :label="item.name" :value="item.name" /> display: -webkit-flex;
align-items: center;
-webkit-align-items: center;
"
>
<el-select
v-model="queryParams.opttype"
placeholder="日志类型"
clearable
@change="init"
style="width: 220px; margin-right: 10px"
>
<el-option
v-for="item in type"
:key="item.value"
:label="item.name"
:value="item.name"
/>
</el-select> </el-select>
<div style="width: 350px;"> <div style="width: 350px">
<el-date-picker v-model="operationTime" value-format="YYYY-MM-DD" start-placeholder="操作开始时间" <el-date-picker
end-placeholder="操作结束时间" type="daterange" @change="init" /> v-model="operationTime"
value-format="YYYY-MM-DD"
start-placeholder="操作开始时间"
end-placeholder="操作结束时间"
type="daterange"
@change="init"
/>
</div> </div>
<el-button type="primary" style="margin-left: 10px" @click="init">搜索</el-button> <el-button type="primary" style="margin-left: 10px" @click="init">搜索</el-button>
<div <div
style="width: 100%; display:flex; display: -webkit-flex; justify-content: flex-end; -webkit-justify-content: flex-end;"> style="
<el-button type="primary" @click="leadingOut"><img src="@/assets/MenuIcon/jscz_scdc.png" alt="" width: 100%;
style="margin-right: 5px;">导出</el-button> display: flex;
display: -webkit-flex;
justify-content: flex-end;
-webkit-justify-content: flex-end;
"
>
<el-button type="primary" @click="leadingOut"
><img
src="@/assets/MenuIcon/jscz_scdc.png"
alt=""
style="margin-right: 5px"
/>导出</el-button
>
</div> </div>
</div> </div>
<el-table v-loading="loading" :data="tableData" <el-table
style="width: 100%; height: calc(100vh - 266px);margin-bottom: 20px;" border v-loading="loading"
:header-cell-style="{ background: 'rgb(250 250 250)', height: '50px' }"> :data="tableData"
<el-table-column type="index" label="序号" width="70" align="center"></el-table-column> style="width: 100%; height: calc(100vh - 266px); margin-bottom: 20px"
border
:header-cell-style="{ background: 'rgb(250 250 250)', height: '50px' }"
>
<el-table-column
type="index"
label="序号"
width="70"
align="center"
></el-table-column>
<el-table-column prop="usercode" label="操作账户" width="100"></el-table-column> <el-table-column prop="usercode" label="操作账户" width="100"></el-table-column>
<el-table-column prop="username" label="用户姓名" width="180"></el-table-column> <el-table-column prop="username" label="用户姓名" width="180"></el-table-column>
<el-table-column prop="requestip" label="IP地址" width="140"></el-table-column> <el-table-column prop="requestip" label="IP地址" width="140"></el-table-column>
<el-table-column prop="browser" label="浏览器" width="130"></el-table-column> <el-table-column prop="browser" label="浏览器" width="130"></el-table-column>
<el-table-column prop="opttype" label="日志类型" width="130" align="center"></el-table-column> <el-table-column
prop="opttype"
label="日志类型"
width="130"
align="center"
></el-table-column>
<el-table-column prop="module" label="模块名称" width="170"></el-table-column> <el-table-column prop="module" label="模块名称" width="170"></el-table-column>
<el-table-column prop="description" label="日志描述" min-width="100"> <el-table-column prop="description" label="日志描述" min-width="100">
<template #default="scope"> <template #default="scope">
<div style="display: flex;display: -webkit-flex;justify-content: space-between; align-items: center;-webkit-justify-content: space-between; -webkit-align-items: center;"> <div
style="
display: flex;
display: -webkit-flex;
justify-content: space-between;
align-items: center;
-webkit-justify-content: space-between;
-webkit-align-items: center;
"
>
<div>{{ scope.row.description }}</div> <div>{{ scope.row.description }}</div>
<div><img src="@/assets/MenuIcon/xqing.png" alt="" style="cursor: pointer;" title="详情" @click="Loglist(scope.row)" ></div> <div>
<img
src="@/assets/MenuIcon/xqing.png"
alt=""
style="cursor: pointer"
title="详情"
@click="Loglist(scope.row)"
/>
</div>
</div> </div>
</template> </template>
</el-table-column> </el-table-column>
@ -167,17 +232,43 @@ function handleClose(){
</template> </template>
</el-table-column> </el-table-column>
</el-table> </el-table>
<Page :total="total" v-model:size="queryParams.size" v-model:current="queryParams.current" @pagination="init()"> <Page
:total="total"
v-model:size="queryParams.size"
v-model:current="queryParams.current"
@pagination="init()"
>
</Page> </Page>
</div> </div>
<el-dialog title="日志详情" v-model="LogDetails" width="90%" :before-close="handleClose" top="30px" draggable :destroy-on-close="false"> <el-dialog
<el-table v-loading="loading" :data="Logdata" title="日志详情"
style="width: 100%; height: calc(50vh - 266px);margin-bottom: 20px;" border v-model="LogDetails"
:header-cell-style="{ background: 'rgb(250 250 250)', height: '50px' }"> width="90%"
<el-table-column type="index" label="序号" width="70" align="center"></el-table-column> :before-close="handleClose"
top="30px"
draggable
:destroy-on-close="false"
>
<el-table
v-loading="loading"
:data="Logdata"
style="width: 100%; height: calc(50vh - 266px); margin-bottom: 20px"
border
:header-cell-style="{ background: 'rgb(250 250 250)', height: '50px' }"
>
<el-table-column
type="index"
label="序号"
width="70"
align="center"
></el-table-column>
<el-table-column prop="username" label="用户姓名" width="110"></el-table-column> <el-table-column prop="username" label="用户姓名" width="110"></el-table-column>
<el-table-column prop="module" label="模块名称" width="120"></el-table-column> <el-table-column prop="module" label="模块名称" width="120"></el-table-column>
<el-table-column prop="description" label="日志描述" width="240"></el-table-column> <el-table-column
prop="description"
label="日志描述"
width="240"
></el-table-column>
<el-table-column prop="method" label="方法"></el-table-column> <el-table-column prop="method" label="方法"></el-table-column>
<el-table-column prop="params" label="参数"></el-table-column> <el-table-column prop="params" label="参数"></el-table-column>
</el-table> </el-table>
@ -185,8 +276,11 @@ function handleClose(){
</div> </div>
</template> </template>
<style scoped > <style scoped>
.record-box { .record-box {
position: relative;
z-index: 900;
pointer-events: all;
padding: 20px; padding: 20px;
width: 100%; width: 100%;
height: calc(100vh - 130px); height: calc(100vh - 130px);

3
frontend/src/views/system/review/index.vue
View File

@ -1433,6 +1433,9 @@ function handleClearSelection() {
} }
.faulttemplate-box { .faulttemplate-box {
position: relative;
z-index: 900;
pointer-events: all;
height: 100%; height: 100%;
display: flex; display: flex;
display: -webkit-flex; display: -webkit-flex;

433
frontend/src/views/system/role/index.vue
View File

@ -7,24 +7,36 @@ export default {
<script setup lang="ts"> <script setup lang="ts">
import { onMounted, ref, nextTick } from "vue"; import { onMounted, ref, nextTick } from "vue";
import { ElForm, ElMessage, ElMessageBox } from "element-plus"; import { ElForm, ElMessage, ElMessageBox } from "element-plus";
import { listRolePages, isvaildTo, addDept, renewDept, deleDept, assignmentPer, setMenuById, setOrgscope, postOrgscope } from "@/api/role"; import {
listRolePages,
isvaildTo,
addDept,
renewDept,
deleDept,
assignmentPer,
setMenuById,
setOrgscope,
postOrgscope,
} from "@/api/role";
//定义表格数据 //定义表格数据
const tableData: any = ref([]); const tableData: any = ref([]);
const multipleSelection = ref([]); const multipleSelection = ref([]);
// 权限 // 权限
const tree = ref() const tree = ref();
// 表格加载 // 表格加载
const loading = ref(false) const loading = ref(false);
function gettableData() { function gettableData() {
let params = { let params = {
rolename: input.value, rolename: input.value,
}; };
loading.value = true; loading.value = true;
listRolePages(params).then((result) => { listRolePages(params)
.then((result) => {
tableData.value = result; tableData.value = result;
loading.value = false; loading.value = false;
}).catch(() => { })
.catch(() => {
loading.value = false; loading.value = false;
}); });
} }
@ -33,11 +45,11 @@ function handleSelectionChange(val: any) {
multipleSelection.value = val; multipleSelection.value = val;
} }
function switchChange(row: any) { function switchChange(row: any) {
const elMessage = ref() const elMessage = ref();
if (row.isvaild == '0') { if (row.isvaild == "0") {
elMessage.value = "确定设置该角色为无效吗？" elMessage.value = "确定设置该角色为无效吗？";
} else if (row.isvaild == '1') { } else if (row.isvaild == "1") {
elMessage.value = "确定设置该角色为有效吗？" elMessage.value = "确定设置该角色为有效吗？";
} }
ElMessageBox.confirm(elMessage.value, "提示信息", { ElMessageBox.confirm(elMessage.value, "提示信息", {
confirmButtonText: "确定", confirmButtonText: "确定",
@ -99,7 +111,6 @@ function addClick() {
function confirmClick(formEl: any) { function confirmClick(formEl: any) {
formEl.validate((valid: any) => { formEl.validate((valid: any) => {
if (valid) { if (valid) {
if (!info.value.id) { if (!info.value.id) {
const params = { const params = {
rolename: info.value.rolename, rolename: info.value.rolename,
@ -133,8 +144,8 @@ function handleClose() {
dialogVisible.value = false; dialogVisible.value = false;
businessVisible.value = false; businessVisible.value = false;
organizeVisible.value = false; organizeVisible.value = false;
accessVisible.value = false accessVisible.value = false;
businessVisible.value = false businessVisible.value = false;
if (infoForm.value != null) infoForm.value.resetFields(); if (infoForm.value != null) infoForm.value.resetFields();
} }
//新建角色-rules //新建角色-rules
@ -155,8 +166,7 @@ function businessclick() {
ElMessageBox.confirm("此模块允许用户进行定制。", "提示信息", { ElMessageBox.confirm("此模块允许用户进行定制。", "提示信息", {
confirmButtonText: "确定", confirmButtonText: "确定",
type: "warning", type: "warning",
}) }).then(() => {
.then(() => {
businessVisible.value = false; businessVisible.value = false;
}); });
} }
@ -167,55 +177,54 @@ function businessclick() {
// } // }
//组织范围修改 //组织范围修改
const organizeVisible = ref(false); const organizeVisible = ref(false);
const deptdata = ref() const deptdata = ref();
const roleIda = ref('') const roleIda = ref("");
function organizeclick(row: any) { function organizeclick(row: any) {
organizeVisible.value = true; organizeVisible.value = true;
roleIda.value = row.id roleIda.value = row.id;
const params = { const params = {
roleId: row.id roleId: row.id,
} };
setOrgscope(params).then((res) => { setOrgscope(params).then((res) => {
deptdata.value = res deptdata.value = res;
}) });
} }
function accessCheckAllChange(indexone: any) { function accessCheckAllChange(indexone: any) {
const Arrayall: any = ref([]) const Arrayall: any = ref([]);
for (var j = 0; j < deptdata.value[indexone].children.length; j++) { for (var j = 0; j < deptdata.value[indexone].children.length; j++) {
Arrayall.value.push(deptdata.value[indexone].children[j].orgname) Arrayall.value.push(deptdata.value[indexone].children[j].orgname);
} }
deptdata.value[indexone].array = deptdata.value[indexone].checkinfo ? Arrayall : [] deptdata.value[indexone].array = deptdata.value[indexone].checkinfo ? Arrayall : [];
deptdata.value[indexone].bool = false deptdata.value[indexone].bool = false;
} }
function accessCheckedCitiesChanges(indexone: any) { function accessCheckedCitiesChanges(indexone: any) {
const checkedCount = deptdata.value[indexone].array.length const checkedCount = deptdata.value[indexone].array.length;
const cities = deptdata.value[indexone].children.length const cities = deptdata.value[indexone].children.length;
deptdata.value[indexone].checkinfo = checkedCount === cities deptdata.value[indexone].checkinfo = checkedCount === cities;
deptdata.value[indexone].bool = checkedCount > 0 && checkedCount < cities deptdata.value[indexone].bool = checkedCount > 0 && checkedCount < cities;
} }
function organizesubmit() { function organizesubmit() {
const allid: any = ref([]) const allid: any = ref([]);
deptdata.value.forEach((item: any) => { deptdata.value.forEach((item: any) => {
item.children.forEach((element: any) => { item.children.forEach((element: any) => {
item.array.forEach((res: any) => { item.array.forEach((res: any) => {
if (res == element.orgname) { if (res == element.orgname) {
allid.value.push(element.id) allid.value.push(element.id);
} }
}) });
}) });
}) });
const params = { const params = {
id: roleIda.value, id: roleIda.value,
orgscope: allid.value.toString() orgscope: allid.value.toString(),
} };
postOrgscope(params).then(() => { postOrgscope(params).then(() => {
ElMessage({ ElMessage({
type: "success", type: "success",
message: "组织范围修改成功", message: "组织范围修改成功",
}); });
organizeVisible.value = false organizeVisible.value = false;
}) });
} }
//删除角色 //删除角色
function delrole(row: any) { function delrole(row: any) {
@ -223,8 +232,7 @@ function delrole(row: any) {
confirmButtonText: "确定", confirmButtonText: "确定",
cancelButtonText: "取消", cancelButtonText: "取消",
type: "warning", type: "warning",
}) }).then(() => {
.then(() => {
let params = { let params = {
id: row.id, id: row.id,
}; };
@ -235,67 +243,65 @@ function delrole(row: any) {
message: "删除成功", message: "删除成功",
}); });
}); });
}) });
} }
//权限分配 //权限分配
const accessVisible: any = ref() const accessVisible: any = ref();
const accessdata: any = ref([]) const accessdata: any = ref([]);
//默认展开节点的key数组 //默认展开节点的key数组
const DefaultDeployment: any = ref([]) const DefaultDeployment: any = ref([]);
//传参id //传参id
const Passparameter: any = ref([]) const Passparameter: any = ref([]);
const defaultProps = { const defaultProps = {
children: 'children', children: "children",
label: 'name', label: "name",
} };
const rowid = ref() const rowid = ref();
function menuChange(data: any, ids: any) { function menuChange(data: any, ids: any) {
data.forEach((item: any) => { data.forEach((item: any) => {
if (item.checkinfo == true) { if (item.checkinfo == true) {
ids.push(item.id) ids.push(item.id);
DefaultDeployment.value.push(item.id) DefaultDeployment.value.push(item.id);
} }
if (item.children) { if (item.children) {
menuChange(item.children, ids) menuChange(item.children, ids);
} }
}) });
} }
function assignment(row: any) { function assignment(row: any) {
rowid.value = row.id rowid.value = row.id;
accessVisible.value = true accessVisible.value = true;
const params = { const params = {
roleId: rowid.value roleId: rowid.value,
} };
assignmentPer(params).then((res: any) => { assignmentPer(params).then((res: any) => {
accessdata.value = res accessdata.value = res;
let ids: any = [] let ids: any = [];
menuChange(res, ids) menuChange(res, ids);
nextTick(() => { nextTick(() => {
tree.value.setCheckedKeys(ids) tree.value.setCheckedKeys(ids);
}) });
});
})
} }
// 树形选择器 // 树形选择器
function currentChecked(_nodeObj: any, SelectedObj: any) { function currentChecked(_nodeObj: any, SelectedObj: any) {
Passparameter.value = SelectedObj.checkedKeys.concat(SelectedObj.halfCheckedKeys) Passparameter.value = SelectedObj.checkedKeys.concat(SelectedObj.halfCheckedKeys);
} }
// 权限范围-权限范围-确定 // 权限范围-权限范围-确定
function accesssubmit() { function accesssubmit() {
const parans = { const parans = {
id: rowid.value, id: rowid.value,
menuIds: Passparameter.value.toString() menuIds: Passparameter.value.toString(),
} };
setMenuById(parans).then(() => { setMenuById(parans).then(() => {
accessVisible.value = false accessVisible.value = false;
gettableData() gettableData();
ElMessage({ ElMessage({
type: "success", type: "success",
message: "修改成功", message: "修改成功",
}); });
}) });
} }
// 多选删除？ // 多选删除？
function delClick() { function delClick() {
@ -306,10 +312,10 @@ function delClick() {
}).then(() => { }).then(() => {
let id = [] as any[]; let id = [] as any[];
multipleSelection.value.forEach((item: any) => { multipleSelection.value.forEach((item: any) => {
id.push(item.id) id.push(item.id);
}) });
let params = { let params = {
id: id.join(','), id: id.join(","),
}; };
deleDept(params).then(() => { deleDept(params).then(() => {
gettableData(); gettableData();
@ -346,24 +352,55 @@ onMounted(() => {
<div class="invalidcatalogue-box"> <div class="invalidcatalogue-box">
<div class="conductproject-bg-box"> <div class="conductproject-bg-box">
<div <div
style="display: flex;display: -webkit-flex; justify-content: space-between; -webkit-justify-content: space-between;margin-bottom: 10px"> style="
<div style="display: flex;display: -webkit-flex;"> display: flex;
<el-input v-model="input" placeholder="请输入角色名称" @keyup.enter="gettableData" style="width: 200px" clearable /> display: -webkit-flex;
<el-button type="primary" style="margin-left: 10px" @click="gettableData">搜索</el-button> justify-content: space-between;
-webkit-justify-content: space-between;
margin-bottom: 10px;
"
>
<div style="display: flex; display: -webkit-flex">
<el-input
v-model="input"
placeholder="请输入角色名称"
@keyup.enter="gettableData"
style="width: 200px"
clearable
/>
<el-button type="primary" style="margin-left: 10px" @click="gettableData"
>搜索</el-button
>
</div> </div>
<div> <div>
<el-button v-hasPerm="['add:role']" type="primary" @click="addClick"> <el-button v-hasPerm="['add:role']" type="primary" @click="addClick">
<img src="@/assets/MenuIcon/jscz_xz.png" alt="" style="margin-right: 3px"> <img src="@/assets/MenuIcon/jscz_xz.png" alt="" style="margin-right: 3px" />
新增</el-button> 新增</el-button
<el-button v-hasPerm="['del:role']" :type="multipleSelection.length > 0 ? 'primary' : ''" >
:disabled="multipleSelection.length <= 0" @click="delClick"><el-icon> <el-button
v-hasPerm="['del:role']"
:type="multipleSelection.length > 0 ? 'primary' : ''"
:disabled="multipleSelection.length <= 0"
@click="delClick"
><el-icon>
<Delete /> <Delete />
</el-icon> 删除</el-button> </el-icon>
删除</el-button
>
</div> </div>
</div> </div>
<el-table v-loading="loading" :data="tableData" style="width: 100%; height: calc(100vh - 220px)" border <el-table
v-loading="loading"
:data="tableData"
style="width: 100%; height: calc(100vh - 220px)"
border
@selection-change="handleSelectionChange" @selection-change="handleSelectionChange"
:header-cell-style="{ background: 'rgb(250 250 250)', color: '#383838', height: '50px' }"> :header-cell-style="{
background: 'rgb(250 250 250)',
color: '#383838',
height: '50px',
}"
>
<el-table-column type="selection" width="50" align="center"></el-table-column> <el-table-column type="selection" width="50" align="center"></el-table-column>
<el-table-column prop="rolecode" label="角色编号" width="100"></el-table-column> <el-table-column prop="rolecode" label="角色编号" width="100"></el-table-column>
<el-table-column prop="rolename" label="角色名称" width="180"></el-table-column> <el-table-column prop="rolename" label="角色名称" width="180"></el-table-column>
@ -374,16 +411,29 @@ onMounted(() => {
<span v-show="scope.row.level == '3'">一般用户</span> <span v-show="scope.row.level == '3'">一般用户</span>
</template> </template>
</el-table-column> </el-table-column>
<el-table-column prop="description" label="角色描述" min-width="100"></el-table-column> <el-table-column
prop="description"
label="角色描述"
min-width="100"
></el-table-column>
<el-table-column prop="isvaild" label="是否有效" align="center" width="120"> <el-table-column prop="isvaild" label="是否有效" align="center" width="120">
<template #default="scope"> <template #default="scope">
<el-switch v-model="scope.row.isvaild" @change="switchChange(scope.row)" style="margin-right: 4px" <el-switch
active-value="1" inactive-value="0"></el-switch> v-model="scope.row.isvaild"
@change="switchChange(scope.row)"
style="margin-right: 4px"
active-value="1"
inactive-value="0"
></el-switch>
<span v-if="scope.row.isvaild == 1" style="color: #0099ff">有效</span> <span v-if="scope.row.isvaild == 1" style="color: #0099ff">有效</span>
<span v-else style="color: #d7d7d7">无效</span> <span v-else style="color: #d7d7d7">无效</span>
</template> </template>
</el-table-column> </el-table-column>
<el-table-column prop="lastmodifier" label="最近修改者" width="120"></el-table-column> <el-table-column
prop="lastmodifier"
label="最近修改者"
width="120"
></el-table-column>
<el-table-column prop="lastmodifydate" label="最近修改日期" width="200"> <el-table-column prop="lastmodifydate" label="最近修改日期" width="200">
<template #default="scope"> <template #default="scope">
{{ dateFormat(scope.row.lastmodifydate) }} {{ dateFormat(scope.row.lastmodifydate) }}
@ -392,71 +442,199 @@ onMounted(() => {
<el-table-column fixed="right" label="操作" width="200"> <el-table-column fixed="right" label="操作" width="200">
<template #default="scope"> <template #default="scope">
<span <span
style="display: flex;display: -webkit-flex; justify-content: space-around;-webkit-justify-content: space-around; "> style="
<img v-hasPerm="['update:role']" src="@/assets/MenuIcon/lbcz_xg.png" alt="" title="修改" display: flex;
@click="editrole(scope.row)" style="cursor: pointer; "> display: -webkit-flex;
<img src="@/assets/MenuIcon/lbcz_zyw.png" alt="" title="业务范围" @click="businessclick" justify-content: space-around;
style="cursor: pointer;"> -webkit-justify-content: space-around;
<img src="@/assets/MenuIcon/u343.png" alt="" title="组织范围" @click="organizeclick(scope.row)" "
style="cursor: pointer; "> >
<img src="@/assets/MenuIcon/lbcz_qx.png" alt="" title="权限分配" @click="assignment(scope.row)" <img
style="cursor: pointer; "> v-hasPerm="['update:role']"
<img v-hasPerm="['del:role']" src="@/assets/MenuIcon/lbcz_sc.png" alt="" title="删除" src="@/assets/MenuIcon/lbcz_xg.png"
@click="delrole(scope.row)" style="cursor: pointer; "> alt=""
title="修改"
@click="editrole(scope.row)"
style="cursor: pointer"
/>
<img
src="@/assets/MenuIcon/lbcz_zyw.png"
alt=""
title="业务范围"
@click="businessclick"
style="cursor: pointer"
/>
<img
src="@/assets/MenuIcon/u343.png"
alt=""
title="组织范围"
@click="organizeclick(scope.row)"
style="cursor: pointer"
/>
<img
src="@/assets/MenuIcon/lbcz_qx.png"
alt=""
title="权限分配"
@click="assignment(scope.row)"
style="cursor: pointer"
/>
<img
v-hasPerm="['del:role']"
src="@/assets/MenuIcon/lbcz_sc.png"
alt=""
title="删除"
@click="delrole(scope.row)"
style="cursor: pointer"
/>
</span> </span>
</template> </template>
</el-table-column> </el-table-column>
</el-table> </el-table>
</div> </div>
<el-dialog v-model="dialogVisible" :close-on-click-modal="false" draggable :before-close="handleClose" :title="title" <el-dialog
append-to-body width="620px" height="600px"> v-model="dialogVisible"
:close-on-click-modal="false"
draggable
:before-close="handleClose"
:title="title"
append-to-body
width="620px"
height="600px"
>
<el-form ref="infoForm" :model="info" :rules="rules" label-width="110px"> <el-form ref="infoForm" :model="info" :rules="rules" label-width="110px">
<el-form-item label="角色名称：" prop="rolename"> <el-form-item label="角色名称：" prop="rolename">
<el-input v-model="info.rolename" style="width: 100%" placeholder="请输入角色名称"></el-input> <el-input
v-model="info.rolename"
style="width: 100%"
placeholder="请输入角色名称"
></el-input>
</el-form-item> </el-form-item>
<el-form-item label="角色级别：" prop="level"> <el-form-item label="角色级别：" prop="level">
<el-select v-model="info.level" placeholder=" " style="width: 100%"> <el-select v-model="info.level" placeholder=" " style="width: 100%">
<el-option v-for="item in faultList" :key="item.value" :label="item.label" :value="item.value" /> <el-option
v-for="item in faultList"
:key="item.value"
:label="item.label"
:value="item.value"
/>
</el-select> </el-select>
</el-form-item> </el-form-item>
<el-form-item label="角色描述："> <el-form-item label="角色描述：">
<el-input v-model="info.description" style="width: 100%" placeholder="请输入角色描述"></el-input> <el-input
v-model="info.description"
style="width: 100%"
placeholder="请输入角色描述"
></el-input>
</el-form-item> </el-form-item>
<span class="dialog-footer" <span
style="display: flex;display: -webkit-flex; justify-content: flex-end;-webkit-justify-content: flex-end;"> class="dialog-footer"
style="
display: flex;
display: -webkit-flex;
justify-content: flex-end;
-webkit-justify-content: flex-end;
"
>
<el-button @click="handleClose">取 消</el-button> <el-button @click="handleClose">取 消</el-button>
<el-button type="primary" @click="confirmClick(infoForm)">确 定</el-button> <el-button type="primary" @click="confirmClick(infoForm)">确 定</el-button>
</span> </span>
</el-form> </el-form>
</el-dialog> </el-dialog>
<el-dialog title="组织范围" v-model="organizeVisible" width="60%" draggable :before-close="handleClose"> <el-dialog
<div v-for="(item, indexone) in deptdata" :label="item.name" :key="item.id" style="width:90%;margin:auto"> title="组织范围"
<div style=" font-size: 15px; font-weight: 700; display: inline-block; margin: 8px 0px;">{{ item.orgname }}</div> v-model="organizeVisible"
<div style="display: flex; display: -webkit-flex;align-items: center;-webkit-align-items: center;"> width="60%"
draggable
:before-close="handleClose"
>
<div
v-for="(item, indexone) in deptdata"
:label="item.name"
:key="item.id"
style="width: 90%; margin: auto"
>
<div
style="
font-size: 15px;
font-weight: 700;
display: inline-block;
margin: 8px 0px;
"
>
{{ item.orgname }}
</div>
<div
style="
display: flex;
display: -webkit-flex;
align-items: center;
-webkit-align-items: center;
"
>
<div>部门选择</div> <div>部门选择</div>
<div style="display: flex; display: -webkit-flex;margin-left: 60px;"> <div style="display: flex; display: -webkit-flex; margin-left: 60px">
<el-checkbox v-model="item.checkinfo" :indeterminate="item.bool" <el-checkbox
@change="accessCheckAllChange(indexone)">全选</el-checkbox> v-model="item.checkinfo"
<el-checkbox-group v-model="item.array" @change="accessCheckedCitiesChanges(indexone)" :indeterminate="item.bool"
style="margin-left:20px"> @change="accessCheckAllChange(indexone)"
<el-checkbox v-for="k in item.children" :key="k.id" :label="k.orgname">{{ k.orgname }}</el-checkbox> >全选</el-checkbox
>
<el-checkbox-group
v-model="item.array"
@change="accessCheckedCitiesChanges(indexone)"
style="margin-left: 20px"
>
<el-checkbox v-for="k in item.children" :key="k.id" :label="k.orgname">{{
k.orgname
}}</el-checkbox>
</el-checkbox-group> </el-checkbox-group>
</div> </div>
</div> </div>
<div class="line"></div> <div class="line"></div>
</div> </div>
<span class="dialog-footer" <span
style="display: flex; display: -webkit-flex;; justify-content: flex-end;-webkit-justify-content: flex-end;"> class="dialog-footer"
style="
display: flex;
display: -webkit-flex;
justify-content: flex-end;
-webkit-justify-content: flex-end;
"
>
<el-button @click="organizeVisible = false">取 消</el-button> <el-button @click="organizeVisible = false">取 消</el-button>
<el-button type="primary" @click="organizesubmit">确 定</el-button> <el-button type="primary" @click="organizesubmit">确 定</el-button>
</span> </span>
</el-dialog> </el-dialog>
<el-dialog title="权限分配" v-model="accessVisible" width="500px" :before-close="handleClose" :destroy-on-close="false" draggable style="max-height: 640px;" > <el-dialog
<el-tree ref="tree" style="max-height: 400px;overflow:auto" :data="accessdata" show-checkbox node-key="id" accordion title="权限分配"
:default-expanded-keys="DefaultDeployment" :props="defaultProps" @check="currentChecked" /> v-model="accessVisible"
<span class="dialog-footer" width="500px"
style="display: flex;display: -webkit-flex; justify-content: flex-end;-webkit-justify-content: flex-end;"> :before-close="handleClose"
:destroy-on-close="false"
draggable
style="max-height: 640px"
>
<el-tree
ref="tree"
style="max-height: 400px; overflow: auto"
:data="accessdata"
show-checkbox
node-key="id"
accordion
:default-expanded-keys="DefaultDeployment"
:props="defaultProps"
@check="currentChecked"
/>
<span
class="dialog-footer"
style="
display: flex;
display: -webkit-flex;
justify-content: flex-end;
-webkit-justify-content: flex-end;
"
>
<el-button @click="accessVisible = false">取 消</el-button> <el-button @click="accessVisible = false">取 消</el-button>
<el-button type="primary" @click="accesssubmit">确 定</el-button> <el-button type="primary" @click="accesssubmit">确 定</el-button>
</span> </span>
@ -466,6 +644,9 @@ onMounted(() => {
<style scoped> <style scoped>
.invalidcatalogue-box { .invalidcatalogue-box {
position: relative;
z-index: 900;
pointer-events: all;
padding-right: 10px; padding-right: 10px;
} }

690
frontend/src/views/system/user/index.vue
View File

File diff suppressed because it is too large Load Diff