style

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

@@ -73,6 +73,7 @@
     emits: ['update', 'register'],
     setup(props, { emit }) {
       const modelRef = ref({});
+      const footer = ref({footer: null})
       const fileFlow = reactive({
         coverImageUrl: '',
         title: '处理反馈',

src/views/operate/components/config/viewModal.vue

@@ -0,0 +1,270 @@
+<template>
+  <BasicModal
+    v-bind="$attrs"
+    @register="register"
+    :title="fileFlow.title"
+    @visible-change="handleVisibleChange"
+    okText="完成处理"
+    :footer="null"
+    :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 footer = ref({footer: null})
+      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>

src/views/operate/userFeedback.vue

@@ -28,16 +28,23 @@
           stopButtonPropagation
           :actions="[
             {
-              label: record.status == 0 ? '处理' : '查看',
+              label: '处理',
               //icon: 'ep:edit',
-              ifShow: record.status == 0 && getCheckPerm('feedback-handle') || record.status != 0,
+              ifShow: record.status == 0 && getCheckPerm('feedback-handle'),
               onClick: handleEdit.bind(null, record),
             },
+            {
+              label: '查看',
+              //icon: 'ep:edit',
+              ifShow: record.status != 0,
+              onClick: handleView.bind(null, record),
+            },
           ]"
         />
       </template>
     </BasicTable>
     <addRecruitModal @register="register" @update="reload" />
+    <viewRModal @register="registerView" @update="reload" />
   </div>
 </template>
 <script lang="ts">
@@ -61,6 +68,7 @@
   import { useMessage } from '/@/hooks/web/useMessage';
   import { Switch } from 'ant-design-vue';
   import addRecruitModal from './components/config/messgeModal.vue';
+  import viewRModal from './components/config/viewModal.vue';
   import { useRouter } from 'vue-router';
   import { usePermissionStore } from '/@/store/modules/permission';
   import { Collapse } from 'ant-design-vue';
@@ -74,7 +82,7 @@
       GrowCard,
       [Collapse.name]: Collapse,
       [Collapse.Panel.name]: Collapse.Panel,
-      
+      viewRModal,
     },
     setup() {
       const { t } = useI18n();
@@ -82,7 +90,8 @@
       const permissionStore = usePermissionStore();
       const { getCheckPerm } = permissionStore;
       const [register, { openModal }] = useModal();
-      const router = useRouter()
+      const [registerView, { openModal: openViewModal }] = useModal();
+      const router = useRouter();
       const loading = ref(true);
       const score = ref({
         hardware: [],
@@ -313,6 +322,9 @@
       function handleEdit(record: Recordable) {
         openModal(true, record);
       }
+      function handleView(record: Recordable) {
+        openViewModal(true, record);
+      }
       async function handleWithdraw(record: Recordable) {
         await NewPublicNews({ id: record.id, isPublic: 0 });
         createMessage.success(t('common.optSuccess'));
@@ -330,6 +342,7 @@
         registerTable,
         handleDelete,
         handleEdit,
+        handleView,
         handleWithdraw,
         handlePublish,
         hendleAddNew,
@@ -343,6 +356,8 @@
         loading,
         router,
         downTemplate,
+        registerView,
+        openViewModal,
       };
     },
   });