JEECG
1 year ago
parent
17c68f6d53
commit
13cb18b707
File diff suppressed because it is too large
Load Diff
@ -1,99 +0,0 @@
|
||||
<template>
|
||||
<div class="mask" v-if="showMask && show">
|
||||
<div class="progress-bar-rear">
|
||||
<div class="progress-bar-front" :style="{ width: progressBarWidth }"></div>
|
||||
</div>
|
||||
<div class="value">{{ percentage }}</div>
|
||||
</div>
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
import { computed, ref } from 'vue';
|
||||
|
||||
const props = defineProps({
|
||||
backColor: {
|
||||
type: [String],
|
||||
default: 'white',
|
||||
},
|
||||
processColor: {
|
||||
type: String,
|
||||
default: '#018FFB',
|
||||
},
|
||||
show: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
});
|
||||
//显示遮罩
|
||||
const showMask = ref(false);
|
||||
//进度值占比
|
||||
const progressValue = ref<any>(0);
|
||||
//当前数量
|
||||
const currentNum = ref(0);
|
||||
// 计算进度条宽度的计算属性
|
||||
const progressBarWidth = computed(() => {
|
||||
return progressValue.value > 0 ? `${progressValue.value}px` : '0px';
|
||||
});
|
||||
// 计算进度条百分比
|
||||
const percentage = computed(() => {
|
||||
return `${progressValue.value}%`;
|
||||
});
|
||||
// 进度色
|
||||
const frontColor = computed(() => {
|
||||
return props.processColor;
|
||||
});
|
||||
// 后置背景色
|
||||
const rearColor = computed(() => {
|
||||
return props.backColor;
|
||||
});
|
||||
function calcProcess(totalNum) {
|
||||
!showMask.value && (showMask.value = true);
|
||||
currentNum.value += 1;
|
||||
progressValue.value = ((currentNum.value / totalNum) * 100).toFixed(2);
|
||||
console.log('currentNum.value', currentNum.value);
|
||||
console.log('totalNum.value', totalNum);
|
||||
if (currentNum.value == totalNum) {
|
||||
showMask.value = false;
|
||||
currentNum.value = 0;
|
||||
progressValue.value = 0;
|
||||
}
|
||||
}
|
||||
defineExpose({
|
||||
calcProcess,
|
||||
showMask,
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="less">
|
||||
.mask {
|
||||
position: absolute; /* 或者使用固定定位等其他方式 */
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background-color: rgba(0, 0, 0, 0.5); /* 半透明遮罩 */
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
overflow: hidden;
|
||||
z-index: 99;
|
||||
}
|
||||
|
||||
.progress-bar-rear {
|
||||
width: 100px; /* 进度条宽度 */
|
||||
height: 10px; /* 进度条高度 */
|
||||
background-color: v-bind(rearColor); /* 进度条颜色 */
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.progress-bar-front {
|
||||
height: 10px; /* 进度条高度 */
|
||||
background-color: v-bind(frontColor); /* 进度条颜色 */
|
||||
border-radius: 4px;
|
||||
}
|
||||
.value {
|
||||
color: #fff;
|
||||
margin-left: 5px;
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,38 @@
|
||||
import {areaList} from '@vant/area-data'
|
||||
import {freezeDeep} from "@/utils/common/compUtils";
|
||||
|
||||
// 扁平化的省市区数据
|
||||
export const pcaa = freezeDeep(usePlatPcaaData())
|
||||
|
||||
/**
|
||||
* 获取扁平化的省市区数据
|
||||
*/
|
||||
function usePlatPcaaData() {
|
||||
const {city_list: city, county_list: county, province_list: province} = areaList;
|
||||
const dataMap = new Map<string, Recordable>()
|
||||
const flatData: Recordable = {'86': province}
|
||||
// 省
|
||||
Object.keys(province).forEach((code) => {
|
||||
flatData[code] = {}
|
||||
dataMap.set(code.slice(0, 2), flatData[code])
|
||||
})
|
||||
// 市区
|
||||
Object.keys(city).forEach((code) => {
|
||||
flatData[code] = {}
|
||||
dataMap.set(code.slice(0, 4), flatData[code])
|
||||
// 填充上一级
|
||||
const getProvince = dataMap.get(code.slice(0, 2))
|
||||
if (getProvince) {
|
||||
getProvince[code] = city[code]
|
||||
}
|
||||
});
|
||||
// 县
|
||||
Object.keys(county).forEach((code) => {
|
||||
// 填充上一级
|
||||
const getCity = dataMap.get(code.slice(0, 4))
|
||||
if (getCity) {
|
||||
getCity[code] = county[code]
|
||||
}
|
||||
});
|
||||
return flatData
|
||||
}
|
||||
@ -0,0 +1,84 @@
|
||||
<template>
|
||||
<BasicModal v-bind="$attrs" @register="registerModal" title="路由回收站" :showOkBtn="false" width="1000px" destroyOnClose>
|
||||
<BasicTable @register="registerTable">
|
||||
<template #status="{ record, text }">
|
||||
<a-tag color="pink" v-if="text == 0">禁用</a-tag>
|
||||
<a-tag color="#87d068" v-if="text == 1">正常</a-tag>
|
||||
</template>
|
||||
<!--操作栏-->
|
||||
<template #action="{ record }">
|
||||
<TableAction :actions="getTableAction(record)" />
|
||||
</template>
|
||||
</BasicTable>
|
||||
</BasicModal>
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
import { ref } from 'vue';
|
||||
import { BasicModal, useModalInner } from '/@/components/Modal';
|
||||
import { BasicTable, useTable, TableAction } from '/@/components/Table';
|
||||
import { columns } from '../route.data';
|
||||
import { deleteRouteList, putRecycleBin, deleteRecycleBin } from '../route.api';
|
||||
// 声明Emits
|
||||
const emit = defineEmits(['success', 'register']);
|
||||
const checkedKeys = ref<Array<string | number>>([]);
|
||||
const [registerModal] = useModalInner(() => {
|
||||
checkedKeys.value = [];
|
||||
});
|
||||
//注册table数据
|
||||
const [registerTable, { reload }] = useTable({
|
||||
rowKey: 'id',
|
||||
api: deleteRouteList,
|
||||
columns: columns,
|
||||
striped: true,
|
||||
useSearchForm: false,
|
||||
bordered: true,
|
||||
showIndexColumn: false,
|
||||
pagination: false,
|
||||
tableSetting: { fullScreen: true },
|
||||
canResize: false,
|
||||
actionColumn: {
|
||||
width: 150,
|
||||
title: '操作',
|
||||
dataIndex: 'action',
|
||||
slots: { customRender: 'action' },
|
||||
fixed: 'right',
|
||||
},
|
||||
});
|
||||
|
||||
/**
|
||||
* 还原事件
|
||||
*/
|
||||
async function handleRevert(record) {
|
||||
await putRecycleBin({ ids: record.id }, reload);
|
||||
emit('success');
|
||||
}
|
||||
/**
|
||||
* 删除事件
|
||||
*/
|
||||
async function handleDelete(record) {
|
||||
await deleteRecycleBin({ ids: record.id }, reload);
|
||||
}
|
||||
|
||||
//获取操作栏事件
|
||||
function getTableAction(record) {
|
||||
return [
|
||||
{
|
||||
label: '取回',
|
||||
icon: 'ant-design:redo-outlined',
|
||||
popConfirm: {
|
||||
title: '是否确认取回',
|
||||
confirm: handleRevert.bind(null, record),
|
||||
},
|
||||
},
|
||||
{
|
||||
label: '彻底删除',
|
||||
icon: 'ant-design:scissor-outlined',
|
||||
color: 'error',
|
||||
popConfirm: {
|
||||
title: '是否确认删除',
|
||||
confirm: handleDelete.bind(null, record),
|
||||
},
|
||||
},
|
||||
];
|
||||
}
|
||||
</script>
|
||||
Some files were not shown because too many files have changed in this diff Show More
Loading…
Reference in new issue