CaiYuanYiTiHua/src/views/demo/system/specialcolumn/Modal/index.vue

<template>
  <BasicModal
    v-bind="$attrs"
    :title="modaltitle"
    @register="registerModal"
    @ok="modalSubmit"
    @cancel="closeModal"
  >
    <a-form
      ref="formRef"
      :model="modalData"
      :rules="rules"
      labelAlign="right"
      :label-col="{ span: 7 }"
    >
      <a-form-item label="id" name="id" v-if="false">
        <a-input v-model:value="modalData.id" />
      </a-form-item>
      <a-form-item label="专栏名称" name="title">
        <a-input v-model:value="modalData.title" />
      </a-form-item>
      <a-form-item label="LOGO名称" name="logoTitle">
        <a-input v-model:value="modalData.logoTitle" />
      </a-form-item>
      <a-form-item label="状态" name="isShow">
        <a-select v-model:value="modalData.isShow">
          <a-select-option :value="true">启用</a-select-option>
          <a-select-option :value="false">停用</a-select-option>
        </a-select>
      </a-form-item>
        <a-form-item label="是否开放" name="isDevelop">
          <a-switch
            v-model:checked="modalData.isDevelop"
            checked-children="开放"
            un-checked-children="不开放"
          />
      </a-form-item>
      <a-form-item label="流程分类" name="category">
        <a-select
          v-model:value="modalData.category"
          :options="categoryOptions"
          :field-names="{ label: 'itemName', value: 'itemValue' }"
        />
      </a-form-item>
      <a-form-item label="是否是外部链接" name="isExternal">
        <a-switch
          v-model:checked="modalData.isExternal"
          checked-children="是"
          un-checked-children="否"
        />
      </a-form-item>
      <a-form-item label="外部链接" name="linkOrApi" v-if="modalData.isExternal" :required="modalData.isDevelop">
        <a-input v-model:value="modalData.linkOrApi" />
      </a-form-item>
      <a-form-item label="跳转首页" name="linkOrApi" v-if="!modalData.isExternal" :required="modalData.isDevelop">
        <a-input v-model:value="modalData.linkOrApi" />
      </a-form-item>
      <a-form-item label="排序号" name="sort">
        <a-input-number v-model:value="modalData.sort" :min="1" />
      </a-form-item>
      <a-form-item label="图片" name="imgUrl">
        <a-input-number v-model:value="modalData.imgUrl" v-if="false" />
        <a-upload
          v-model:file-list="fileList"
          list-type="picture-card"
          class="upload-list-inline"
          :customRequest="handleCustomRequest"
        >
          <img v-if="imageUrl" :src="imageUrl" width="100" height="100" />
          <div v-else>
            <PlusOutlined />
            <div class="ant-upload-text">上传</div>
          </div>
        </a-upload>
      </a-form-item>
    </a-form>
  </BasicModal>
</template>

<script setup lang="ts">
  import { defineProps, defineEmits, ref, watch } from 'vue';
  import { useGlobSetting } from '@/hooks/setting';
  import { PlusOutlined } from '@ant-design/icons-vue';
  import { uploadFile } from '@/api/formrender/index';
  import { BasicModal, useModalInner } from '@/components/Modal';
  import { getLoad } from '@/api/sys/sysDataItemDetail';
  import { getAppEnvConfig } from '@/utils/env';
  const { VITE_GLOB_API_URL } = getAppEnvConfig();
  const VITE_GLOB_API_URL_VAR = ref<String>(VITE_GLOB_API_URL + '/');

  const emit = defineEmits(['submit']);
  const { uploadUrl } = useGlobSetting();

  const formRef = ref();
  const categoryOptions = ref([]);
  const rules = {
    title: [{ required: true, message: '专栏名称不能为空', trigger: 'blur' }],
    // linkOrApi: [{ required: true, message: '链接不能为空', trigger: 'blur' }],
    imgUrl: [{ required: true, message: '上传图片不能为空', trigger: 'blur' }],
    sort: [{ required: true, message: '排序号不能为空', trigger: 'blur' }],
  };

  // 弹窗数据
  const modaltitle = ref('');
  const modalData = ref({
    id: '' as string,
    title: '' as string,
    logoTitle: '' as string,
    isShow: true as boolean,
    isDevelop: false as boolean,
    isExternal: false as boolean,
    linkOrApi: '' as string,
    sort: 0 as number,
    imgUrl: '' as string,
  }) as any;

  // 上传
  const fileList = ref([]);
  const imageUrl = ref<string>('');

  // 弹窗
  const [registerModal, { closeModal }] = useModalInner((data: any) => {
    modaltitle.value = data.title;
    modalData.value = data.data;
    if (modalData.value.imgUrl) {
      imageUrl.value = VITE_GLOB_API_URL_VAR.value + data.data.imgUrl;
    } else {
      imageUrl.value = '';
    }
    // 流程分类
    getCategory();
  });

  // 流程分类
  async function getCategory() {
    categoryOptions.value = await getLoad({ code: 'FlowSort' });
  }

  // 上传文件接口
  const handleCustomRequest = (file) => {
    fileList.value = [];
    const formData = new FormData();
    formData.append('files', file.file);
    uploadFile(formData)
      .then((res: any) => {
        modalData.value.imgUrl = res[0].filePath;
        imageUrl.value = VITE_GLOB_API_URL_VAR.value + res[0].filePath;
      })
      .catch((err) => {
        file.onError(err);
      });
  };
  // 提交
  const modalSubmit = () => {
    formRef.value
      .validate()
      .then(() => {
        emit('submit', modalData.value);
      })
      .catch((error) => {
        console.log('error', error);
      });
  };
</script>