136 lines
3.9 KiB
Vue
136 lines
3.9 KiB
Vue
<template>
|
|
<el-table :header-cell-style="{background:'#f5f6f6'}" :data="formPerms" border style="width: 100%" v-tabh>
|
|
<el-table-column prop="title" show-overflow-tooltip label="表单字段">
|
|
<template #default="scope">
|
|
<span v-if="scope.row.required" style="color: #c75450"> * </span>
|
|
<span>{{ scope.row.title }}</span>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column v-if="nodeType !== 'ROOT'" prop="readOnly" label="只读" width="80">
|
|
<template slot="header" #header="scope">
|
|
<el-radio label="R" v-model="permSelect" @change="allSelect('R')">只读</el-radio>
|
|
</template>
|
|
<template #default="scope">
|
|
<el-radio v-model="scope.row.perm" label="R" :name="scope.row.id"></el-radio>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column prop="editable" label="可编辑" width="90" v-if="nowNode.type !== 'CC'">
|
|
<template slot="header" #header="scope">
|
|
<el-radio label="E" v-model="permSelect" @change="allSelect('E')">可编辑</el-radio>
|
|
</template>
|
|
<template #default="scope">
|
|
<el-radio v-model="scope.row.perm" label="E" :name="scope.row.id"></el-radio>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column prop="hide" label="隐藏" width="80">
|
|
<template slot="header" #header="scope">
|
|
<el-radio label="H" v-model="permSelect" @change="allSelect('H')">隐藏</el-radio>
|
|
</template>
|
|
<template #default="scope">
|
|
<el-radio v-model="scope.row.perm" label="H" :name="scope.row.id"></el-radio>
|
|
</template>
|
|
</el-table-column>
|
|
</el-table>
|
|
</template>
|
|
|
|
<script setup>
|
|
import {defineProps, computed} from "vue";
|
|
import {useProcessStore} from "@/stores/processStore.js";
|
|
|
|
const props = defineProps({
|
|
nodeType: {
|
|
type: String,
|
|
default: null
|
|
}
|
|
});
|
|
const processStore = useProcessStore();
|
|
const permSelect = ref("");
|
|
|
|
const init = () => {
|
|
let oldPermMap = new Map()
|
|
if (Array.isArray(formPerms.value) && formPerms.value.length){
|
|
for (let item of formPerms.value) {
|
|
oldPermMap.set(item.id,item)
|
|
}
|
|
}
|
|
processStore.getSelectedNode().props.formPerms = [];
|
|
formPermsLoadMosr(oldPermMap, processFromPerms.value);
|
|
};
|
|
|
|
const formPerms = computed(() => {
|
|
return processStore.getSelectedNode().props.formPerms;
|
|
});
|
|
|
|
const nowNode = computed(() => {
|
|
return processStore.getSelectedNode();
|
|
});
|
|
|
|
const formItems = computed(() => {
|
|
return processStore.getDesign().formItems;
|
|
});
|
|
|
|
const processFromPerms = computed(() => {
|
|
return processStore.getDesign().processFromPerms;
|
|
});
|
|
|
|
|
|
|
|
|
|
|
|
const allSelect = (type) => {
|
|
permSelect.value = type;
|
|
formPerms.value.forEach(f => f.perm = type);
|
|
};
|
|
const formPermsLoadMosr = (oldPermMap, perms) => {
|
|
|
|
perms.forEach(perm =>{
|
|
//刷新名称
|
|
let old = oldPermMap.get(perm.id)
|
|
if (old) {
|
|
old.title = perm.title;
|
|
old.required = perm.required;
|
|
formPerms.value.push(old);
|
|
} else {
|
|
console.log(perm)
|
|
if (perm.id === 'fileList'){
|
|
formPerms.value.push({
|
|
id: perm.id, //todo ,id 就是字段名称
|
|
title: perm.title,
|
|
required: perm.required,
|
|
perm: nowNode.value.type === "ROOT" ? "E" : "R"
|
|
});
|
|
}
|
|
}
|
|
})
|
|
}
|
|
|
|
//todo 初始化表单权限的位置,表单字段信息放在config配置中心
|
|
const formPermsLoad = (oldPermMap, forms) => {
|
|
forms.forEach(form => {
|
|
if (form.name === "SpanLayout") {
|
|
formPermsLoad(oldPermMap, form.props.items);
|
|
} else {
|
|
//刷新名称
|
|
let old = oldPermMap.get(form.id)
|
|
if (old) {
|
|
old.title = form.title;
|
|
old.required = form.props.required;
|
|
formPerms.value.push(old);
|
|
} else {
|
|
formPerms.value.push({
|
|
id: form.id, //todo ,id 就是字段名称
|
|
title: form.title,
|
|
required: form.props.required,
|
|
perm: nowNode.type === "ROOT" ? "E" : "R"
|
|
});
|
|
}
|
|
}
|
|
});
|
|
};
|
|
init();
|
|
</script>
|
|
|
|
<style scoped>
|
|
|
|
</style>
|