This commit is contained in:
lcw
2025-09-25 10:37:28 +08:00
11 changed files with 207 additions and 146 deletions

View File

@ -1,44 +1,44 @@
<template>
<div class="form-item-box" :style="{ width: width }">
<el-upload v-bind="$attrs" :headers="headers" :multiple="false" class="avatar-uploader" :limit="props.limit"
:action="actionUrl" list-type="picture-card" :file-list="fileList" show-file-list :on-exceed="handleExceed"
:on-success="handlerSuccess" :before-upload="beforeImgUpload">
<div class="form-item-box" :class="props.showBtn ? 'showBtn-upload' : ''" :style="{ width: width }">
<el-upload
v-bind="$attrs"
:headers="headers"
:multiple="false"
class="avatar-uploader"
:limit="props.limit"
:action="actionUrl"
:list-type="props.showBtn ? '' : 'picture-card'"
:file-list="fileList" show-file-list
:on-exceed="handleExceed"
:on-success="handlerSuccess"
:before-upload="beforeImgUpload">
<template #default>
<el-icon>
<Plus />
</el-icon>
<el-button v-if="props.showBtn" size="small" type="primary">上传文件</el-button>
<el-icon v-else><Plus /></el-icon>
</template>
<template #file="{ file }">
<template #file="{ file }" v-if="!props.showBtn">
<div v-if="props.isImg">
<img class="el-upload-list__item-thumbnail" :src="file.url" alt="" />
<span class="el-upload-list__item-actions">
<span class="el-upload-list__item-preview" @click="handlePictureCardPreview(file)">
<el-icon><zoom-in /></el-icon>
<el-icon> <zoom-in /></el-icon>
</span>
<span v-if="!disabled" class="el-upload-list__item-delete" @click="handleRemove(file, fileList)">
<el-icon>
<Delete />
</el-icon>
<el-icon><Delete /></el-icon>
</span>
</span>
</div>
<div v-else>
<div class="file-wrap">
<span>
<svg-icon :icon="getSuffix(file.name)" />
</span>
<span><svg-icon :icon="getSuffix(file.name)" /></span>
<span class="file-name">{{ file.name }}</span>
</div>
<span class="el-upload-list__item-actions">
<span v-if="!disabled" class="el-upload-list__item-delete" @click="handleDownload(file)">
<el-icon>
<Download />
</el-icon>
<el-icon><Download /></el-icon>
</span>
<span v-if="!disabled" class="el-upload-list__item-delete" @click="handleRemove(file, fileList)">
<el-icon>
<Delete />
</el-icon>
<el-icon><Delete /></el-icon>
</span>
</span>
</div>
@ -52,9 +52,8 @@
<script setup>
import { COMPONENT_WIDTH } from "@/constant";
import { ref, defineProps, defineEmits, defineExpose, computed, watch, onMounted } from "vue";
import { ElMessage, ElMessageBox } from "element-plus";
import { ref, defineProps, defineEmits, computed, watch, onMounted } from "vue";
import { ElMessage } from "element-plus";
import { useStore } from "vuex";
const props = defineProps({
//获取组件传值
@ -73,12 +72,24 @@ const props = defineProps({
width: {
default: COMPONENT_WIDTH,
type: String
},
showBtn: {
type: Boolean,
default: false
},
isAll: {
type: Boolean,
default: false //所有类型都可以用这个接口返回的是id
}
});
const actionUrl = computed(() =>
props.isImg ? "/mosty-base/minio/image/upload/id" : "/mosty-base/minio/file/upload"
);
const actionUrl = computed(() => {
if (props.isAll) {
return "/mosty-base/minio/image/upload/id";
} else {
return props.isImg ? "/mosty-base/minio/image/upload/id": "/mosty-base/minio/file/upload";
}
});
const emits = defineEmits(["update:modelValue", "handleChange"]);
@ -104,33 +115,25 @@ const getSuffix = (fileName) => {
//excel XLS
const excelist = ["xls", "xlsx"];
if (excelist.includes(suffix)) return "XLS";
// 匹配 word
var wordlist = ["doc", "docx"];
if (wordlist.includes(suffix)) return "DOC";
//pdf
if (suffix === "pdf") return "PDF";
//视频 音频
var videolist = ["mp4", "m2v", "mkv", "rmvb", "wmv", "avi", "flv", "mov", "m4v"];
var videolist = ["mp4","m2v","mkv","rmvb","wmv","avi","flv","mov","m4v"];
if (videolist.includes(suffix)) return "VIDEO";
var musiclist = ["mp3", "wav", "wmv"];
if (musiclist.includes(suffix)) return "MUSIC";
var pptlist = ["ppt", "pptx"];
if (pptlist.includes(suffix)) return "PPT";
//压缩包
var yslist = ["7z", "rar", "zip", "apz", "ar", "hpk", "hyp", "hbc2"];
if (yslist.includes(suffix)) return "YS";
//否则返回other
return "OTHER";
};
const imageUrl = ref("");
const store = useStore();
const dialogImageUrl = ref("");
const dialogVisible = ref(false);
@ -139,47 +142,37 @@ const headers = ref({
Authorization: store.getters.token
});
const propsModelValue = ref()
const fileList = ref([]);
watch(() => props.modelValue, (val) => {
console.log(val,"xxxxxxxxxxx");
if (Array.isArray(val)) {
propsModelValue.value=val
} else {
propsModelValue.value = val ? val.split(',') : []
}
if (propsModelValue.value) {
fileList.value = propsModelValue.value.map((el) => {
return { url: `/mosty-base/minio/image/download/` + el };
});
}
},{deep:true,immediate:true});
onMounted(() => {
// 初始化数据
// if (propsModelValue.value) {
// fileList.value = propsModelValue.value.map((el) => {
// return { url: `/mosty-base/minio/image/download/` + el };
// });
// }
});
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 { url: `/mosty-base/minio/image/download/` + 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;
fileList.value.push(file);
if (Array.isArray(propsModelValue.value)) {
propsModelValue.value.push(res.data);
} else {
propsModelValue.value =propsModelValue.value? propsModelValue.value.split(','):[]
propsModelValue.value.push(res.data);
let arr = props.modelValue ? props.modelValue : [];
if(props.isImg){
arr.push(res.data);
}else{
arr.push({url:res.data,name:file.name});
}
console.log( propsModelValue.value);
emits("update:modelValue", propsModelValue.value.toString());
// emits("handleChange", propsModelValue.value);
emits("update:modelValue", arr);
emits("handleChange", props.modelValue);
};
const handlePreview = (file) => { };
const handleExceed = (files, fileList) => {
ElMessage.warning(`限制,只能上传${props.limit}个文件或图片`);
};
@ -187,7 +180,7 @@ const handleExceed = (files, fileList) => {
const beforeImgUpload = (file) => {
if (props.isImg) {
let isIMG = false;
if (getSuffix(file.name) === "IMG" || getSuffix(file.name) === "MUSIC") {
if (getSuffix(file.name) === "IMG") {
isIMG = true;
}
const isLt5M = file.size / 1024 / 1024 < 5;
@ -202,62 +195,27 @@ const beforeImgUpload = (file) => {
return true;
}
};
const handleAvatarSuccess = (res, file) => {
imageUrl.value = URL.createObjectURL(file.raw);
};
//查询图片
const handlePictureCardPreview = (file) => {
dialogImageUrl.value = file.url;
dialogVisible.value = true;
};
const handleDownload = (file) => {
console.log(file);
// window.open(file.response.data);
window.open(file);
window.open(file.response.data);
};
const handleRemove = (file) => {
let index = fileList.value.findIndex(function (item) {
return item.url === file.url;
});
fileList.value.splice(index, 1);
propsModelValue.value.splice(index, 1);
// emits("handleChange", propsModelValue.value);
emits("update:modelValue", propsModelValue.value.toString());
props.modelValue.splice(index, 1);
emits("handleChange", props.modelValue);
emits("update:modelValue", props.modelValue);
};
watch(
() => props.modelValue,
(val) => {
let arr = val ? val : [];
if(Array.isArray(arr)){
if (arr && arr.length > 0) {
fileList.value = arr.map((el) => {
return { url: `/mosty-base/minio/image/download/` + el };
});
}
}else{
arr.split(",").map(item=>{
return { url: `/mosty-base/minio/image/download/` + item };
})
}
},
{ immediate: true }
);
const propsModelValue = ref();
</script>
<style lang="scss" scoped>
.avatar-uploader {
width: 100%;
display: flex;
flex-wrap: wrap;
align-items: center;
}
.avatar-uploader .el-upload {
border: 1px dashed #d9d9d9;
border-radius: 6px;
@ -309,11 +267,4 @@ arr.split(",").map(item=>{
-webkit-line-clamp: 2;
}
}
::v-deep .el-upload-list--picture-card {
display: flex;
align-items: center;
padding-top: 7px;
box-sizing: border-box;
}
</style>

View File

@ -31,7 +31,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'" :isImg="item.isImg" :limit="item.limit" width="100%"
<MOSTY.Upload v-else-if="item.type == 'upload'" :isAll="item.isAll" :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]"

View File

@ -69,10 +69,12 @@ function getDateById (id) {
}
const save = () => {
FormRef.value.submit(()=>{
FormRef.value.submit((val)=>{
loading.value = true;
let url = title.value == '新增' ? `/mosty-base/baxx/jxda/add` : `/mosty-base/baxx/jxda/edit`;
qcckPost(listQuery.value, url).then(() => {
let params = { ...val }
params.fj = params.fj ? params.fj.join(','):''
qcckPost(params, url).then(() => {
loading.value = false;
proxy.$message.success("保存成功");
emit("refresh");
@ -84,7 +86,7 @@ const save = () => {
}
const close = () => {
dialogForm.value = false;
listQuery.value = {fj:''}
listQuery.value = {fj:[]}
FormRef.value.reset()
};;

View File

@ -36,7 +36,7 @@ const formList = reactive([
{ label: "视频标题", prop: "spbt", type: "input" },
],
[
{ label: "附件", prop: "fjid", type: "upload"},
{ label: "附件", prop: "fjid", type: "upload",isImg:false,showBtn:true,limit:2 ,isAll:true},
],
])
@ -46,14 +46,23 @@ const init = (type, row = {}) => {
dialogForm.value = true;
openType.value = type;
title.value = type == "add" ? "新增" : "编辑";
listQuery.value = { ...row }
if(row) getDateById(row.id)
};
const getDateById = (id) =>{
qcckPost({},'/mosty-base/baxx/sok/getInfo/'+id).then(res=>{
res.fjid = res.fjid ? JSON.parse(res.fjid):[];
listQuery.value = res || {}
})
}
const save = () => {
FormRef.value.submit(()=>{
FormRef.value.submit((val)=>{
loading.value = true;
let url = title.value == '新增' ? `/mosty-base/baxx/sok/add` : `/mosty-base/baxx/sok/edit`;
qcckPost(listQuery.value, url).then(() => {
let params = {...val }
params.fjid = params.fjid ? JSON.stringify(params.fjid):''
qcckPost(params, url).then(() => {
loading.value = false;
proxy.$message.success("保存成功");
emit("refresh");
@ -65,6 +74,7 @@ const save = () => {
}
const close = () => {
dialogForm.value = false;
listQuery.value.fjid = []
FormRef.value.reset()
};;

View File

@ -23,7 +23,7 @@
<template #controls="{ row }">
<el-link type="primary" link @click="addEdit('edit', row)">编辑</el-link>
<el-link type="primary" link @click="addEdit('detail', row)">详情</el-link>
<el-link type="danger" link @click="handleDelete(row.id)">删除</el-link>
<el-link type="danger" link @click="handleDelete([row.id])">删除</el-link>
</template>
</MyTable>
<Pages @changeNo="changeNo" @changeSize="changeSize" :tableHeight="pageData.tableHeight" :pageConfiger="{
@ -115,7 +115,7 @@ const getList = () => {
// 删除
const handleDelete = (ids) => {
proxy.$modal.confirm("是否确认删除该视频?").then(() => {
qcckPost({ ids }, "/mosty-base/baxx/sok/remove").then(() => {
qcckPost(ids, "/mosty-base/baxx/sok/remove").then(() => {
proxy.$modal.msgSuccess("删除成功");
getList();
});

View File

@ -47,7 +47,7 @@ const formList = reactive([
])
const rules = {
pxgs: [{ required: true, message: "请输入考试成绩", trigger: "change" }],
pxgs: [{ required: true, message: "请选择培训公司", trigger: "change" }],
}
const open = (row = {}, type = 'updata') => {

View File

@ -27,13 +27,8 @@
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="培训开始时间" prop="kssj" style="width: 100%;">
<el-date-picker v-model="formData.kssj" type="datetime" value-format="YYYY-MM-DD HH:mm:ss" placeholder="请输入培训开始时间" style="width: 100%;" />
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="培训结束时间" prop="jssj" style="width: 100%;">
<el-date-picker v-model="formData.jssj" type="datetime" value-format="YYYY-MM-DD HH:mm:ss" placeholder="请输入培训结束时间" style="width: 100%;" />
<el-form-item label="培训时间" prop="kssjJssj" style="width: 100%;">
<el-date-picker v-model="formData.kssjJssj" type="datetimerange" value-format="YYYY-MM-DD HH:mm:ss" start-placeholder="选择开始时间" end-placeholder="选择结束时间" placeholder="请输入培训开始时间" style="width: 100%;" @change="handleTimeChange" />
</el-form-item>
</el-col>
</el-row>
@ -94,7 +89,7 @@
</MyTable>
</div>
<select-personnel-dialog ref="selectPersonnelRef" v-model="visible" @change="handleChange" />
<select-personnel-dialog ref="selectPersonnelRef" v-model="visible" :default-select-keys="defaultSelectKeys" @change="handleChange" />
</div>
</template>
@ -141,12 +136,15 @@ const pageData = reactive({
]
});
const defaultSelectKeys = computed(() => {
return pageData.tableData?.map(i => i.id)
})
const rules = {
xmmc: [{ required: true, message: "请输入培训项目名称", trigger: "change" }],
pxdz: [{ required: true, message: "请输入培训地址", trigger: "change" }],
xxdz: [{ required: true, message: "请输入详细地址", trigger: "change" }],
kssj: [{ required: true, message: "请输入培训开始时间", trigger: "change" }],
jssj: [{ required: true, message: "请输入培训结束时间", trigger: "change" }],
kssjJssj: [{ required: true, message: "请选择开始结束培训时间", trigger: "change" }],
pxrq: [{ required: true, message: "请输入培训日期", trigger: "change" }],
kcmc: [{ required: true, message: "请输入课程名称", trigger: "change" }],
zzdw: [{ required: true, message: "请输入组织单位", trigger: "change" }],
@ -180,6 +178,7 @@ const init = () => {
const close = () => {
FormRef.value.resetFields()
pageData.tableData = []
showDialog.value = false
}
@ -188,18 +187,27 @@ const handleDelItem = (row) => {
pageData.tableData.splice(index, 1)
}
const handleTimeChange = (val) => {
const [start, end] = val
formData.value.kssj = start
formData.value.jssj = end
}
const handleChange = (val) => {
pageData.tableData = [...pageData.tableData, ...val]?.filter((i, index, arr) => arr?.findIndex(s => i?.id === s?.id) === index)
pageData.tableData = [...pageData.tableData, ...val]?.filter((i, index, arr) => arr?.findIndex(s => i?.id === s?.id) === index)
}
const save = () => {
if (pageData.tableData.length === 0) return proxy.$message.warning('请选择培训保安人员')
const ryidList = pageData.tableData?.map(i => i?.id)
const { pxkcList, pxxmid } = formData.value
const { pxkcList, ...rest } = formData.value
FormRef.value.validate( async (valid) => {
if (!valid) return
// 新增项目、修改项目
const url = !formData.value?.id ? `/mosty-base/baxx/pxxm/add` : `/mosty-base/baxx/pxxm/edit`
const res = await qcckPost(formData.value, url)
await qcckPost({ pxkcList, pxxmid: res?.id, ryidList }, !formData.value?.id ? `/mosty-base/baxx/pxkc/saveList` : `/mosty-base/baxx/pxkc/updateList`)
const res = await qcckPost({ ...rest }, url)
// 新增课程、修改课程
await qcckPost({ pxkcList: formData.value.pxkcList, pxxmid: res?.id, ryidList }, !formData.value?.id ? `/mosty-base/baxx/pxkc/saveList` : `/mosty-base/baxx/pxkc/updateList`)
proxy.$message.success('新增培训项目成功')
emits("refresh");
close()

View File

@ -24,7 +24,7 @@
</template>
<script setup>
import { computed, ref, reactive, getCurrentInstance } from 'vue';
import { computed, ref, reactive, getCurrentInstance, watchEffect } from 'vue';
import { qcckPost } from "@/api/qcckApi.js";
import MyTable from '@/components/aboutTable/MyTable.vue';
@ -58,6 +58,7 @@ const pageData = reactive({
tableData: [{}],
keyCount: 0,
tableConfiger: {
rowKey: "id",
rowHieght: 61,
showIndex: false,
showSelectType: "checkBox",
@ -79,6 +80,10 @@ const pageData = reactive({
]
});
watchEffect(() => {
pageData.tableConfiger.defaultSelectKeys = props.defaultSelectKeys
})
const open = async () => {
pageData.tableConfiger.loading = true;
@ -92,6 +97,7 @@ const open = async () => {
pageData.total = res.total
visible.value = true
}
} finally {
pageData.tableConfiger.loading = false
}
@ -99,6 +105,7 @@ const open = async () => {
const handleClose = () => {
selectList.value = []
pageData.tableData = []
visible.value = false
}

View File

@ -69,7 +69,7 @@ const searchConfiger = ref([
]);
const pageData = reactive({
tableData: [{}],
tableData: [],
keyCount: 0,
tableConfiger: {
rowHieght: 61,