maojiacai/ba_web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

更新页面

Browse Source
This commit is contained in:
Esacpe
2025-09-25 16:28:13 +08:00
parent bee4ded844
commit e0fa42d9b0
4 changed files with 52 additions and 97 deletions
Download Patch File Download Diff File Expand all files Collapse all files

80
src/components/MyComponents/Upload/index.vue
View File

@ -8,7 +8,8 @@
:limit="props.limit"
:action="actionUrl"
:list-type="props.showBtn ? '' : 'picture-card'"
:file-list="fileList" show-file-list
:file-list="fileList"
show-file-list
:on-exceed="handleExceed"
:on-success="handlerSuccess"
:before-upload="beforeImgUpload">
@ -52,7 +53,7 @@
<script setup>
import { COMPONENT_WIDTH } from "@/constant";
import { ref, defineProps, defineEmits, computed, watch, onMounted } from "vue";
import { ref, defineProps, defineEmits, computed, watch, onMounted, onUnmounted } from "vue";
import { ElMessage } from "element-plus";
import { useStore } from "vuex";
const props = defineProps({
@ -79,9 +80,30 @@ const props = defineProps({
},
isAll: {
type: Boolean,
default: false //所有类型都可以用这个接口，接口返回的是id
default: true //所有类型都可以用这个接口，接口返回的是id
}
});
const emits = defineEmits(["update:modelValue"]);
const store = useStore();
const dialogImageUrl = ref("");
const dialogVisible = ref(false);
const disabled = ref(false);
const headers = ref({
Authorization: store.getters.token
});
const fileList = ref([]);
watch(() => props.modelValue,(val) => {
let arr = val ? (Array.isArray(val) ? val :[val]): [];
if(arr.length == 0 ) return fileList.value = [];
fileList.value = arr.map((el) => {
if (Object.prototype.toString.call(el) === "[object Object]") {
return props.isAll ? { url: `/mosty-base/minio/image/download/` + el.id, name: el.name } : { url:el,name:el.name};
} else {
return { url: `/mosty-base/minio/image/download/` + el };
}
});
},{ immediate: true,deep:true });
const actionUrl = computed(() => {
if (props.isAll) {
@ -91,8 +113,6 @@ const actionUrl = computed(() => {
}
});
const emits = defineEmits(["update:modelValue"]);
//获取后缀
const getSuffix = (fileName) => {
let suffix = "";
@ -134,40 +154,16 @@ const getSuffix = (fileName) => {
//否则返回other
return "OTHER";
};
const store = useStore();
const dialogImageUrl = ref("");
const dialogVisible = ref(false);
const disabled = ref(false);
const headers = ref({
Authorization: store.getters.token
});
const fileList = ref([]);
watch(() => props.modelValue,(val) => {
let arr = val ? (Array.isArray(val) ? val :[val]): [];
if (arr.length > 0) {
fileList.value = arr.map((el) => {
if (Object.prototype.toString.call(el) === "[object Object]") {
return props.isAll ? { url: `/mosty-base/minio/image/download/` + el.id, name: el.name } : { url:el,name:el.name};
} else {
return { url: `/mosty-base/minio/image/download/` + el };
}
});
}else{
fileList.value = [];
}
},
{ immediate: true }
);
const handlerSuccess = (res, file) => {
file.url = `/mosty-base/minio/image/download/` + res.data;
// file.url = `/mosty-base/minio/image/download/` + res.data;
file.id = res.data;
fileList.value.push(file);
let arr = props.modelValue ? props.modelValue : [];
let arr = []
if(props.isImg){
arr.push(res.data);
arr = fileList.value.map((el) => el.id)
}else{
arr.push({url:res.data,name:file.name});
arr = fileList.value.map((el) => ({ id:el.id, name:el.name}))
}
emits("update:modelValue", arr);
};
@ -179,16 +175,10 @@ const handleExceed = (files, fileList) => {
const beforeImgUpload = (file) => {
if (props.isImg) {
let isIMG = false;
if (getSuffix(file.name) === "IMG") {
isIMG = true;
}
if (getSuffix(file.name) === "IMG") isIMG = true;
const isLt5M = file.size / 1024 / 1024 < 5;
if (!isIMG) {
ElMessage.error("上传图片只能是jpg/png/jpeg/bmp/gif格式!");
}
if (!isLt5M) {
ElMessage.error("上传图片大小不能超过 5MB!");
}
if (!isIMG) ElMessage.error("上传图片只能是jpg/png/jpeg/bmp/gif格式!");
if (!isLt5M) ElMessage.error("上传图片大小不能超过 5MB!");
return isIMG && isLt5M;
} else {
return true;
@ -204,13 +194,13 @@ const handleDownload = (file) => {
};
const handleRemove = (file) => {
let index = fileList.value.findIndex(function (item) {
return item.url === file.url;
return item.id === file.id;
});
fileList.value.splice(index, 1);
props.modelValue.splice(index, 1);
emits("handleChange", props.modelValue);
emits("update:modelValue", props.modelValue);
};
</script>
<style lang="scss" scoped>

7
src/components/aboutTable/FormMessage.vue
View File

@ -9,8 +9,6 @@
<!-- input表单 input lx:textarea || number-->
<MOSTY.Other v-if="item.type == 'input'" :type="item.lx" :rows="item.rows || 4" width="100%" clearable
v-model="listQuery[item.prop]" :placeholder="`请输入${item.label}`" :disabled="item.disabled" />
<!-- <el-input v-model="listQuery[item.prop]" v-else-if="item.lx == 'textarea'" type="textarea" :rows="3"
:placeholder="`请输入${item.label}`" :disabled="item.disabled" /> -->
<!-- 数值 number-->
<el-input-number v-else-if="item.type == 'number'" @change="handleNum" v-model="listQuery[item.prop]"
style="width:100%" :min="item.min || 0" :max="item.max || 1000" />
@ -31,7 +29,7 @@
<MOSTY.Date v-else-if="item.type == 'date'" :type="item.lx ? item.lx : 'date'" width="100%" clearable
v-model="listQuery[item.prop]" />
<!-- 上传 upload limit:'限制张数'-->
<MOSTY.Upload v-else-if="item.type == 'upload'" :isAll="item.isAll" :showBtn="item.showBtn" :isImg="item.isImg" :limit="item.limit" width="100%"
<MOSTY.Upload v-else-if="item.type == 'upload'" :isAll="item.isAll" :key="item.prop" :showBtn="item.showBtn" :isImg="item.isImg" :limit="item.limit" width="100%"
v-model="listQuery[item.prop]" />
<!--选择checkbox -->
<MOSTY.CheckBox v-else-if="item.type == 'checkbox'" width="100%" clearable v-model="listQuery[item.prop]"
@ -151,10 +149,13 @@ const handleNum = (val) => {
watch(() => props.modelValue, (newVal) => {
listQuery.value = newVal; //赋值
console.log(newVal,'===newVal');
}, { immediate: true, deep: true });
watch(() => listQuery.value, (newVal) => {
emits('update:modelValue', newVal)
console.log(newVal,'===newVal111');
}, { immediate: true, deep: true });
defineExpose({ submit, reset });