ShutongInterconnectedChemicalCloudPlatform/src/widget/associatedforms/associatedFormsChildFillRole.vue

<!-- eslint-disable vue/no-v-html -->
<template>
  <div
    style="background-color: #F0F0F0;padding: 12px;border-radius: 5px;padding-left:45px;margin-bottom:20px;margin-right:11px;min-height: 65px;padding-top: 16px;padding-bottom:16px;color: black;">
    <el-button 
      :icon="Close" size="small" circle type="info" plain
      style="float: right;margin-top: -22px;margin-right: -22px" @click="delRole" />
    <el-tree-select 
      v-model="selectedChildTable1"  style="width: 270px;margin-bottom: -1px" :data="childTableList" :disabled="isDisabled"
      placeholder="请选择关联表单子表" check-strictly :render-after-expand="false" filterable
      @change="selectedChildTableChanged" />
    <el-popover placement="top-end" title="" :width="200" trigger="hover" content="若【设置筛选条件】，则仅填充满足筛选条件的子表数据">
      <template #reference>
        <el-button 
          v-if="selectedChildTable1 !== '' && filterCondition1.conditionHtml === ''"
          style="padding-top: 8px; width: 270px;margin-left: 85px;height: 30px;" type="primary" plain
          append-to-body="true" modal="true" @click="filterConditionDialogFlag = true">设置筛选条件（选填）</el-button>
      </template>
    </el-popover>
    <div 
      v-if="selectedChildTable1 !== '' && filterCondition1.conditionHtml !== ''"
      style="padding-top: 5px; width: auto;margin-left: 85px;height: 30px;cursor: pointer;display: inline-block;margin-top: 3px;"
      @click="filterConditionDialogHandle" v-html="filterCondition1.conditionHtml"></div>
    <el-divider v-if="selectedChildTable1 !== ''" />
    <div 
      v-if="selectedChildTable1 !== ''"
      style="background-color: #F0F0F0;border-radius: 5px;padding-bottom: 1px;margin-right: 10px;"><!-- #F5F7FA     #E6F3FE  #F0F0F0  #F5F7FA-->
      <template v-for="(item, index) in childRoles1" :key="childRoles1[index].id">
        <div style="display: flex;margin-bottom: 10px;">
        <el-tree-select 
            v-model="childRoles1[index].leftValue" style="width: 270px;" :data="asfasfChildTableFields[0].children.filter((item :any)=>{return item.id==selectedChildTable})" placeholder="关联表单子表字段"
            check-strictly :render-after-expand="false" filterable />
          <span style="margin-left: 8px;margin-right: 8px;">的值填充到</span>
          <el-tree-select 
            v-model="childRoles1[index].rightValue" style="width: 270px;" :data="currentFormChildTableFieldsForFillRole[0].children"
            check-strictly :render-after-expand="false"  placeholder="当前表单子表字段" filterable @change="childRoleRightChanged" />
            <Delete v-if="childRoles1.length>1" style="width: 22px; height: 22px;cursor: pointer; color: #50A6FF; display: block;  float:right;margin-left: 35px;margin-top: 4px;" @click="delChildRole(item)" />

        </div>
        
      </template>
      
    </div>
    <el-link v-if="selectedChildTable1 !== ''" type="primary" style="margin-bottom: 10px;" @click="addChildRole" >十 添加规则</el-link>
  </div>


  <el-dialog 
    v-model="filterConditionDialogFlag" style="margin-top:70px ;min-height: 500px" width="50%"
    :show-close="false" title="筛选条件" append-to-body>
    <div class="common-layout">
      <el-container>
        <el-aside width="300px" style="height:420px;border: 1px solid gainsboro;margin-right: 5px;">
          <el-tree 
            ref="fieldTreeRef" node-key="id" empty-text="选择关联的表单后展示" :data="asfasfFieldTree"
            :props="treeDefaultProps" :filter-node-method="filterNode"
            style="max-width: 600px; border: 1px solid gainsboro; margin: 3px;"
            @node-contextmenu="handleFieldTreeContextmenuRange" />
          <el-tree 
            ref="fieldTreeRef" node-key="id" empty-text="请先保存当前表单" :data="associatedFormsCurrentFormFieldTree"
            :props="treeDefaultProps" :filter-node-method="filterNode"
            style="max-width: 600px; border: 1px solid gainsboro; margin: 3px;"
            @node-contextmenu="handleFieldTreeContextmenuRange" />
          <el-tree 
            ref="orgTreeRef" style="max-width: 600px; border: 1px solid gainsboro; margin: 3px;"
            :data="orgAndManTree" :props="treeDefaultProps" :filter-node-method="filterNode"
            @node-contextmenu="handleOrgTreeContextmenuRange" />
          <el-tree 
            ref="roleTreeRef" style="max-width: 600px; border: 1px solid gainsboro; margin: 3px;"
            :data="roleTree" :props="treeDefaultProps" :filter-node-method="filterNode"
            @node-contextmenu="handleRoleTreeContextmenuRange" />
        </el-aside>
        <el-main style="border: 1px solid gainsboro; padding: 3px;" class="associatedFormsHideDialogMain">
          <div
            style="border: 1px solid gainsboro; height: 7%; border-bottom: 0px; padding-top: 3px; padding-left: 5px; background-color: #E6F3FE;">
            仅可选择符合以下条件的数据</div>
          <div id="associatedFormsHideEditArea" style="border: 1px solid gainsboro; height: 38%; border-bottom: 0px;">
            <AsfTmFillRoleFilterCondi 
              ref="tinymceRef" :aft-text="filterCondition1.conditionHtml"
              :aft-text-copy="filterCondition1.conditionHtmlCopy" @text-change="aftTextChangedRange"
              @gongshi-change="aftGongshiChangedRange"></AsfTmFillRoleFilterCondi>
          </div>
          <div style="border: 1px solid gainsboro; height: 55%; padding-top: 20px;">
            <ul>
              <li>请从左侧面板<span style="color: red">右击</span>选择字段或选项</li>
              <li>支持的符号：<span style="color: red">'==', '>=', '>', '<=', '<' , '!=' </span>
              </li>
              <li>支持<span style="color: red">"包含,不包含,数据拥有者,数据所属部门"</span>关键字,用于组织机构条件,角色条件,==运算符和!=运算符</li>
              <li>参考举例：</li>
              <span style="margin-left: 14px;">年龄>10</span><br>
              <span style="margin-left: 14px;">企管部==数据所属部门</span><br>
              <span style="margin-left: 14px;">绩效考核执行人包含数据拥有者</span><br>
              <span style="margin-left: 14px;">生产部包含数据所属部门</span>
            </ul>
          </div>
        </el-main>
      </el-container>
    </div>

    <template #footer>
      <div class="dialog-footer">
        <el-button type="primary" @click="filterConditionDialogHandle">
          确定
        </el-button>
      </div>
    </template>
  </el-dialog>

</template>

<script setup lang="ts">
import { Close } from '@element-plus/icons-vue'
import AsfTmFillRoleFilterCondi from '@/widget/associatedforms/asfTmFillRoleFilterCondi.vue'
import { v4 as uuidv4 } from "uuid";
let emit = defineEmits(["delRole", "update:selectedChildTable","update:childTableList","selectedOrDelChildRole","childRoleRightChanged"]);
const props = defineProps({
  currentFormChildTableFieldsForFillRole: {
    type: Object,
    default() {
      return {}
    }
  },
  asfasfChildTableFields: {
    type: Object,
    default() {
      return {}
    }
  },
  orgAndManTree: {
    type: Object,
    default() {
      return {}
    }
  },
  roleTree: {
    type: Object,
    default() {
      return {}
    }
  },
  associatedFormsCurrentFormFieldTree: {
    type: Object,
    default() {
      return {}
    }
  },
  filterNode: {
    type: Object,
    default() {
      return {}
    }
  },
  treeDefaultProps: {
    type: Object,
    default() {
      return {}
    }
  },
  asfasfFieldTree: {
    type: Object,
    default() {
      return {}
    }
  },
  childTableList: {
    type: Object,
    default() {
      return {}
    }
  },
  selectedChildTable: {
    type: String,
    default() {
      return {}
    }
  },
  filterCondition: {
    type: Object,
    default() {
      return {}
    }
  },
  currentKey: {
    type: String,
    default() {
      return {}
    }
  },
  childRoles: {
    type: Object,
    default() {
      return {}
    }
  },
})

//拿到子组件AssociatedFormsTinyace的实例
const tinymceRef = ref();

const filterConditionDialogFlag = ref(false)


const selectedChildTable1 = ref()
selectedChildTable1.value = props.selectedChildTable


const childRoles1 = ref()
childRoles1.value = props.childRoles

const filterCondition1 = ref()
filterCondition1.value = props.filterCondition

const isDisabled = computed(() =>!!selectedChildTable1.value&&(childRoles1.value.length>1||childRoles1.value[0]?.leftValue!=""));



function filterConditionDialogHandle() {
  filterConditionDialogFlag.value = !filterConditionDialogFlag.value
}

function aftTextChangedRange(str: string) {
  filterCondition1.value.conditionHtml = str
}

function aftGongshiChangedRange(gongshi: any) {
  filterCondition1.value.gongShi.formulaHtml = gongshi.formulaHtml
  filterCondition1.value.gongShi.mathsFormula = gongshi.mathsFormula
  filterCondition1.value.gongShi.mathsString = gongshi.mathsString
}

function selectedChildTableChanged(event:any) {
    emit('update:selectedChildTable', selectedChildTable1)
    emit('selectedOrDelChildRole')
}

function childRoleRightChanged(){
  emit('childRoleRightChanged')
}

function delChildRole(item: any) {
  let id = item.id
  for (var i = 0; i < childRoles1.value.length; i++) {
    if(childRoles1.value[i].id===id){
      childRoles1.value.splice(i, 1);
      i--; // 如果不减，将漏掉一个元素
    }
  }
}
function addChildRole(){
  let onlyNumber = uuidv4().replaceAll('-','').toString();   //获取唯一编码
  childRoles1.value.push({
											leftValue: '',
											rightValue: '',
											id: onlyNumber,
										})
}
function delRole() {
  emit('delRole', props.currentKey)
}
function handleOrgTreeContextmenuRange(MouseEvent: any, object: any, Node: any, element: any) {
  tinymceRef.value.addIcon_org(object)
}
function handleRoleTreeContextmenuRange(MouseEvent: any, object: any, Node: any, element: any) {
  tinymceRef.value.addIcon(object)
}
function handleFieldTreeContextmenuRange(MouseEvent: any, object: any, Node: any, element: any) {
  tinymceRef.value.addIcon(object)
}
onMounted(() => {
  emit('selectedOrDelChildRole')
})
</script>

<style></style>