feat: 优化结构
This commit is contained in:
sudoooooo
parent
b494bd6174
commit
fb57eaaba7
@ -24,7 +24,5 @@ export const replacePxWithRem = (html) => {
|
||||
})
|
||||
})
|
||||
|
||||
console.log('生成的结果', res)
|
||||
|
||||
return res
|
||||
}
|
||||
|
||||
@ -18,7 +18,7 @@
|
||||
</template>
|
||||
<script setup lang="ts">
|
||||
import { useStore } from 'vuex'
|
||||
import { EDIT_STATUS_MAP } from './enum'
|
||||
import { EDIT_STATUS_MAP } from './components/enum'
|
||||
|
||||
const store = useStore()
|
||||
const statusList = [
|
||||
|
||||
@ -18,7 +18,7 @@ import { get as _get } from 'lodash-es'
|
||||
|
||||
import SuccessContent from './components/SuccessContent.vue'
|
||||
import OverTime from './components/OverTime.vue'
|
||||
import { EDIT_STATUS_MAP } from './enum'
|
||||
import { EDIT_STATUS_MAP } from './components/enum'
|
||||
|
||||
const components = {
|
||||
[EDIT_STATUS_MAP.SUCCESS]: SuccessContent,
|
||||
|
||||
@ -21,7 +21,7 @@
|
||||
</div>
|
||||
</template>
|
||||
<script setup>
|
||||
import { ref, computed, defineProps, defineEmits, onMounted } from 'vue'
|
||||
import { ref, computed, defineEmits, onMounted } from 'vue'
|
||||
import { FORM_CHANGE_EVENT_KEY } from '@/materials/setters/constant'
|
||||
import { getMemberList } from '@/management/api/space'
|
||||
import { ElMessage } from 'element-plus'
|
||||
|
||||
@ -1,4 +0,0 @@
|
||||
export const EDIT_STATUS_MAP = {
|
||||
SUCCESS: 'Success',
|
||||
OVERTIME: 'OverTime'
|
||||
}
|
||||
@ -1,96 +0,0 @@
|
||||
<template>
|
||||
<div class="team-member-wrap">
|
||||
<div class="team-tree-wrap">
|
||||
<el-tree ref="treeRef" :default-expanded-keys="defaultCheckedKeys" :default-checked-keys="defaultCheckedKeys"
|
||||
:data="treeData" empty-text="暂无数据" @check="handleChange" style="height:201px" highlight-current show-checkbox
|
||||
node-key="id" :props="defaultProps" />
|
||||
</div>
|
||||
<div class="member-count">已选择 <span>{{ selectCount }}</span> 人</div>
|
||||
</div>
|
||||
</template>
|
||||
<script setup>
|
||||
import { ref, computed, defineProps, defineEmits, onMounted } from 'vue'
|
||||
import { FORM_CHANGE_EVENT_KEY } from '@/materials/setters/constant'
|
||||
import {
|
||||
getMemberList
|
||||
} from '@/management/api/space'
|
||||
import { ElMessage } from 'element-plus'
|
||||
|
||||
const props = defineProps({
|
||||
formConfig: Object,
|
||||
})
|
||||
const emit = defineEmits([FORM_CHANGE_EVENT_KEY])
|
||||
|
||||
const treeRef = ref(null)
|
||||
const treeData = ref([])
|
||||
const defaultCheckedKeys = ref([])
|
||||
const defaultProps = {
|
||||
children: 'children',
|
||||
label: 'label',
|
||||
}
|
||||
|
||||
const handleChange = () => {
|
||||
const key = props.formConfig.key;
|
||||
const userKeys = treeRef.value?.getCheckedKeys(true);
|
||||
if (userKeys.length > 100) {
|
||||
ElMessage.error('最多添加100个')
|
||||
return;
|
||||
}
|
||||
emit(FORM_CHANGE_EVENT_KEY, { key: key, value: userKeys });
|
||||
}
|
||||
|
||||
|
||||
const selectCount = computed(() => {
|
||||
return treeRef.value?.getCheckedKeys(true).length || 0
|
||||
})
|
||||
|
||||
|
||||
const getSpaceMenus = async () => {
|
||||
const res = await getMemberList();
|
||||
if (res.code != 200) {
|
||||
ElMessage.error('获取空间成员列表失败');
|
||||
return
|
||||
}
|
||||
const data = res.data;
|
||||
data.map((v) => {
|
||||
const members = v.members || [];
|
||||
treeData.value.push({
|
||||
id: v.ownerId,
|
||||
label: v.name,
|
||||
children: members?.map(v => ({
|
||||
id: v.userId,
|
||||
label: v.role,
|
||||
}))
|
||||
})
|
||||
})
|
||||
defaultCheckedKeys.value = props.formConfig.value;
|
||||
}
|
||||
|
||||
|
||||
onMounted(() => {
|
||||
getSpaceMenus();
|
||||
})
|
||||
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.team-member-wrap {
|
||||
width: 508px;
|
||||
|
||||
.team-tree-wrap {
|
||||
background: #FFFFFF;
|
||||
border: 1px solid rgba(227, 228, 232, 1);
|
||||
border-radius: 2px;
|
||||
min-height: 204px;
|
||||
max-height: 204px;
|
||||
overflow-x: auto;
|
||||
}
|
||||
|
||||
.member-count {
|
||||
text-align: right;
|
||||
|
||||
span {
|
||||
color: $primary-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -1,145 +0,0 @@
|
||||
<template>
|
||||
<div class="white-list-wrap">
|
||||
<el-button class="create-btn" type="primary" @click="whiteVisible=true">
|
||||
添加
|
||||
</el-button>
|
||||
<el-button v-if="whitelist.length>0" class="create-btn" color="#4A4C5B" @click="delAllList">
|
||||
全部删除
|
||||
</el-button>
|
||||
<el-table class="table-wrap" empty-text="暂无数据" :data="whitelist" height="240" style="width: 426px">
|
||||
<el-table-column label="名单" width="350" >
|
||||
<template #default="scope">
|
||||
<div>{{ whitelist[scope.$index] }}</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="操作" width="74" >
|
||||
<template #default="scope">
|
||||
<div @click="delRowItem(scope.$index)" class="flex cursor"><i-ep-delete :size="16" /></div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<el-dialog v-model="whiteVisible" title="添加白名单" width="600" @closed="handleClose">
|
||||
<div>
|
||||
<el-form-item label-position="top" label="类型选择" label-width="auto">
|
||||
<el-radio-group v-model="memberType" >
|
||||
<el-radio value="MOBILE">手机号</el-radio>
|
||||
<el-radio value="EMAIL">邮箱</el-radio>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
<el-form-item label-position="top" class="flex-column" label="名单录入" label-width="auto">
|
||||
<el-input v-model="whiteTextarea" placeholder="多个用逗号(半角)“,”隔开" rows="7" resize="none" type="textarea" />
|
||||
</el-form-item>
|
||||
</div>
|
||||
<template #footer>
|
||||
<div class="dialog-footer">
|
||||
<el-button @click="whiteVisible = false">取消</el-button>
|
||||
<el-button type="primary" @click="handleChange">
|
||||
确定
|
||||
</el-button>
|
||||
</div>
|
||||
</template>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
<script setup>
|
||||
|
||||
import { ref,nextTick } from 'vue'
|
||||
import { FORM_CHANGE_EVENT_KEY } from '@/materials/setters/constant'
|
||||
import { ElMessage } from 'element-plus'
|
||||
import { regexpMap } from '@/common/regexpMap.ts'
|
||||
|
||||
const props = defineProps({
|
||||
formConfig: Object,
|
||||
})
|
||||
const emit = defineEmits([FORM_CHANGE_EVENT_KEY])
|
||||
|
||||
const whitelist = ref(props.formConfig.value[0] || [])
|
||||
const memberType = ref(props.formConfig.value[1] || 'MOBILE')
|
||||
const whiteVisible = ref(false)
|
||||
const whiteTextarea = ref(whitelist.value.join(','))
|
||||
|
||||
const regularMap = {
|
||||
MOBILE:regexpMap.m,
|
||||
EMAIL:regexpMap.e
|
||||
}
|
||||
|
||||
|
||||
const checkValRule = (list) => {
|
||||
let status = false;
|
||||
if (list.length > 100) {
|
||||
ElMessage.error('最多添加100个')
|
||||
return true;
|
||||
};
|
||||
const pattern = regularMap[memberType.value];
|
||||
if(!pattern) return false;
|
||||
for (let i = 0; i < list.length; i++) {
|
||||
if (!pattern.test(list[i])) {
|
||||
status = true;
|
||||
ElMessage.error('数据格式错误，请检查后重新输入~')
|
||||
break;
|
||||
}
|
||||
}
|
||||
return status;
|
||||
}
|
||||
|
||||
|
||||
|
||||
const handleChange = () => {
|
||||
const keys = props.formConfig.keys;
|
||||
const list = whiteTextarea.value ? whiteTextarea.value.split(',') : []
|
||||
if(checkValRule(list)) return
|
||||
emit(FORM_CHANGE_EVENT_KEY, { key:keys[0], value: list });
|
||||
emit(FORM_CHANGE_EVENT_KEY, { key: keys[1], value: memberType.value })
|
||||
whiteVisible.value = false
|
||||
}
|
||||
|
||||
const handleClose = () => {
|
||||
nextTick(() => {
|
||||
whitelist.value = props.formConfig.value[0] || []
|
||||
whiteTextarea.value = whitelist.value.join(',')
|
||||
memberType.value = props.formConfig.value[1] || 'MOBILE'
|
||||
})
|
||||
}
|
||||
|
||||
const delRowItem = (index) => {
|
||||
whitelist.value.splice(index, 1);
|
||||
whiteTextarea.value = whitelist.value.join(',')
|
||||
const keys = props.formConfig.keys;
|
||||
emit(FORM_CHANGE_EVENT_KEY, { key:keys[0], value: whitelist.value });
|
||||
}
|
||||
|
||||
const delAllList = () => {
|
||||
whitelist.value = []
|
||||
whiteTextarea.value = ''
|
||||
handleChange();
|
||||
}
|
||||
|
||||
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.white-list-wrap {
|
||||
.flex-column{
|
||||
flex-direction: column;
|
||||
}
|
||||
:deep(th){
|
||||
padding:4px 0;
|
||||
background: #F6F7F9;
|
||||
}
|
||||
:deep(td){
|
||||
padding:6px 0;
|
||||
}
|
||||
.table-wrap{
|
||||
margin-top: 16px;
|
||||
border: 1px solid #ebeef5;
|
||||
border-radius: 2px;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
.cursor{
|
||||
cursor: pointer;
|
||||
}
|
||||
.flex{
|
||||
display: flex;
|
||||
}
|
||||
}
|
||||
|
||||
</style>
|
||||
Loading…
Reference in New Issue
Block a user