ShutongInterconnectedChemicalCloudPlatform/src/widget/associatedforms/associatedFormsChildFillRole.vue

<!-- eslint-disable vue/no-v-html -->
<template>

  <div
    style="background-color: #E6F3FE;padding: 12px;border-radius: 10px;padding-left:45px;margin-bottom:20px;margin-right:11px;min-height: 65px;padding-top: 16px;">
    <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: 290px;margin-bottom: -1px" :data="childTableList"
      placeholder="请选择关联表单子表" check-strictly :render-after-expand="false" filterable
      @change="selectedChildTableChanged" />

    <el-button 
      v-if="selectedChildTable1 === '' || filterCondition1.conditionHtml === ''"
      style="padding-top: 8px; width: 290px;margin-left: 85px;height: 30px;" type="info" plain append-to-body="true"
      modal="true" @click="filterConditionDialogFlag = true">设置筛选条件（选填）</el-button>
    <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>
  </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-input 
              v-show="fieldTreeSearchFlag" v-model="fieldTreeFilterText" style="width:98%;margin: 3px;"
              placeholder="搜索字段" class="filter-tree" /> --> 
            <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-input 
              v-show="orgTreeSearchFlag" v-model="orgTreeFilterText" style="width:98%;margin: 3px;"
              placeholder="搜索字段" class="filter-tree" /> -->
            <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-input 
              v-show="roleTreeSearchFlag" v-model="roleTreeFilterText" style="width:98%;margin: 3px;"
              placeholder="搜索字段" class="filter-tree" />-->
            <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;">
              <AssociatedFormsTinyaceFillRoleFilterCondition 
                ref="tinymceRef" 
                :aft-text="filterCondition1.conditionHtml"
                :aft-text-copy="filterCondition1.conditionHtmlCopy" 
                @text-change="aftTextChangedRange" @gongshi-change="aftGongshiChangedRange"
                ></AssociatedFormsTinyaceFillRoleFilterCondition>
              
            </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 @click="asfhTextCancelRange">取消</el-button> -->
        <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 AssociatedFormsTinyaceFillRoleFilterCondition from '@/widget/associatedforms/associatedFormsTinyaceFillRoleFilterCondition.vue'

let emit = defineEmits(["delRole", "update:selectedChildTable",]);
const props = defineProps({
  
  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 {}
    }
  },
})

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

const filterConditionDialogFlag = ref(false)


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



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



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() {
  emit('update:selectedChildTable', selectedChildTable1)
}


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)
}
</script>

<style></style>