ShutongInterconnectedChemicalCloudPlatform/src/views/sysworkflow/lowcodepage/pageFlow/newTableFlow.vue

<!-- eslint-disable vue/no-side-effects-in-computed-properties -->
<!--
@ 作者: 秦东
@ 时间: 2026-01-19 13:21:15
@ 备注: 编辑状态下的添加
-->
<script lang='ts' setup>
import { conditionInfo, nodeFlow } from "@/api/DesignForm/type";
import { echoTableFormPage,realTimeUpdateFlow } from "@/api/taskapi/management";
import { judgeSubmitCancel,startRunFlow,gainAppPageInfo,getFieldRecord } from "@/api/DesignForm/requestapi";
import { string2json, stringToObj } from "@/utils/DesignForm/form";
import { appPageDataInit } from "@/api/date/type";
import {
  notAsA_BasisForJudgment,
  asAnApprovalActionControl,
  fixedValueControl,
  timeControl,
  timeEquation,
  submitButton,
  afreshSubmitButton,
} from "@/utils/workflow/const";
import { nodePoweInfo } from "@/api/taskapi/types";
import request from "@/utils/request";
import SvgIcon from "@/components/SvgIcon/index.vue";

const props = defineProps({
    show:{
        type: Boolean,
        default: true,
    },
    versionid: {
      type: String,
      default: "",
    },
    versiontitle: {
      type: String,
      default: "",
    },
    drawerwith: {
      type: Number,
      default: 0,
    },
    pickAppMenu: {
      type: Object,
      default() {
        return {};
      },
    },
})
const formBodyRef = ref()
const drawBodyWidth = ref(props.drawerwith)
const emits = defineEmits(["update:show", "searchquery"]);
const nodeKey = ref<string>("");
const currterNodePower = ref<nodePoweInfo[]>([])
const flowMap = ref<any[]>(); //工作流
const flowFactor = reactive<conditionInfo[]>([]); //表单组件
const pageType = ref<number>(1)
const aiConfigArea =ref(false)
const drawLoading = ref(false)
const isFlowTable = ref(false); //判断是不是流程表单
const openOrClose =  computed({
    get: () => {
      drawBodyWidth.value = props.drawerwith;
      return props.show
    },
    set: (val) => {
      emits("update:show", val);
      drawBodyWidth.value = 0;
    },
});

const pageBody = ref("")
const drawTitle = computed(() => props.versiontitle)
const drawbox = computed({
    get: () => {
      let pageContWidth = props.drawerwith
      let extraW=0; 
      if (aiConfigArea.value){
        extraW=300  //ai 问答区域的宽度
      }
      if (isFlowTable.value) {
        extraW = 300+extraW;
      }
      if (aiConfigArea.value && isFlowTable.value){
        pageType.value  = 3
        pageBody.value = "treePage"
        pageContWidth = pageContWidth - (extraW/2)
      }else if ((!aiConfigArea.value && isFlowTable.value) || (aiConfigArea.value && !isFlowTable.value)){
        pageType.value  = 2
        pageBody.value = "twoPage"
         pageContWidth = pageContWidth - (extraW/2)
      }else{
        pageType.value  = 1
        pageBody.value = ""
      }
      console.error("1---------------->",pageContWidth)
      return pageContWidth+extraW;
    },
    set: (val: number) => {
      return val;
    },
});
let qrCodeImgInside = "";
const appInitData = ref<appPageDataInit>();
const mastesformjson = ref(""); //
const versionId = ref<string>(""); //表单版本号
const versionTitle = ref<string>(""); //表单名称
const changeFlowPick = ref<string[]>([])
const purviewAry = ref<any[]>([]);
const qrCodeInsideDialogFlag = ref(false);

//获取工作流条件
const gainFlowChart = reactive<nodeFlow>({
  id: "0",
});

const state = reactive<any>({
  type: 1, // 1新增；2修改；3查看（表单模式） ；4查看； 5设计
  formData: {
    list: [],
    form: {},
    config: {},
    powerstr: {},
    aiConfig:[]
  },
  dict: {},
  formId: props.versionid,
  id: 0,
  loading: true,
});
//app表单
const stateForm = reactive<any>({
    type: 1, // 1新增；2修改；3查看（表单模式） ；4查看； 5设计
    formData: {
      list: [],
      form: {},
      config: {},
      powerstr: {},
      aiConfig:[]
    },
    dict: {},
    id: 0,
    formId: "1",
    versionId: 0,
    loading: true,
});
let gainAppPageInfoPromise: any[] = [];
let gainAppPageInfoData: any = {};
let getFieldRecordPromise: any[] = [];
let objMastesform: any;

/**
@ 作者: 秦东
@ 时间: 2026-01-19 15:30:44
@ 功能: 获取表单数据
*/
const getTaskFormData = () => {
  drawLoading.value = true
  echoTableFormPage({ id: props.versionid.toString() })
  .then(({ data }) => {
    console.log("表单数据",data)
      let extraW=0; 
      if (data.tableFormPage.flowIsOpen == 1 && data.tableFormPage.flowkeystr != "0") {
        isFlowTable.value = true;
        extraW = 300
        // drawbox.value = 800 + 350;
      } else {
        isFlowTable.value = false;
        // drawbox.value = 800;
      }
      if(data.tableFormPage.powerAry && Array.isArray(data.tableFormPage.powerAry) && data.tableFormPage.powerAry.length > 0){
        currterNodePower.value = data.tableFormPage.powerAry
      }
      changeFlowPick.value = data.channerUpdate
      nodeKey.value = data.flowPage.nodeKey?data.flowPage.nodeKey:"";
      purviewAry.value = data.tableFormPage.powerAry;
      gainFlowChart.id = data.tableFormPage.flowkeystr;
      console.log("表单数据--->1", data.flowPage.flowList);
      flowMap.value = data.flowPage.flowList;
      state.id = props.versionid;
      state.formData = stringToObj(data.tableFormPage.mastesform);
      state.formData.config.hideField = []; //暂时的修复方法:接口返回的config中没有hideField属性,手动添加
      state.dict = string2json(data.tableFormPage.dict);
      state.formData.powerstr = string2json(data.tableFormPage.powerstr);
      judgeSubmitCancel({ name: data.tableFormPage.mastesformjson }).then(
        (datajud: any) => {
          if (datajud.code == 0) {
            if (datajud.data == 3 || datajud.data == 4) {
              state.formData.list.push(submitButton);
            }
          }
        }
      );
      if(state.formData.aiConfig.length>0){
        aiConfigArea.value=true
        extraW = extraW + 300
      }

      if (aiConfigArea.value && isFlowTable.value){
        pageType.value  = 3
        pageBody.value = "treePage"
        drawBodyWidth.value = drawBodyWidth.value + extraW - (extraW/2)
      }else if ((!aiConfigArea.value && isFlowTable.value) || (aiConfigArea.value && !isFlowTable.value)){
        pageType.value  = 2
        pageBody.value = "twoPage"
         drawBodyWidth.value = drawBodyWidth.value + extraW- (extraW/2)
      }else{
        pageType.value  = 1
        pageBody.value = ""
        drawBodyWidth.value = drawBodyWidth.value
      }

      drawLoading.value = false
      
       console.error("2---------------->",formBodyRef.value?.clientWidth)
  })
  .finally(()=>{})
}
/**
@ 作者: 秦东
@ 时间: 2026-01-19 15:38:53
@ 功能: 初始化数据
*/
const initData = () => {
  state.formData = {
    list: [],
    form: {},
    config: {},
  };
  state.dict = {};
  state.formId = 0;
  state.id = 0;
  state.loading = true;
  let aryLen = flowFactor.length;
  console.log("改变表单值--flowMap.value--1->", flowMap.value);
  flowMap.value = [];
  console.log("改变表单值--flowMap.value--->", flowMap.value);
  if (aryLen > 0) flowFactor.splice(0, aryLen);
}
/**
@ 作者: 秦东
@ 时间: 2026-01-19 15:38:13
@ 功能: 初始化表单
*/
const initLoadData = () => {
   console.log("获取初始化表单数据-------------->", props.pickAppMenu);
   if (props.pickAppMenu.type != 1) {
      gainAppPageInfoPromise.push(
        gainAppPageInfo({ id: props.pickAppMenu.id }).then((data:any) => {
            gainAppPageInfoData = data;
        })
      )

      Promise.all(gainAppPageInfoPromise).then(() => {
          objMastesform = stringToObj(gainAppPageInfoData.data.appForm.mastesform);
          for (const element of objMastesform.list) {
            if (element.type == "table") {
              //console.log(element);
              for (const item of element.list) {
                if (item.options) {
                  if (
                    item.type == "radio" ||
                    item.type == "select" ||
                    item.type == "checkbox"
                  ) {
                    console.log(item.config.optionsType);
                    if (item.config.optionsType == 3) {
                      let paramx: string = "" + item.control.optionsValue3Field;
                      getFieldRecordPromise.push(
                        getFieldRecord(paramx).then(({ data }) => {
                          //console.log(data)
                          item.options = data;
                        })
                      );
                    }
                  }
                }
              }
            }
          }
          Promise.all(getFieldRecordPromise).then(() => {
            console.log(gainAppPageInfoData);
            let objMastesformStr = JSON.stringify(objMastesform);
            gainAppPageInfoData.data.appForm.mastesform = objMastesform;
            gainAppPageInfoData.data.appForm.mastesformjson = objMastesformStr;

            appInitData.value = gainAppPageInfoData.data;
            // console.log("获取初始化表单数据---!",appInitData.value)
            mastesformjson.value = gainAppPageInfoData.data.appForm.mastesformjson;
            // isFlow.value = gainAppPageInfoData.data.appForm.flowIsOpen;

            versionId.value = gainAppPageInfoData.data.appForm.id.toString();
            versionTitle.value = gainAppPageInfoData.data.appForm.name;

            if (gainAppPageInfoData.data.page) {
              // console.log("data.data.mastesform", data.data)
              stateForm.id = gainAppPageInfoData.data.appForm.version.toString();
              stateForm.formId = gainAppPageInfoData.data.appForm.cfid.toString();
              stateForm.versionId = gainAppPageInfoData.data.appForm.id.toString();
              stateForm.formData = objMastesform;
              stateForm.formData.config.hideField = []; //暂时的修复方法:接口返回的config中没有hideField属性,手动添加
              stateForm.dict = string2json(gainAppPageInfoData.data.appForm.dict);
              stateForm.formData.powerstr = string2json(
                gainAppPageInfoData.data.appForm.powerstr
              );
              // console.log("data.data.mastesform", stateForm.formData)

              judgeSubmitCancel({
                name: gainAppPageInfoData.data.appForm.mastesformjson,
              }).then((datajud: any) => {
                if (datajud.code == 0) {
                  if (datajud.data == 3 || datajud.data == 4) {
                    stateForm.formData.list.push(submitButton);
                  }
                }
              });
            }
          });

      })

   }
   

}
/**
@ 作者: 秦东
@ 时间: 2026-01-19 15:34:26
@ 功能: 监听开关
*/
watch(() => openOrClose,(val) => {
  if(val){
    getTaskFormData()
    initLoadData()
  }else{
    initData()
  }
},{
  deep:true
})
/**
@ 作者: 秦东
@ 时间: 2026-01-19 16:16:16
@ 功能: 扫码填单
*/
const showFillFormQrCode = () => {
  //查看二维码展示弹窗图片,图片带有分组,app,表单名称,和二维码图片
  //在此获取必要的参数并请求后台,获取二维码图片,当图片返回成功时,显示弹窗
  //必要的参数为cfid
  if (
    state.formData.form.qrCodeFlag == true &&
    state.formData.form.qrCodeInside == true
  ) {
    getQrCodeImgInside().then(({ data }) => {
      qrCodeImgInside = data;
      if (qrCodeInsideDialogFlag.value == false) {
        //console.log(qrCodeImgInside)
        qrCodeInsideDialogFlag.value = true;
      }
    });
  } else {
    alert("请先开启表单二维码功能");
  }
}
const  getQrCodeImgInside = () => {
  return request({
    url: "/javasys/lowCode/QrCode/getQrCodeImgInside",
    method: "post",
    data: {
      cfid: state.formId,
    },
  });
}

/**
@ 作者: 秦东
@ 时间: 2024-04-09 16:50:01
@ 功能: 关闭操作
*/
const closeAppSubmit = () => {
  flowMap.value = [];
  emits("searchquery");
  emits("update:show", false);
};
/**
@ 作者: 秦东
@ 时间: 2026-01-19 16:36:28
@ 功能: 判断怎么分屏
*/
// const pageBody = ():string => {
//   let pageClass = ""
//   switch(pageType.value){
//     case 2:
//       pageClass = "twoPage";
//       break;
//     case 3:
//       pageClass = "treePage";
//       break;
//     default:
//       pageClass = ""
//       break;
//   }
//   console.log("判断怎么分屏------------->",pageClass)
//   console.log("判断怎么分屏------1------->",pageType.value)
//   console.log("判断怎么分屏------2------->",pageType.value)
//   return pageClass;
// }

provide('flowNodePower', currterNodePower)
provide('currentNodeKey', nodeKey)
</script>
<template>
  <div class="drawerClass">
  <el-drawer
    v-model="openOrClose"
    :title="drawTitle"
    :close-on-click-modal="false"
    :close-on-press-escape="false"
    :destroy-on-close="true"
    :size="drawBodyWidth"
    
  >
      <template #header>
        <div class="drawHeader">
          <el-text size="large">{{ drawTitle }}</el-text>
          <el-button v-if="stateForm.formData.form.qrCodeFlag == true &&  stateForm.formData.form.qrCodeInside == true" size="small"  @click="showFillFormQrCode">扫码填单</el-button>
        </div>
      </template>
      <div v-loading="drawLoading" :class="aiConfigArea&&isFlowTable?'drawBody treePage':((!aiConfigArea&&isFlowTable)||(aiConfigArea&&!isFlowTable))?'drawBody twoPage':'drawBody'">
          <el-card v-if="aiConfigArea" shadow="always">
            <template #header>
              <div class="card-header">
                <div class="svgBox"><SvgIcon icon-class="aiRoboot" size="25" /></div>
                AI智能问答助手
              </div>
            </template>
            <el-scrollbar class="scroBox ">

              <div class="ai-conversation">
                <div class="message ai-message">
                    <strong>AI助手：</strong>您好！我是您的智能助手。我可以帮您解答关于表单填写和流程审批的问题。请问有什么可以帮您的？
                </div>
                
                <div class="message user-message">
                    <strong>用户：</strong>如何填写项目申请表中的预算部分？
                </div>
              </div>

        
            </el-scrollbar>
            <template #footer>
              <div class="bootemAi">
                <el-input  placeholder="请输入您的问题..." />
                
                <el-button class="ai-send-btn"><SvgIcon icon-class="fbsk" size="" /></el-button>
              </div>
            </template>
          </el-card>
          <el-card shadow="always">
            <template #header>
              <div class="card-header">
                <div class="svgBox"><SvgIcon icon-class="edit" size="25" /></div>
                项目申请表
              </div>
            </template>
            <el-scrollbar  class="formBody">
              <p v-for="o in 400" :key="o" class="text item">{{ 'List item ' + o }}</p>
            </el-scrollbar>
          </el-card>
          <el-card  v-if="isFlowTable"  shadow="always">
            <template #header>
              <div class="card-header">
                <div class="svgBox"><SvgIcon icon-class="liuChengBiaoDan" size="25" /></div>
                审批流程
              </div>
            </template>
            <el-scrollbar  class="flowBody">
              <p v-for="o in 400" :key="o" class="text item">{{ 'List item ' + o }}</p>
            </el-scrollbar>
            <template #footer>
              <div class="bootemWorkFlow">
                <el-input type="textarea" :rows="2" style="width: 100%" placeholder="请输入审批意见"></el-input>
                <div class="bootemWorkFlowBut">
                  <el-button class="btn approve-btn"><SvgIcon icon-class="kxdg" size="" style="margin-right: 5px" />通过审批</el-button>
                  <el-button class="btn reject-btn"><SvgIcon icon-class="cwkx" size="" style="margin-right: 5px"  />驳回申请</el-button>
                </div>
              </div>
            </template>
          </el-card>
      </div>
  </el-drawer>
  </div>
</template>
<style  lang='scss' scoped>
.drawerClass{
  :deep .el-drawer__header{
    border-bottom: 1px solid #ECECEC;
  }
}
.drawHeader {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.drawBody{
  width: 100%;
  height: 100%;
  padding: 10px 10px;
  :deep .el-card{
    border-radius: 15px;
  }
  :deep .el-card__header{
    padding: 15px 15px;
  }
  :deep .el-card__body{
    padding: 0;
  }
  :deep .el-card__footer{
    padding: 10px 10px;
  }
}
.twoPage{
  display: grid;
  grid-template-columns:  1fr minmax(150px, 250px); /* 左右最小150px，最大250px，中间自适应 */
  grid-template-rows: auto;
  gap: 10px;
  max-width: 100%;
  margin: 0 auto;
}
.treePage{
  display: grid;
  grid-template-columns: minmax(150px, 250px) 1fr minmax(150px, 250px); /* 左右最小150px，最大250px，中间自适应 */
  grid-template-rows: auto;
  gap: 10px;
  max-width: 100%;
  margin: 0 auto;
}
.svgBox{
  background: linear-gradient(135deg, #0020C2, #4d6cff);
  color: white;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
}
.card-header{
  font-size: 1.4rem;
  font-weight: 700;
  color: #0020C2;
  display: flex;
  align-items: center;
  gap: 10px;
}
.scroBox{
  padding: 10px 15px;
  height: calc(100vh - 200px);
}
.formBody{
  padding: 10px 15px;
  height: calc(100vh - 145px);
}
.flowBody{
  padding: 10px 15px;
  height: calc(100vh - 260px);
}

.bootemWorkFlow{
  width: 100%;
  text-align: center;
  .bootemWorkFlowBut{
    width: 100%;
    padding: 10px 0;
    text-align: center;
  }
}

.btn {
  padding: 14px 16px;
  border-radius: 10px;
  font-weight: 600;
  font-size: 1rem;
  cursor: pointer;
  transition: all 0.3s;
  border: none;
}
.btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 5px 15px rgba(0, 32, 194, 0.15);
}
.approve-btn {
  background: linear-gradient(135deg, #00cc66, #33dd88);
  color: white;
}
.reject-btn {
  background: linear-gradient(135deg, #ff3366, #ff5588);
  color: white;
}

.bootemAi{
  display: grid;
  grid-template-columns:  1fr 50px; /* 左右最小150px，最大250px，中间自适应 */
  grid-template-rows: auto;
  gap: 10px;
  max-width: 100%;
  margin: 0 auto;
  :deep .el-input__wrapper{
    border-radius: 10px;
  }
}

.ai-send-btn {
    background: linear-gradient(135deg, #0020C2, #4d6cff);
    color: white;
    border: none;
    width: 46px;
    border-radius: 10px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s;
}
        
.ai-send-btn:hover {
  background: linear-gradient(135deg, #0019a0, #3a5aff);
  transform: translateY(-2px);
}
.ai-conversation {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 15px;
  margin-bottom: 20px;
}
.message {
  padding: 12px 16px;
  border-radius: 12px;
  max-width: 90%;
  line-height: 1.5;
}
        
.user-message {
  background: #eef2ff;
  align-self: flex-end;
  border-top-right-radius: 4px;
  border: 1px solid rgba(0, 32, 194, 0.2);
}
        
.ai-message {
  background: linear-gradient(to right, #f0f5ff, #ffffff);
  align-self: flex-start;
  border-top-left-radius: 4px;
  border: 1px solid rgba(0, 32, 194, 0.1);
}
</style>