ShutongInterconnectedChemicalCloudPlatform/src/views/sysworkflow/lowcodepage/appPage/createAppFormPage.vue

<!--
@ 作者: 秦东
@ 时间: 2024-05-07 11:26:40
@ 备注: 编辑表单
-->
<script lang="ts" setup>
import { useRoute, useRouter } from "vue-router";
import { formStruct } from "@/api/DesignForm/types";
import { customerFormConfig } from "@/api/DesignForm/type";
import { getProductionMarkForm } from "@/api/DesignForm/requestapi";

import PageForm from "@/views/sysworkflow/lowcodepage/appPage/appPageForm/pageForm.vue";
import PageFlow from "@/views/sysworkflow/lowcodepage/appPage/appPageForm/pageFlow.vue";
import PageList from "@/views/sysworkflow/lowcodepage/appPage/appPageForm/pageList.vue";
import PrintSetupPage from "@/views/sysworkflow/lowcodepage/appPage/appPageForm/printSetupPage.vue";
import AiPage from "@/views/sysworkflow/lowcodepage/appPage/appPageForm/aiPage.vue";
import DataBpard from "@/views/sysworkflow/lowcodepage/appPage/appPageForm/dataBoard.vue";

const props = defineProps({
  appCont: {
    type: Object,
    default() {
      return {};
    },
  },
  isShow: {
    type: Boolean,
    default: false,
  },
  isNew: {
    type: Boolean,
    default: false,
  },
  drawerWith: {
    type: Number,
    default: 0,
  },
  formKey: {
    type: String,
    default: "",
  },
  groupKey: {
    type: String,
    default: "",
  },
  menuId: {
    type: String,
    default: "",
  },
  appPageKey: {
    type: String,
    default: "",
  },
});
const emits = defineEmits([
  "update:isShow",
  "update:isNew",
  "update:appPageKey",
  "gainSunAppContent",
  "updateInit",
]);
const tabsActive = ref(1);
const route: any = useRoute().query || {};
const formConfigCont = reactive<customerFormConfig>({
  formName: "",
  formlogo: "",
  signCode: "",
});
const appPageKey = computed({
  get() {
    return props.appPageKey;
  },
  set(val: any) {
    emits("update:appPageKey", val);
  },
});
//表单版本ID
const formVersion = ref<string>("");
const formPageId = ref<string>("");
const state = reactive<formStruct>({
  formData: {
    list: [],
    form: {
      size: "default",
      name: "",
      formName: formConfigCont.formName,
      dataTitle: [],
      labelPosition: "left",
      dataSource: "no",
      dataSourceConfig: {
        id: "",
        dataBaseName: "",
        tableName: "",
        tableKey: "",
        dsn: {},
      },
    },
    config: {
      groupKey: props.formKey,
      classify: 4,
    },
    styles: {
      divStyle: {},
      labelStyle: {},
      inputStyle: {},
    },
    purview: [],
    aiConfig: [],
  },
  editor: {},
  loading: false,
  formDataPreview: {},
  previewVisible: false, // 预览窗口
  designType: route.type, // 当前页面设计类型，有效值search
  formDict: {},
  formOtherData: {
    source: route.source || "",
    formName: formConfigCont.formName,
  },
  echatsViews: [],
});
const appPageInfo = ref();
/**
@ 作者: 秦东
@ 时间: 2024-05-07 15:11:24
@ 功能: 关闭页面
*/
const closeSavePageForm = () => {
  emits("update:isShow", false);
  emits("gainSunAppContent");
  emits("updateInit");
  emits("update:isNew", false);
  // console.log("appPageInfo.value",appPageInfo.value)
  if (tabsActive.value == 1) {
    appPageInfo.value.gainTableForm();
  }
};

onBeforeMount(() => {
  // console.log("onBeforeMount",props.isNew)
  // console.log("onBeforeMount--->appPageKey",props.appPageKey)
  let send = {
    types: 3,
  };
  if (props.isNew) {
    props.appPageKey = "";
    state.formData.list = [];
    formVersion.value = "";
    appPageKey.value = "";
    getProductionMarkForm(send)
      .then(({ data }) => {
        formConfigCont.formlogo = data.formlogo;
        formConfigCont.formName = data.formname;
        formConfigCont.signCode = data.signCode;
        state.formData.form.name = data.formlogo;
        state.formData.form.formName = data.formname;
        state.formOtherData.formName = data.formname;
      })
      .finally(() => {});
  }
  // console.log("onBeforeMount",props.isNew)
  // console.log("onBeforeMount--2->appPageKey",props.appPageKey)
  if (props.appPageKey == "") {
    getProductionMarkForm(send)
      .then(({ data }) => {
        formConfigCont.formlogo = data.formlogo;
        formConfigCont.formName = data.formname;
        formConfigCont.signCode = data.signCode;
        state.formData.form.name = data.formlogo;
        state.formData.form.formName = data.formname;
        state.formOtherData.formName = data.formname;
      })
      .finally(() => {});
  }
  // console.log("state------------>",state)
});
</script>
<template>
  <el-drawer
    v-model="props.isShow"
    title="设置/编辑自定义表单"
    :with-header="false"
    :close-on-click-modal="false"
    :close-on-press-escape="false"
    :destroy-on-close="true"
    :size="props.drawerWith"
  >
    <div class="common-layout">
      <el-container>
        <el-header class="headerBox">
          <div class="headLeft">
            <el-space wrap>
              <el-avatar shape="square" :size="25" :src="props.appCont.appSvg" />
              <el-tooltip
                class="box-item"
                effect="dark"
                :content="props.appCont.appName"
                placement="bottom"
              >
                <el-text class="w-150px mb-2" truncated>{{
                  props.appCont.appName
                }}</el-text>
              </el-tooltip>
              <i class="fa fa-angle-right"></i>
              <el-tooltip
                class="box-item"
                effect="dark"
                :content="state.formData.form.formName"
                placement="bottom"
              >
                <el-text class="w-150px mb-2" truncated>{{
                  state.formData.form.formName
                }}</el-text>
              </el-tooltip>
            </el-space>
          </div>
          <div>
            <el-tabs
              v-model="tabsActive"
              @tab-click="handleClick"
              :stretch="true"
              class="tabsMain"
            >
              <el-tab-pane label="① 页面管理" :name="1"> </el-tab-pane>
              <el-tab-pane label="② 流程设计" :name="2"> </el-tab-pane>
              <el-tab-pane label="③ 列表设计" :name="3"> </el-tab-pane>
              <el-tab-pane label="④ 数据看板" :name="4"> </el-tab-pane>
              <el-tab-pane label="⑤ 打印设计" :name="5"> </el-tab-pane>
            </el-tabs>
          </div>
          <div class="headRight">
            <el-button type="danger" size="small" @click="closeSavePageForm"
              >关闭</el-button
            >
          </div>
        </el-header>
        <el-container>
          <PageForm
            ref="appPageInfo"
            v-if="tabsActive == 1"
            :form-Key="props.formKey"
            :app-cont="props.appCont"
            :menu-id="menuId"
            :group-key="props.groupKey"
            v-model:state="state"
            v-model:form-version="formVersion"
            :formconfigcont="formConfigCont"
            v-model:app-page-key="appPageKey"
          />
          <PageFlow
            v-if="tabsActive == 2"
            v-model:state="state"
            :form-Key="props.formKey"
            :app-cont="props.appCont"
            :menu-id="menuId"
            :group-key="props.groupKey"
            v-model:app-page-key="appPageKey"
            v-model:form-version="formVersion"
          />
          <PageList
            v-if="tabsActive == 3"
            v-model:state="state"
            :form-Key="props.formKey"
            :app-cont="props.appCont"
            :menu-id="menuId"
            :group-key="props.groupKey"
            v-model:app-page-key="appPageKey"
            v-model:form-version="formVersion"
          />
          <DataBpard
            v-if="tabsActive == 4"
            v-model:state="state"
            :form-Key="props.formKey"
            :app-cont="props.appCont"
            :menu-id="menuId"
            :group-key="props.groupKey"
            v-model:app-page-key="appPageKey"
            v-model:form-version="formVersion"
          />
          <PrintSetupPage
            v-if="tabsActive == 5"
            v-model:state="state"
            :form-Key="props.formKey"
            :app-cont="props.appCont"
            :menu-id="menuId"
            :group-key="props.groupKey"
            v-model:app-page-key="appPageKey"
            v-model:form-version="formVersion"
          />
        </el-container>
      </el-container>
    </div>
  </el-drawer>
</template>
<style lang="scss" scoped>
.headerBox {
  padding: 0px;
  border-bottom: 2px solid #ececec;
  display: flex;
  align-items: center;
  justify-content: space-between;
  .headLeft {
    width: 300px;
    padding-left: 5px;
    span {
      max-width: 100px;
    }
  }
  .headRight {
    width: 300px;
    text-align: right;
    padding-right: 5px;
  }
  .tabsMain {
    ::v-deep .el-tabs__header {
      margin: 0px;
    }
    ::v-deep .el-tabs__nav-scroll {
      margin: 0 auto !important;
    }

    ::v-deep .el-drawer__body {
      padding: 0;
    }
  }
}
</style>