yunzhupaas-web-vue3/src/views/bsc/billingitem/Detail.vue

<template>
    <BasicDrawer v-bind="$attrs" @register="registerDrawer" :title="title" width="600px" showFooter
                 :showOkBtn="false">
        <template #insertFooter>
        </template>
        <a-row class="p-10px dynamic-form ">
            <!-- 表单 -->
                <a-form :colon="false" size="middle" layout= "horizontal" 
            labelAlign= "right" 
 :labelCol="{ style: { width: '100px' } }"             :model="dataForm"  ref="formRef" >
            <a-row :gutter="15">
                <!-- 具体表单 -->
        <a-col :span="24" class="ant-col-item"  >
        <a-form-item    
  name="billing_item_code" >
<template #label>计费项目编码 
</template>     <YunzhupaasInput    v-model:value="dataForm.billing_item_code"
 placeholder="请输入"   disabled
 detailed  allowClear  :style='{"width":"100%"}' :maskConfig = "maskConfig.billing_item_code"    >
    </YunzhupaasInput>
        </a-form-item>
    </a-col>
        <a-col :span="24" class="ant-col-item"  >
        <a-form-item    
  name="billing_item_name" >
<template #label>计费项目名称 
</template>     <YunzhupaasInput    v-model:value="dataForm.billing_item_name"
 placeholder="请输入"   disabled
 detailed  allowClear  :style='{"width":"100%"}' :maskConfig = "maskConfig.billing_item_name"    >
    </YunzhupaasInput>
        </a-form-item>
    </a-col>
        <a-col :span="24" class="ant-col-item"  >
        <a-form-item    
  name="billing_item_type" >
<template #label>费用类别 
</template>             <p>{{dataForm.billing_item_type}}</p>
        </a-form-item>
    </a-col>
        <a-col :span="24" class="ant-col-item"  >
        <a-form-item    
  name="remark" >
<template #label>备注 
</template>             <p>{{dataForm.remark}}</p>
        </a-form-item>
    </a-col>
                <!-- 表单结束 -->
            </a-row>
            </a-form>
        </a-row>
    </BasicDrawer>
    <!-- 有关联表单详情：开始 -->
    <RelationDetail ref="relationDetailRef" />
    <!-- 有关联表单详情：结束 -->
</template>
<script lang="ts" setup>
    import { getDetailInfo } from './helper/api';
    import { getConfigData } from '@/api/onlineDev/visualDev';
    import { reactive, toRefs, nextTick, ref, computed, unref ,toRaw} from 'vue';
    import { BasicModal, useModal } from '@/components/Modal';
    import { BasicDrawer, useDrawer } from '@/components/Drawer';
    // 有关联表单详情
    import RelationDetail from '@/views/common/dynamicModel/list/detail/index.vue';
    // 表单权限
    import { usePermission } from '@/hooks/web/usePermission';
    import { useMessage } from '@/hooks/web/useMessage';
    import { CaretRightOutlined } from '@ant-design/icons-vue';
    import { buildUUID } from '@/utils/uuid';
    import { useI18n } from '@/hooks/web/useI18n';
    import { getDataChange } from '@/api/onlineDev/visualDev';
    import { getDataInterfaceDataInfoByIds } from '@/api/systemData/dataInterface';
    import ExtraRelationInfo from '@/components/yunzhupaas/RelationForm/src/ExtraRelationInfo.vue';

    interface State {
        dataForm: any;
        title: string;
        maskConfig: any;
        interfaceRes: any;
        locationScope: any;
        extraOptions: any;
        extraData: any;

    }

    defineOptions({ name: 'Detail' });
    const { createMessage, createConfirm } = useMessage();
    const [registerDrawer, { openDrawer, setDrawerProps, closeDrawer }] = useDrawer();
    
    const { t } = useI18n();
    const relationDetailRef = ref<any>(null);
    const state = reactive<State>({
        dataForm:{},
        title: t('common.detailText','详情'),
        maskConfig:{
        billing_item_code: {"prefixType":1,"useUnrealMask":false,"maskType":1,"unrealMaskLength":1,"prefixLimit":0,"suffixLimit":0,"filler":"*","prefixSpecifyChar":"","suffixType":1,"ignoreChar":"","suffixSpecifyChar":""} ,
        billing_item_name: {"prefixType":1,"useUnrealMask":false,"maskType":1,"unrealMaskLength":1,"prefixLimit":0,"suffixLimit":0,"filler":"*","prefixSpecifyChar":"","suffixType":1,"ignoreChar":"","suffixSpecifyChar":""} ,
}
,
        interfaceRes: {"billing_item_name":[],"billing_item_type":[],"billing_item_code":[],"remark":[]},
        locationScope:{
}
,
        extraOptions: {
}
,
        extraData: {
}
,
    });
    const { title, dataForm, maskConfig } = toRefs(state);
    // 表单权限
    const { hasFormP } = usePermission();

    defineExpose({ init });

    function init(data) {
        state.dataForm.id = data.id;
            openDrawer();
        nextTick(() => {
            setTimeout(initData, 0);
        });
    }
    function initData() {
        changeLoading(true);
        if (state.dataForm.id) {
            getData(state.dataForm.id);
        } else {
            closeDrawer();
        }
    }
    function getData(id) {
        getDetailInfo(id).then((res) => {
            state.dataForm = res.data || {};
            nextTick(() => {
                changeLoading(false);
            });
        });
    }

    function toDetail(modelId, id, propsValue) {
        if (!id) return;
        getConfigData(modelId).then((res) => {
            if (!res.data || !res.data.formData) return;
            const formConf = JSON.parse(res.data.formData);
            formConf.popupType = 'general';
            formConf.hasPrintBtn = false;
            formConf.customBtns = [];
            const data = { id, formConf, modelId, propsValue};
            relationDetailRef.value?.init(data);
        });
    }
    function setFormProps(data) {
        setDrawerProps(data);
    }
    function changeLoading(loading) {
        setFormProps({ loading });
    }
    
    function getParamList(key) {
      let templateJson: any[] = state.interfaceRes[key];
      if (!templateJson || !templateJson.length || !state.dataForm) return templateJson;
      for (let i = 0; i < templateJson.length; i++) {
        if (templateJson[i].relationField && templateJson[i].sourceType == 1) {
          templateJson[i].defaultValue = state.dataForm[templateJson[i].relationField + '_id'] || '';
        }
      }
      return templateJson;
    }
</script>