zfb_mp/src/views/notification/addModal.vue

<template>
  <BasicModal
    v-bind="$attrs"
    @cancel="resetFields"
    @register="register"
    :title="title"
    width="60%"
    min-width="600px"
    @ok="handleOk"
  >
    <div class="pt-3px pr-3px">
      <BasicForm @register="registerForm" :model="modelRef" />
    </div>
  </BasicModal>
</template>
<script lang="ts">
  // computed
  import { defineComponent, ref, h } from 'vue';

  import { addNoticeApi, editNoticeApi } from '/@/api/notification/list';
  import { BasicModal, useModalInner } from '/@/components/Modal';
  import { BasicForm, FormSchema, useForm } from '/@/components/Form/index';
  // import { ListAllCompanyApi } from '/@/api/corporation/list';
  import { useI18n } from '/@/hooks/web/useI18n';
  import { useMessage } from '/@/hooks/web/useMessage';
  // import { useUserStore } from '/@/store/modules/user';
  import { Tinymce } from '/@/components/Tinymce';
  import { formatToDateTime } from '/@/utils/dateUtil';
  const { t } = useI18n();
  export default defineComponent({
    components: { BasicModal, BasicForm },
    props: {
      userData: { type: Object },
    },
    emits: ['register', 'ok', 'cancel'],
    setup(_, { emit }) {
      const modelRef = ref({});
      // const userStore = useUserStore();
      // const { getCheckRole } = userStore;
      // const userinfo = computed(() => userStore.getUserInfo);
      // const { companyId } = userinfo.value;

      const schemas: FormSchema[] = [
        {
          field: 'id',
          component: 'Input',
          label: 'id',
          show: false,
        },

        {
          field: 'title',
          component: 'Input',
          label: '标题',
          required: true,
          colProps: {
            span: 22,
          },
        },

        {
          field: 'effectiveTime',
          component: 'RangePicker',
          componentProps: {
            format: 'YYYY-MM-DD HH:mm:ss',
          },
          label: '时间段',
          required: true,
          colProps: {
            span: 22,
          },
        },
        {
          field: 'type',
          component: 'RadioButtonGroup',
          label: '类型',
          required: true,
          colProps: {
            span: 22,
          },
          defaultValue: 0,
          componentProps: {
            options: [
              { label: '文字', value: 0 },
              { label: '图片', value: 1 },
            ],
          },
        },
        {
          field: 'content',
          label: '内容',
          component: 'Input',
          render: ({ model, field }) => {
            return h(Tinymce, {
              value: model[field],
              maxlength: 200,
              onChange: (value: string) => {
                model[field] = value;
              },
              showImageUpload: false,
            });
          },
        },
      ];
      const title = ref('新 增');
      const { createMessage } = useMessage();
      const [registerForm, { validate, resetFields }] = useForm({
        labelWidth: 120,
        schemas,
        showActionButtonGroup: false,
        actionColOptions: {
          span: 24,
        },
      });
      // closeModal
      const [register, { closeModal }] = useModalInner((data) => {
        data && onDataReceive(data);
      });
      function onDataReceive(data) {
        // 方式1;
        console.log('useModalInner', data);
        //   setFieldsValue({
        //     ...data,
        //     roleId: data.roleId != 2 ? data.roleId : '',
        //   });
        //   let setSchema = [
        //     {
        //       field: 'roleId',
        //       component: 'ApiSelect',
        //       componentProps: {
        //         disabled: data.roleId == 2 ? false : data.id ? true : false,
        //         api: getRoleListByParam,
        //         labelField: 'roleName',
        //         valueField: 'roleId',
        //         params: {
        //           type: data.roleId ? 1 : 0,
        //           roleId: data.roleId,
        //         },
        //       },
        //     },
        //     {
        //       field: 'phone',
        //       componentProps: {
        //         disabled: getCheckRole('plat_admin') ? false : data.id ? true : false,
        //       },
        //     },
        //     {
        //       field: 'companyId',
        //       componentProps: {
        //         disabled: data.id ? (data.roleId != 2 ? true : false) : false,
        //       },
        //     },
        //     {
        //       field: 'permList',
        //       componentProps: {
        //         disabled: data.roleId == 2 ? false : data.id ? true : false,
        //         params: {
        //           companyId: data.companyId || companyId,
        //         },
        //       },
        //     },
        //   ];
        //   title.value = data.id ? '编辑' : '新增';
        //   updateSchema(setSchema);
      }

      async function handleOk() {
        let data = await validate();
        console.log('data', data);

        const requestApi = data.id ? editNoticeApi : addNoticeApi;
        let res = await requestApi({
          title: data.title,
          content: data.content,
          type: String(data.type),
          effectiveTime: data.effectiveTime.map((i) => formatToDateTime(i)),
          id: data.id,
        });
        console.log('res', res);
        emit('ok', res);
        createMessage.success(t('common.optSuccess'));
        closeModal();
        resetFields();
      }

      return {
        register,
        title,
        schemas,
        registerForm,
        modelRef,
        handleOk,
        resetFields,
      };
    },
  });
</script>