mosr-web/src/views/workflow/process/config/FormAuthorityConfig.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, watch,computed} from "vue";

import {useProcessStore} from "@/stores/processStore.js";

const props = defineProps({
  nodeType: {
    type: String,
    default: null
  }
});
const processStore = useProcessStore();

const tableData = ref([]);
const isIndeterminate = ref(false);
const permSelect = ref("");
const checkStatus = reactive({
  readOnly: true,
  editable: false,
  hide: false
});




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 = [];
  //todo 项目字段测试
  let perms = [{
    id: "projectName",
    title: "项目名称",
    required: true,
    perm: "R"
  }, {
    id: "projectType",
    title: "项目类型",
    required: true,
    perm: "R"
  }, {
    id: "projectDesc",
    title: "项目描述",
    required: true,
    perm: "R"
  }, {
    id: "projectManager",
    title: "项目经理",
    required: true,
    perm: "R"
  }];
  // formPermsLoad(oldPermMap, processStore.getDesign().formItems);
  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 =>{
    console.log(perm)
    //刷新名称
    let old = oldPermMap.get(perm.id)
    if (old) {
      old.title = perm.title;
      old.required = perm.required;
      formPerms.value.push(old);
    } else {
      formPerms.value.push({
        id: perm.id, //todo ,id 就是字段名称
        title: perm.title,
        required: perm.required,
        perm: nowNode.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>