fix : 修改细节

This commit is contained in:
lwh 2023-05-11 21:36:49 +08:00
parent a5feb47ecc
commit 7bbd3a9e66
12 changed files with 483 additions and 69 deletions

View File

@ -1,25 +1,10 @@
<template>
<div class="component-upload-image">
<el-upload
multiple
:action="imageUpload"
list-type="picture-card"
:on-success="handleUploadSuccess"
: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-upload multiple :action="imageUpload" list-type="picture-card" :on-success="handleUploadSuccess"
:before-upload="handleBeforeUpload" :limit="limit" :on-error="handleUploadError" :on-exceed="handleExceed"
name="file" :drag="true" :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){
display: none!important;
}
:deep(.hide .el-upload--picture-card) {
display: none !important;
}
:deep(.el-upload-dragger) {
height: 100%;
display: flex;
align-items: center;
justify-content: center;
}
</style>

View File

@ -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>

View File

@ -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]);

View File

@ -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: [
{
required: true,
message: '联系扫码图片不能为空'
}
]
// contact_scancode_img: [
// {
// required: true,
// message: ''
// }
// ]
});
// --

View File

@ -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()

View File

@ -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: [
{
required: true,
message: '图片不能为空'
}
],
// home_env_img: [
// {
// required: true,
// 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();

View File

@ -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>

View File

@ -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);

View File

@ -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'>
<el-input-number :disabled='loading' v-model='scope.row.test_delete_user_guid' :min='1' controls-position='right'
<template #test_sort='scope'>
<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)

View File

@ -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');

View File

@ -1,15 +1,19 @@
import { api, downloadFile, createApiUrl} from '~/utils/axios';
import {
api,
downloadFile,
createApiUrl
} from '~/utils/axios';
/**
* 导出首页环境
* @param {Object} data
* @return {Promise} api
*/
export function exportExcel(data) {
downloadFile(createApiUrl('Home.HomeEnv/exportExcel'), data);
}
/**
* 导出首页环境
* @param {Object} data
* @return {Promise} api
*/
export function 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: '编辑失败'
});
}
}

View File

@ -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');