admin-ui/src/views/flow/flowForm/list/component/detail.vue

<template>
  <!-- 流程表单详情抽屉 -->
  <div class="flow-flowForm-detail">
    <el-drawer v-model="isShowDialog" size="80%" direction="ltr">
      <template #header>
        <h4>{{ t('message.flowForm.detailTitle') }}</h4>
      </template>
      <div class="form-create-show">
        <FormCreate :option="detailData.option" :rule="detailData.rule" />
      </div>
    </el-drawer>
  </div>
</template>
<script lang="ts">
  // 引入 form-create
  import formCreate from '@form-create/element-ui'
  // 引入 form-create-edit
  import FcEditor from "@form-create/component-wangeditor";
  import { reactive, toRefs, defineComponent,ref,unref,getCurrentInstance,computed } from 'vue';
  import { useI18n } from 'vue-i18n'
  import {getFlowForm} from "/@/api/flow/flowForm";
  import {
    FlowFormInfoData,
    FlowFormEditState
  } from "/@/views/flow/flowForm/list/component/model"
  import {setConfAndFields2} from "/@/utils/formCreate";
  formCreate.component(FcEditor)
  //获取 formCreate 组件
  const FormCreate = formCreate.$form();
  export default defineComponent({
    name:"ApiV1FlowFlowFormDetail",
    components:{
      FormCreate
    },
    props:{
      statusOptions:{
        type:Array,
        default:()=>[]
      },
    },
    setup(props,{emit}) {
      const {proxy} = <any>getCurrentInstance()
      const { t } = useI18n()
      const formRef = ref<HTMLElement | null>(null);
      const menuRef = ref();
      const detailData = ref({
        rule: [],
        option: {}
      })
      const state = reactive<FlowFormEditState>({
        loading:false,
        isShowDialog: false,
        formData: {
          id: undefined,
          name: undefined,
          status: false ,
          remark: undefined,
          createdAt: undefined,
          updatedAt: undefined,
          deletedAt: undefined,
          createdBy: undefined,
          updatedBy: undefined,
          conf: undefined,
          fields: undefined,
        },
        // 表单校验
        rules: {
          name : [
              { required: true, message: t('message.flowForm.nameRequired'), trigger: "blur" }
          ],
          status : [
              { required: true, message: t('message.flowForm.statusRequired'), trigger: "blur" }
          ],
        }
      });
        // 打开弹窗
        const openDialog = (row?: FlowFormInfoData) => {
          resetForm();
          if(row) {
            getFlowForm(row.id!).then((res:any)=>{
              const data = res;
              data.createdBy = data.createdUser?.userNickname
              data.updatedBy = data.updatedUser?.userNickname
              state.formData = data;
              setConfAndFields2(detailData, data.conf, data.fields)
            })
          }
          state.isShowDialog = true;
        };
        // 关闭弹窗
        const closeDialog = () => {
          state.isShowDialog = false;
        };
        // 取消
        const onCancel = () => {
          closeDialog();
        };
        const resetForm = ()=>{
          state.formData = {
            id: undefined,
            name: undefined,
            status: false ,
            remark: undefined,
            createdAt: undefined,
            updatedAt: undefined,
            deletedAt: undefined,
            createdBy: undefined,
            updatedBy: undefined,
            conf: undefined,
            fields: undefined,
          }
        };
        return {
          proxy,
          t,
          openDialog,
          closeDialog,
          onCancel,
          menuRef,
          formRef,
          detailData,
          ...toRefs(state),
        };
      }
  })
</script>
<style scoped>
  .flow-flowForm-detail :deep(.el-form-item--large .el-form-item__label){
    font-weight: bolder;
  }
  .pic-block{
    margin-right: 8px;
  }
  .file-block{
    width: 100%;
    border: 1px solid var(--el-border-color);
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transition: var(--el-transition-duration-fast);
    margin-bottom: 5px;
    padding: 3px 6px;
  }
  .ml-2{margin-right: 5px;}
  .form-create-show{
    width: 100%;
    padding: 16px;
  }
</style>