4dkk_mp/src/views/operate/components/config/messgeModal.vue

<template>
  <BasicModal
    v-bind="$attrs"
    @register="register"
    :title="fileFlow.title"
    @visible-change="handleVisibleChange"
    okText="完成处理"
    :showOkBtn="showOkBtn"
    @cancel="resetFields"
    @ok="handleSubmit"
  >
    <div class="pt-2px pr-3px">
      <BasicForm @register="registerForm" :model="model">
        <template #text="{ model, field }">
          {{ model[field] }}
        </template>
        <template #text1="{ model, field }">
          {{ model[field]?.nameCn }}
        </template>
        <template #img="{ model, field }">
          <div class="imgText">
            <p style="line-height:30px; margin: 0"> {{ model[field] }}</p>
            <PreviewGroup>
              <template v-for="item in model[field + 'Imgs']" :key="item">
                <div class="video" @click="bofang(item)" style="display: inline-block;position: relative;" v-if="checkMediaType(item) == 'video'">
                  <Image
                    style="overflow: hidden; height: 100%; object-fit: cover; margin-right: 10px; cursor: none;"
                    :height="80"
                    :width="80"
                    :key="item"
                    :src="item + '?spm=qipa250&x-oss-process=video/snapshot,t_7000,f_jpg,w_800,h_600,m_fast'"
                    :size="200"
                  />
                  <YoutubeOutlined style="font-size:32px; color: #fff;position:absolute;left:24px;top:24px" />
                </div>
                <Image
                  v-else
                  style="overflow: hidden; height: 100%; object-fit: cover; margin-right: 10px"
                  :height="80"
                  :width="80"
                  :key="item"
                  :src="item"
                  :size="200"
                />
              </template>
            </PreviewGroup>
          </div>
        </template>
      </BasicForm>
      <videoModal @register="registerbofang" />
    </div>
  </BasicModal>
</template>
<script lang="ts">
  import { defineComponent, ref, nextTick, onMounted, reactive, h } from 'vue';
  import { BasicModal, useModalInner } from '/@/components/Modal';
  import { BasicForm, FormSchema, useForm } from '/@/components/Form/index';
  import { useMessage } from '/@/hooks/web/useMessage';
  import { uploadApi } from '/@/api/product/index';
  import { useI18n } from '/@/hooks/web/useI18n';
  import { Tinymce } from '/@/components/Tinymce/index';
  import { useModal } from '/@/components/Modal';
  import { feedbackhandle } from '/@/api/operate';
  import { Image } from 'ant-design-vue';
  import { YoutubeOutlined } from '@ant-design/icons-vue';
  import videoModal from './bofang.vue'
  const { t } = useI18n();
  export default defineComponent({
    components: { BasicModal, videoModal, BasicForm, Image, PreviewGroup: Image.PreviewGroup, YoutubeOutlined },
    props: {
      userData: { type: Object },
    },
    emits: ['update', 'register'],
    setup(props, { emit }) {
      const modelRef = ref({});
      const fileFlow = reactive({
        coverImageUrl: '',
        title: '处理反馈',
      });
      const showOkBtn = ref(true);
      const { createMessage } = useMessage();
      const [registerbofang, { openModal }] = useModal();
      const schemas: FormSchema[] = [
        {
          field: 'id',
          component: 'Input',
          show: false,
          label: 'id',
        },
        {
          field: 'solutionImgs',
          component: 'Input',
          show: false,
          label: 'id',
        },
        {
          field: 'problemDescImgs',
          component: 'Input',
          show: false,
          label: 'id',
        },
        {
          field: 'problemDesc',
          component: 'Input',
          slot: 'img',
          label: '问题描述',
          defaultValue: 'cn',
        },
        {
          field: 'hardwareOption',
          component: 'Input',
          slot: 'text1',
          label: '硬件产品',
        },
        {
          field: 'softwareOption',
          slot: 'text1',
          component: 'Input',
          label: '软件产品',
        },
        {
          field: 'industryOption',
          slot: 'text1',
          component: 'Input',
          label: '所在行业',
        },
        {
          field: 'solution',
          component: 'Input',
          slot: 'img',
          label: '期望解决方案',
        },
        {
          field: 'nickName',
          slot: 'text',
          component: 'Input',
          label: '姓名',
        },
        {
          field: 'phone',
          slot: 'text',
          component: 'Input',
          label: '联系方式',
        },
        {
          field: 'address',
          slot: 'text',
          component: 'Input',
          label: '地址',
        },
        {
          field: 'score',
          slot: 'text',
          component: 'Input',
          label: '评分',
        },
        {
          field: 'scoreReason',
          slot: 'text',
          component: 'Input',
          label: '评分理由',
        },
        {
          field: 'result',
          component: 'InputTextArea',
          // required: true,
          label: '处理结果',
          componentProps: {
            maxLength: 200,
            rows: 4,
            placeholder: '请输入处理结果',
          },
          colProps: {
            span: 22,
          },
        },
      ];
      const [registerForm, { validate, resetFields, setFieldsValue, updateSchema }] = useForm({
        labelWidth: 120,
        schemas,
        showActionButtonGroup: false,
        actionColOptions: {
          span: 24,
        },
      });
      onMounted(() => {});
      let addListFunc = () => {};
      const [register, { closeModal }] = useModalInner((data) => {
        data && onDataReceive(data);
      });
      async function onDataReceive(data) {
        modelRef.value = data;
        showOkBtn.value = data.status == 1 ? false : true;
        fileFlow.title = data.status == 1 ? '查看反馈' : '处理反馈';
        updateSchema({ field: 'result', slot: data.status == 1 ? 'text' : '' });
        resetFields();
        setFieldsValue(data);
      }
      const handleSubmit = async () => {
        const params = await validate();
        try {
          await feedbackhandle(params);
          closeModal();
          resetFields();
          createMessage.success(t('common.optSuccess'));
          emit('update');
        } catch (error) {
          console.log('not passing', error);
        }
      };

      function checkMediaType(url) {
        // 创建URL对象
        var link = new URL(url);

        // 获取路径部分（去除参数）
        var path = link.pathname;

        // 获取路径的最后一个点之后的内容作为文件扩展名
        var extension = path.split('.').pop().toLowerCase();

        // 声明支持的图片和视频文件扩展名
        var imageExtensions = ['jpg', 'jpeg', 'gif', 'png'];
        var videoExtensions = ['mp4', 'wmv', 'avi', 'mov'];

        // 判断文件扩展名是否在图片扩展名数组中
        if (imageExtensions.includes(extension)) {
          return 'image';
        }

        // 判断文件扩展名是否在视频扩展名数组中
        if (videoExtensions.includes(extension)) {
          return 'video';
        }

        // 扩展名不在图片或视频数组中，返回null表示无法确定媒体类型
        return null;
      }
      function handleVisibleChange(v) {
        v && props.userData && nextTick(() => onDataReceive(props.userData));
      }
      function bofang(src){
        openModal(true, src);
      }
      return {
        register,
        schemas,
        registerForm,
        model: modelRef,
        fileFlow,
        handleVisibleChange,
        handleSubmit,
        addListFunc,
        resetFields,
        checkMediaType,
        registerbofang,
        bofang,
        t,
        showOkBtn,
      };
    },
  });
</script>
<style lang="less" scoped>
  ::v-deep .ant-image {
    margin-right: 10px;
  }
</style>