fix : 修改细节

src/components/ImageUpload.vue

@@ -1,25 +1,10 @@
 <template>
     <div class="component-upload-image">
-        <el-upload 
+        <el-upload multiple :action="imageUpload" list-type="picture-card" :on-success="handleUploadSuccess"
-            multiple 
+            :before-upload="handleBeforeUpload" :limit="limit" :on-error="handleUploadError" :on-exceed="handleExceed"
-            :action="imageUpload" 
+            name="file" :drag="true" :data="data" :disabled="isDisabled" :on-remove="handleRemove" :show-file-list="true"
-            list-type="picture-card" 
+            :headers="headers" :file-list="fileList" :on-preview="handlePictureCardPreview" :style="style"
-            :on-success="handleUploadSuccess"
+            :class="{ hide: fileList.length >= limit || isDisabled }">
-            :before-upload="handleBeforeUpload" 
-            :limit="limit" 
-            :on-error="handleUploadError" 
-            :on-exceed="handleExceed"
-            name="file" 
-            :data="data" 
-            :disabled="isDisabled" 
-            :on-remove="handleRemove" 
-            :show-file-list="true"
-            :headers="headers" 
-            :file-list="fileList" 
-            :on-preview="handlePictureCardPreview"
-            :style="style"
-            :class="{ hide: fileList.length >= limit || isDisabled }"
-            >
             <el-icon class="avatar-uploader-icon">
                 +
             </el-icon>
@@ -43,7 +28,7 @@
 </template>
 
 <script setup>
-import { ref,reactive,watch,computed } from "vue";
+import { ref, reactive, watch, computed } from "vue";
 import { useLoginStore } from "~/store";
 import { imageUpload } from "~/service/common";
 
@@ -201,7 +186,14 @@ function listToString(list, separator) {
 </script>
 
 <style lang="less" scoped>
-    :deep(.hide .el-upload--picture-card){
+:deep(.hide .el-upload--picture-card) {
-        display: none!important;
+    display: none !important;
-    }
+}
+
+:deep(.el-upload-dragger) {
+    height: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
 </style>

src/components/UploadVideo.vue

@@ -0,0 +1,190 @@
+<template>
+
+  <el-upload v-model="props.modelValue"
+             multiple
+             :action="videoUpload"
+             :file-list="uploadVideoArr"
+             :data="props.data"
+             :fileSize="props.fileSize"
+             @success="handle"
+             @error="handle"
+             @exceed="handleExceed"
+             :before-upload="beforeUpload"
+             :drag="true"
+             @preview="handleVideoPreview"
+             @remove="handleDelete"
+             list-type="picture-card"
+  >
+
+    <div class="previewVideoMask" v-if="previewIsShow" @click.stop="changPreview">
+      <video :src="previewViewSrc" class="previewVideo" controls></video>
+    </div>
+    <el-button size="small" type="primary">点击上传</el-button>
+    <div slot="tip" class="el-upload__tip">只能上传视频格式文件（注：需等待全部上传成功再提交）</div>
+  </el-upload>
+
+</template>
+
+<script setup>
+import {ElMessage} from "element-plus";
+import {ref, watch} from "vue";
+import { videoUpload } from "~/service/common";
+
+let uploadIdx = ref(0)
+let previewIsShow = ref(false)
+let previewViewSrc = ref('')
+let uploadVideoArr = ref([])
+let uploadList = ref([])
+let number = ref(0)
+
+const emit = defineEmits()
+const props = defineProps({
+  modelValue : String,
+  data:Object,
+  fileType: {
+    type: Array,
+    default: () => ['mov', 'mp4', 'wmv', 'flv', 'avi','avchd','webm'],
+  },
+})
+
+const changPreview = function (){
+  previewIsShow.value = !previewIsShow.value
+}
+const handleExceed = function (arg){
+  console.log(arg)
+}
+watch(
+    () => props.modelValue,
+    (val) => {
+      if (val) {
+        let temp = 1
+        // 首先将值转为数组
+        const list = Array.isArray(val) ? val : props.modelValue.split(',')
+        // 然后将数组转为对象数组
+        uploadVideoArr.value = list.map((item) => {
+          if (typeof item === 'string') {
+            item = { url: item }
+          }
+          item.uid = item.uid || new Date().getTime() + temp++
+          return item
+        })
+        // uploadList.value = fileList
+      } else {
+        uploadVideoArr.value = []
+        return []
+      }
+      updateVideoDom()
+
+    },
+    { deep: true, immediate: true },
+)
+
+
+// 对象转成指定字符串分隔
+function listToString(list, separator) {
+  let strs = ''
+  separator = separator || ','
+  for (let i in list) {
+    strs += list[i].url + separator
+  }
+  return strs != '' ? strs.substr(0, strs.length - 1) : ''
+}
+
+const handle=function (res){
+  if(res['code'] !== 0){
+    uploadVideoArr.value = []
+    ElMessage.error(res.msg)
+    return
+  }
+  const {  url, } = res?.data
+  const tempFile = {  url: url }
+  uploadList.value.push(tempFile)
+  if (uploadList.value.length === number.value) {
+    uploadVideoArr.value.map(item=>{
+      if(item?.response){
+        item.url = item.response.data.url
+      }
+    })
+    emit('update:modelValue', listToString(uploadVideoArr.value))
+    emit('success', listToString(uploadVideoArr.value))
+    // console.log(uploadVideoArr.value,'is local')
+    // console.log(props.modelValue,'is props')
+    uploadList.value = []
+    number.value = 0
+    console.log(uploadVideoArr.value,123)
+    ElMessage.success('全部上传成功')
+
+  }
+    updateVideoDom()
+}
+function updateVideoDom(){
+  setTimeout(()=>{
+    Array.prototype.slice.call(document.getElementsByClassName('is-success')).filter(item=>item.className.indexOf('el-upload-list__item')!==-1).map((item,idx)=>{
+      let tag = item.getElementsByClassName('el-upload-list__item-thumbnail')[0]
+      let attr = [tag.getAttribute('class'),tag.getAttribute('src')]
+      let videoTag = document.createElement('video')
+      videoTag.setAttribute('class',attr[0])
+      videoTag.setAttribute('src',attr[1])
+      item.replaceChild(videoTag,tag)
+    })
+
+  },)
+}
+
+const beforeUpload = function (file){
+  // 校检文件类型
+  if (props.fileType.length) {
+    let fileExtension = ''
+    if (file.name.lastIndexOf('.') > -1) {
+      fileExtension = file.name.slice(file.name.lastIndexOf('.') + 1)
+    }
+    const isTypeOk = props.fileType.some((type) => {
+      if (file.type.indexOf(type) > -1) return true
+      if (fileExtension && fileExtension.indexOf(type) > -1) return true
+      return false
+    })
+    if (!isTypeOk) {
+      ElMessage.error(`文件格式不正确, 请上传${props.fileType.join('/')}格式文件!`)
+      return false
+    }
+    number.value+=1
+  }
+}
+const handleDelete=function (f,fl){
+  let index
+  console.log(f,props.modelValue.split(','))
+  props.modelValue.split(',').map((item,idx)=>{
+      if(item===f.url){
+        index = idx
+      }
+    })
+  uploadVideoArr.value.splice(index, 1)
+  emit('update:modelValue', listToString(uploadVideoArr.value))
+}
+const handleVideoPreview = function (f){
+
+  changPreview()
+  previewViewSrc.value = f.url
+}
+</script>
+
+<style scoped lang="scss">
+.previewVideoMask{
+  height: 100vh;
+  width: 100vw;
+  background: rgba(0,10,10,0.5);
+  position: fixed;
+  left: 0;
+  bottom: 0;
+  z-index: 99999;
+  display: flex;
+  justify-content: center;
+  align-content: center;
+  flex-direction: column;
+  .previewVideo{
+    height: 80%;
+    width: 80%;
+    margin: 0 auto;
+  }
+}
+</style>

src/main.ts

@@ -17,6 +17,7 @@ import RichText from '~/components/RichText.vue';
 import Map from '~/components/Map.vue';
 import ImageUpload from '~/components/ImageUpload.vue';
 import FileUpload from '~/components/FileUpload.vue';
+import UploadVideo  from '~/components/UploadVideo.vue';
 import { guardian, topProgressBar } from './guardian';
 
 async function bootstrap(): Promise<void> {
@@ -37,6 +38,7 @@ async function bootstrap(): Promise<void> {
   app.component('Map', Map);
   app.component('UploadImage', ImageUpload);
   app.component('UploadFile', FileUpload);
+  app.component('UploadVideo', UploadVideo);
 
   Object.keys(ElIcons).forEach((icon: string) => {
     app.component(`ElIcon${icon}`, ElIcons[icon]);

src/pages/index/contact_us/contact_info/contact_scancode/components/AddContactScancodeDialog.vue

@@ -67,7 +67,9 @@ const props = defineProps({
 });
 const emits = defineEmits(['update:modelValue']);
 const dialogVisible = ref(props.modelValue);
-const formData = reactive({});
+const formData = reactive({
+  contact_scancode_order: 1
+});
 
 const uoloadData = ref({
   dirName: 'ContactScancode'
@@ -78,12 +80,12 @@ watch(props, v => {
 });
 
 const rules = reactive({
-  contact_scancode_img: [
+  // contact_scancode_img: [
-    {
+  //   {
-      required: true,
+  //     required: true,
-      message: '联系扫码图片不能为空'
+  //     message: '联系扫码图片不能为空'
-    }
+  //   }
-  ]
+  // ]
 });
 
 // --基础方法

src/pages/index/contact_us/contact_info/contact_scancode/index.vue

@@ -211,7 +211,7 @@ async function handleEditOrder(data) {
 // 开关
 async function handleEditShow(data) {
   loading.value = true
-  const { code } = await editinfoArticle(data);
+  const { code } = await editContactScancode(data);
   if (code == 0) {
     loading.value = false
     tableRef.value.reload()

src/pages/index/home_data/home_env/components/AddHomeEnvDialog.vue

@@ -1,6 +1,6 @@
 <template>
   <el-dialog v-model="dialogVisible" title="添加首页环境" width="900px" @closed="closeDialog" @open="openDialog">
-    <el-form ref="formRef" :model="formData" :rules="rules">
+    <el-form ref="formRef" :rules="rules">
       <el-row>
 
 
@@ -10,6 +10,13 @@
               :drag='true' :isShowTip='false' />
           </el-form-item>
         </el-col>
+        
+        <!-- 
+        <el-col :span='12'>
+          <el-form-item :label-width='labelWidth' label='视频' prop='home_env_video'>
+            <UploadVideo v-model='formData.home_env_video' :data=uoloadData />
+          </el-form-item>
+        </el-col> -->
 
         <el-col :span="12">
           <el-form-item :label-width="labelWidth" label="排序" prop="home_env_sort">
@@ -22,7 +29,7 @@
 
     <template #footer>
       <span class="dialog-footer">
-        <el-button type="primary" @click="handleAddClick(formRef)">添加</el-button>
+        <el-button type="primary" @click="handleAddClick(formRef)" :loading="isBtnLod">添加</el-button>
         <el-button @click="handleResetClick(formRef)">重置</el-button>
       </span>
     </template>
@@ -61,24 +68,25 @@ const props = defineProps({
 const emits = defineEmits(["update:modelValue"]);
 const dialogVisible = ref(props.modelValue);
 const formData = reactive({
-  home_env_sort: 1
+  home_env_sort: 1,
+  home_env_video: ''
 });
 
-const uoloadData = ref({
+const uoloadData = {
   dirName: "HomeEnv"
-})
+}
 
 watch(props, (v) => {
   dialogVisible.value = v.modelValue;
 });
 
 const rules = reactive({
-  home_env_img: [
+  // home_env_img: [
-    {
+  //   {
-      required: true,
+  //     required: true,
-      message: '图片不能为空'
+  //     message: '图片不能为空'
-    }
+  //   }
-  ],
+  // ],
   home_env_sort: [
     {
       required: true,
@@ -97,12 +105,14 @@ const openDialog = () => {
 };
 
 const closeDialog = () => {
+  formData.home_env_video = ''
   handleResetClick(formRef.value);
   dialogVisible.value = false;
   emits("update:modelValue", false);
 };
 
 const handleAddClick = async (formEl) => {
+  console.log(formData, 'asdas');
   if (!formEl) return;
   formEl.validate(async (valid) => {
     if (!valid) {
@@ -110,7 +120,6 @@ const handleAddClick = async (formEl) => {
     }
     isBtnLod.value = true;
 
-
     const { code } = await addHomeEnv(formData);
     if (code == 0) {
       closeDialog();

src/pages/index/home_data/home_env/components/UploadHomeEnvDialog.vue

@@ -0,0 +1,116 @@
+<template>
+  <el-dialog v-model="dialogVisible" title="批量添加首页环境" width="900px" @closed="closeDialog" @open="openDialog">
+    <el-form ref="formRef" :model="formData" :rules="rules">
+      <el-row>
+
+        <el-col :span='24'>
+          <el-form-item :label-width='labelWidth' label='图片' prop='home_env_img'>
+            <UploadImage ref='uploadRef' v-model='formData.home_env_img' :data=uoloadData :limit='100' :fileSize='5'
+              :drag='true' :isShowTip='true' />
+          </el-form-item>
+        </el-col>
+
+      </el-row>
+    </el-form>
+
+    <template #footer>
+      <span class="dialog-footer">
+        <el-button type="primary" @click="handleAddClick(formRef)" :loading="isBtnLod">添加</el-button>
+        <el-button @click="handleResetClick(formRef)">重置</el-button>
+      </span>
+    </template>
+  </el-dialog>
+</template>
+
+<script setup>
+import { reactive, ref, watch } from "vue";
+import { batchAddHomeEnv } from "~/service/home_env";
+import { useLoginStore } from "~/store";
+
+// --业务参数
+
+
+
+// --业务方法
+
+
+
+
+
+// --基础参数
+const store = useLoginStore();
+const headers = {
+  Accept: "application/json",
+  ...store.headers,
+};
+
+const isBtnLod = ref(false);
+const formRef = ref();
+const labelWidth = 90;
+const props = defineProps({
+  modelValue: Boolean,
+  done: Function,
+});
+const emits = defineEmits(["update:modelValue"]);
+const dialogVisible = ref(props.modelValue);
+const formData = reactive({
+  home_env_sort: 1
+});
+
+const uoloadData = ref({
+  dirName: "HomeEnv"
+})
+
+watch(props, (v) => {
+  dialogVisible.value = v.modelValue;
+});
+
+const rules = reactive({
+  home_env_img: [
+    {
+      required: true,
+      message: '图片不能为空'
+    }
+  ],
+});
+
+
+// --基础方法
+
+// 打开弹窗时执行
+const openDialog = () => {
+
+};
+
+const closeDialog = () => {
+  handleResetClick(formRef.value);
+  dialogVisible.value = false;
+  emits("update:modelValue", false);
+};
+
+const handleAddClick = async (formEl) => {
+  if (!formEl) return;
+  formEl.validate(async (valid) => {
+    if (!valid) {
+      return;
+    }
+    isBtnLod.value = true;
+
+    // console.log(formData,"传值");
+    
+    const { code } = await batchAddHomeEnv(formData);
+    if (code == 0) {
+      // closeDialog();
+      // props.done();
+    }
+    isBtnLod.value = flase;
+  });
+};
+
+const handleResetClick = async (formEl) => {
+  if (!formEl) return;
+  formEl.resetFields();
+};
+</script>
+
+<style lang="less" scoped></style>

src/pages/index/home_data/home_env/index.vue

@@ -6,11 +6,16 @@
   </el-breadcrumb>
 
   <el-space style="margin-bottom: 10px;">
-    <!-- 添加首页环境 -->
+    <!-- 批量首页环境 -->
     <el-col :span="1">
       <el-button type="primary" @click="addHomeEnvDialogVisible = true"> 添加 </el-button>
     </el-col>
 
+    <!-- 批量添加首页环境 -->
+    <el-col :span="1">
+      <el-button type="primary" @click="uploadHomeEnvDialogVisible = true"> 批量添加 </el-button>
+    </el-col>
+
 
     <!-- 导出 -->
     <el-button icon="ElIconDocument" @click="exportExcel(params)">导出</el-button>
@@ -76,6 +81,8 @@
 
   <!-- 添加首页环境 -->
   <AddHomeEnvDialog v-model="addHomeEnvDialogVisible" :done="() => tableRef.reload()"></AddHomeEnvDialog>
+  <!-- 批量添加首页环境 -->
+  <UploadHomeEnvDialog v-model="uploadHomeEnvDialogVisible" :done="() => tableRef.reload()"></UploadHomeEnvDialog>
   <!-- 编辑首页环境 -->
   <EditHomeEnvDialog v-model="EditHomeEnvDialogVisible" :data="EditHomeEnvDialogRow" :done="() => tableRef.reload()">
   </EditHomeEnvDialog>
@@ -86,8 +93,9 @@
 import { ArrowDown } from '@element-plus/icons-vue';
 import { ref, reactive, watch } from 'vue';
 import { useLoginStore } from "~/store";
-import { getHomeEnvList, deleteHomeEnv, exportExcel } from '~/service/home_env';
+import { getHomeEnvList, deleteHomeEnv, exportExcel,editHomeEnv } from '~/service/home_env';
 import AddHomeEnvDialog from './components/AddHomeEnvDialog.vue';
+import UploadHomeEnvDialog from './components/UploadHomeEnvDialog.vue';
 import EditHomeEnvDialog from './components/EditHomeEnvDialog.vue';
 import DetailHomeEnvDialog from './components/DetailHomeEnvDialog.vue';
 
@@ -96,6 +104,7 @@ const selectionData = ref([]);
 const store = useLoginStore();
 
 const addHomeEnvDialogVisible = ref(false);
+const uploadHomeEnvDialogVisible = ref(false);
 const EditHomeEnvDialogVisible = ref(false);
 const EditHomeEnvDialogRow = ref({});
 const DetailHomeEnvDialogVisible = ref(false);

src/pages/index/test/index.vue

@@ -24,6 +24,27 @@
     </el-col>
 
     
+                           <!-- 导出 -->
+                           <el-button icon="ElIconDocument" @click="exportExcel(params)">导出</el-button>
+                           
+                       <!-- 导入 -->
+                       <el-upload
+                           class="upload-demo"
+                           :action="importExcel"
+                           :headers="headers"
+                           :on-success="handleExcelSuccess"
+                           :on-progress="uploadLoading" 
+                           :on-error="closeUploadLoading"
+                           style="margin-left: 10px"
+                           :show-file-list="false"
+                       >
+                           <el-button type="primary">导入</el-button>
+                       </el-upload>
+   
+                       <!-- 下载导入模板 -->
+                       <el-button icon="ElIconDownload" @click="downloadTemplate()"
+                           >下载导入模板</el-button>
+                       
 
     <!-- 下拉操作 -->
     <el-dropdown v-if="selectionData.length">
@@ -56,8 +77,8 @@
                 
     
                 <!-- 排序 -->
-                <template #test_delete_user_guid='scope'>
+                <template #test_sort='scope'>
-                  <el-input-number :disabled='loading' v-model='scope.row.test_delete_user_guid' :min='1' controls-position='right'
+                  <el-input-number :disabled='loading' v-model='scope.row.test_sort' :min='1' controls-position='right'
                     @change='handleEditOrder(scope.row)'></el-input-number>
                 </template>    
                 
@@ -110,7 +131,7 @@
 import { ArrowDown } from '@element-plus/icons-vue';
 import { ref, reactive,watch } from 'vue';
 import { useLoginStore } from "~/store";
-import { getTestList, deleteTest , getDictionary  } from '~/service/test';
+import { getTestList, deleteTest , getDictionary  , exportExcel, downloadTemplate , importExcel  } from '~/service/test';
 import AddTestDialog from './components/AddTestDialog.vue';
 import EditTestDialog from './components/EditTestDialog.vue';
 import DetailTestDialog from './components/DetailTestDialog.vue';
@@ -206,6 +227,30 @@ function handleDetail(row) {
 }
 
 
+                    // 导入方法
+                    let loadingImoprt = null;
+                    const uploadLoading = () => {
+                      loadingImoprt = ElLoading.service({
+                        lock: true,
+                        text: "正在导入中...",
+                        background: "rgba(255, 255, 255, 0.7)",
+                      });
+                    };
+                    const closeUploadLoading = () => loadingImoprt.close();
+                       const handleExcelSuccess = (value) => {
+                        if (value.code == 0) {
+                            ElMessageBox.alert(value.msg, "导入信息", {
+                              dangerouslyUseHTMLString: true,
+                              confirmButtonText: "确定",
+                            });
+                          } else {
+                            ElMessage.error(value.msg);
+                          }
+                           closeUploadLoading();
+                           tableRef.value.reload();
+                         };
+                       
+                       
 
                 //排序
                 const loading = ref(false)

src/service/common.js

@@ -1,11 +1,19 @@
-import { api, createApiUrl } from '~/utils/axios';
+import {
+  api,
+  createApiUrl
+} from '~/utils/axios';
 
-  /**
+/**
-   * 上传图片
+ * 上传图片
-   */
+ */
-   export const imageUpload = createApiUrl('/common/uploadImg');
+export const imageUpload = createApiUrl('/common/uploadImg');
 
-   /**
+/**
-   * 上传文件
+ * 上传文件
-   */
+ */
-    export const fileUpload = createApiUrl('/common/uploadFile');
+export const fileUpload = createApiUrl('/common/uploadFile');
+
+/**
+ * 上传视频
+ */
+export const videoUpload = createApiUrl('/common/uploadVideo');

src/service/home_env.js

@@ -1,15 +1,19 @@
-import { api, downloadFile, createApiUrl} from '~/utils/axios';
+import {
+  api,
+  downloadFile,
+  createApiUrl
+} from '~/utils/axios';
 
 
-                       /**
+/**
-                       * 导出首页环境
+ * 导出首页环境
-                       * @param {Object} data
+ * @param {Object} data
-                       * @return {Promise} api
+ * @return {Promise} api
-                       */
+ */
-                       export function exportExcel(data) {
+export function exportExcel(data) {
-                           downloadFile(createApiUrl('Home.HomeEnv/exportExcel'), data);
+  downloadFile(createApiUrl('Home.HomeEnv/exportExcel'), data);
-                       }
+}
-                       
+
 
 
 
@@ -51,6 +55,18 @@ export function addHomeEnv(data) {
     errorMessageText: '添加失败'
   });
 }
+/**
+ * 批量添加首页环境
+ * @param {Object} data
+ * @return {Promise} api
+ */
+ export function batchAddHomeEnv(data) {
+  return api.post('Home.HomeEnv/batchAddHomeEnv', data, {
+    isTransformResponse: true,
+    isShowSuccessMessage: true,
+    errorMessageText: '批量添加失败'
+  });
+}
 /**
  * 编辑首页环境
  * @param {Object} data
@@ -62,4 +78,4 @@ export function editHomeEnv(data) {
     isShowSuccessMessage: true,
     errorMessageText: '编辑失败'
   });
-}
+}

src/service/test.js

@@ -1,6 +1,31 @@
 import { api, downloadFile, createApiUrl} from '~/utils/axios';
 
 
+                       /**
+                       * 导出测试
+                       * @param {Object} data
+                       * @return {Promise} api
+                       */
+                       export function exportExcel(data) {
+                           downloadFile(createApiUrl('Test.Test/exportExcel'), data);
+                       }
+                       
+                       /**
+                        * 下载测试模板
+                        * @param {Object} data
+                        * @return {Promise} api
+                        */
+                       export function downloadTemplate(data) {
+                           downloadFile(createApiUrl('Test.Test/downloadTemplate'), data);
+                       }
+                       
+                       /**
+                        * 导入测试
+                        * @param {Object} data
+                        * @return {Promise} api
+                        */
+                       export const importExcel = createApiUrl('Test.Test/importExcel');
+