forked from wangjiadong/comp
Gitea
5 months ago
parent
0e86c3ffc8
commit
8313a6c122
11 changed files with 738 additions and 2 deletions
@ -0,0 +1,260 @@ |
||||
<template> |
||||
<div class="clearfix"> |
||||
<a-upload |
||||
:listType="listType" |
||||
accept="image/*" |
||||
:multiple="multiple" |
||||
:action="uploadUrlzs" |
||||
:headers="headers" |
||||
:data="{ biz: bizPath }" |
||||
v-model:fileList="uploadFileList" |
||||
:beforeUpload="beforeUpload" |
||||
:disabled="disabled" |
||||
@change="handleChange" |
||||
@preview="handlePreview" |
||||
> |
||||
<div v-if="uploadVisible"> |
||||
<div v-if="listType == 'picture-card'"> |
||||
<LoadingOutlined v-if="loading" /> |
||||
<UploadOutlined v-else /> |
||||
<div class="ant-upload-text">{{ text }}</div> |
||||
</div> |
||||
<a-button v-if="listType == 'picture'" :disabled="disabled"> |
||||
<UploadOutlined></UploadOutlined> |
||||
{{ text }} |
||||
</a-button> |
||||
</div> |
||||
</a-upload> |
||||
<a-modal :visible="previewVisible" :footer="null" @cancel="handleCancel()"> |
||||
<img alt="example" style="width: 100%" :src="previewImage" /> |
||||
</a-modal> |
||||
</div> |
||||
</template> |
||||
<script lang="ts"> |
||||
import { defineComponent, PropType, ref, reactive, watchEffect, computed, unref, watch, onMounted } from 'vue'; |
||||
import { LoadingOutlined, UploadOutlined } from '@ant-design/icons-vue'; |
||||
import { useRuleFormItem } from '/@/hooks/component/useFormItem'; |
||||
import { propTypes } from '/@/utils/propTypes'; |
||||
import { useAttrs } from '/@/hooks/core/useAttrs'; |
||||
import { useMessage } from '/@/hooks/web/useMessage'; |
||||
import { getFileAccessHttpUrlzs, getRandom } from '/@/utils/common/compUtils'; |
||||
import { uploadUrlzs } from '/@/api/common/api'; |
||||
import { getToken } from '/@/utils/auth'; |
||||
|
||||
const { createMessage, createErrorModal } = useMessage(); |
||||
export default defineComponent({ |
||||
name: 'JImageUpload', |
||||
components: { LoadingOutlined, UploadOutlined }, |
||||
inheritAttrs: false, |
||||
props: { |
||||
//绑定值 |
||||
value: propTypes.oneOfType([propTypes.string, propTypes.array]), |
||||
//按钮文本 |
||||
listType: { |
||||
type: String, |
||||
required: false, |
||||
default: 'picture-card', |
||||
}, |
||||
//按钮文本 |
||||
text: { |
||||
type: String, |
||||
required: false, |
||||
default: '上传', |
||||
}, |
||||
//这个属性用于控制文件上传的业务路径 |
||||
bizPath: { |
||||
type: String, |
||||
required: false, |
||||
default: 'temp', |
||||
}, |
||||
//是否禁用 |
||||
disabled: { |
||||
type: Boolean, |
||||
required: false, |
||||
default: false, |
||||
}, |
||||
//上传数量 |
||||
fileMax: { |
||||
type: Number, |
||||
required: false, |
||||
default: 1, |
||||
}, |
||||
}, |
||||
emits: ['options-change', 'change', 'update:value'], |
||||
setup(props, { emit, refs }) { |
||||
const emitData = ref<any[]>([]); |
||||
const attrs = useAttrs(); |
||||
const [state] = useRuleFormItem(props, 'value', 'change', emitData); |
||||
//获取文件名 |
||||
const getFileName = (path) => { |
||||
if (path.lastIndexOf('\\') >= 0) { |
||||
let reg = new RegExp('\\\\', 'g'); |
||||
path = path.replace(reg, '/'); |
||||
} |
||||
return path.substring(path.lastIndexOf('/') + 1); |
||||
}; |
||||
//token |
||||
const headers = ref<object>({ |
||||
'X-Access-Token': getToken(), |
||||
}); |
||||
//上传状态 |
||||
const loading = ref<boolean>(false); |
||||
//是否是初始化加载 |
||||
const initTag = ref<boolean>(true); |
||||
//文件列表 |
||||
let uploadFileList = ref<any[]>([]); |
||||
//预览图 |
||||
const previewImage = ref<string | undefined>(''); |
||||
//预览框状态 |
||||
const previewVisible = ref<boolean>(false); |
||||
|
||||
//计算是否开启多图上传 |
||||
const multiple = computed(() => { |
||||
return props['fileMax'] > 1; |
||||
}); |
||||
|
||||
//计算是否可以继续上传 |
||||
const uploadVisible = computed(() => { |
||||
return uploadFileList.value.length < props['fileMax']; |
||||
}); |
||||
|
||||
/** |
||||
* 监听value变化 |
||||
*/ |
||||
watch( |
||||
() => props.value, |
||||
(val, prevCount) => { |
||||
//update-begin---author:liusq ---date:20230601 for：【issues/556】JImageUpload组件value赋初始值没显示图片------------ |
||||
if (val && val instanceof Array) { |
||||
val = val.join(','); |
||||
} |
||||
if (initTag.value == true) { |
||||
initFileList(val); |
||||
} |
||||
}, |
||||
{ immediate: true } |
||||
//update-end---author:liusq ---date:20230601 for：【issues/556】JImageUpload组件value赋初始值没显示图片------------ |
||||
); |
||||
|
||||
/** |
||||
* 初始化文件列表 |
||||
*/ |
||||
function initFileList(paths) { |
||||
if (!paths || paths.length == 0) { |
||||
uploadFileList.value = []; |
||||
return; |
||||
} |
||||
let files = []; |
||||
let arr = paths.split(','); |
||||
arr.forEach((value) => { |
||||
let url = getFileAccessHttpUrlzs(value); |
||||
files.push({ |
||||
uid: getRandom(10), |
||||
name: getFileName(value), |
||||
status: 'done', |
||||
url: url, |
||||
response: { |
||||
status: 'history', |
||||
message: value, |
||||
}, |
||||
}); |
||||
}); |
||||
uploadFileList.value = files; |
||||
} |
||||
|
||||
/** |
||||
* 上传前校验 |
||||
*/ |
||||
function beforeUpload(file) { |
||||
let fileType = file.type; |
||||
if (fileType.indexOf('image') < 0) { |
||||
createMessage.info('请上传图片'); |
||||
return false; |
||||
} |
||||
} |
||||
/** |
||||
* 文件上传结果回调 |
||||
*/ |
||||
function handleChange({ file, fileList, event }) { |
||||
initTag.value = false; |
||||
uploadFileList.value = fileList; |
||||
if (file.status === 'error') { |
||||
createMessage.error(`${file.name} 上传失败.`); |
||||
} |
||||
let fileUrls = []; |
||||
//上传完成 |
||||
if (file.status != 'uploading') { |
||||
fileList.forEach((file) => { |
||||
if (file.status === 'done') { |
||||
//update-begin---author:wangshuai ---date:20221121 for：[issues/248]原生表单内使用图片组件,关闭弹窗图片组件值不会被清空------------ |
||||
initTag.value = true; |
||||
//update-end---author:wangshuai ---date:20221121 for：[issues/248]原生表单内使用图片组件,关闭弹窗图片组件值不会被清空------------ |
||||
fileUrls.push(file.response.message); |
||||
} |
||||
}); |
||||
if (file.status === 'removed') { |
||||
handleDelete(file); |
||||
} |
||||
} |
||||
// emitData.value = fileUrls.join(','); |
||||
state.value = fileUrls.join(','); |
||||
emit('update:value', fileUrls.join(',')); |
||||
} |
||||
|
||||
/** |
||||
* 删除图片 |
||||
*/ |
||||
function handleDelete(file) { |
||||
//如有需要新增 删除逻辑 |
||||
console.log(file); |
||||
} |
||||
|
||||
/** |
||||
* 预览图片 |
||||
*/ |
||||
function handlePreview(file) { |
||||
previewImage.value = file.url || file.thumbUrl; |
||||
previewVisible.value = true; |
||||
} |
||||
|
||||
function getAvatarView() { |
||||
if (uploadFileList.length > 0) { |
||||
let url = uploadFileList[0].url; |
||||
return getFileAccessHttpUrlzs(url, null); |
||||
} |
||||
} |
||||
|
||||
function handleCancel() { |
||||
previewVisible.value = false; |
||||
} |
||||
|
||||
return { |
||||
state, |
||||
attrs, |
||||
previewImage, |
||||
previewVisible, |
||||
uploadFileList, |
||||
multiple, |
||||
headers, |
||||
loading, |
||||
uploadUrlzs, |
||||
beforeUpload, |
||||
uploadVisible, |
||||
handlePreview, |
||||
handleCancel, |
||||
handleChange, |
||||
}; |
||||
}, |
||||
}); |
||||
</script> |
||||
<style scoped> |
||||
.ant-upload-select-picture-card i { |
||||
font-size: 32px; |
||||
color: #999; |
||||
} |
||||
|
||||
.ant-upload-select-picture-card .ant-upload-text { |
||||
margin-top: 8px; |
||||
color: #666; |
||||
} |
||||
</style> |
||||
@ -0,0 +1,148 @@ |
||||
<template> |
||||
<a-spin :spinning="confirmLoading"> |
||||
<a-form ref="formRef" class="antd-modal-form" :labelCol="labelCol" :wrapperCol="wrapperCol"> |
||||
<a-row> |
||||
<a-col :span="12"> |
||||
<a-form-item label="上传证书" v-bind="validateInfos.sczs" :label-col="{ span: 10, offset: 1 }"> |
||||
<j-image-upload v-model:value="formData.sczs" :disabled="disabled" /> |
||||
</a-form-item> |
||||
</a-col> |
||||
<!-- <a-col :span="24"> |
||||
<a-form-item label="状态" v-bind="validateInfos.status"> |
||||
<j-dict-select-tag v-model:value="formData.status" dictCode="sh_status" placeholder="请选择状态" :disabled="disabled"/> |
||||
</a-form-item> |
||||
</a-col>--> |
||||
<!-- <a-col :span="24"> |
||||
<a-form-item label="奖项" v-bind="validateInfos.awardid"> |
||||
<a-input v-model:value="formData.awardid" placeholder="请输入奖项" :disabled="disabled"></a-input> |
||||
</a-form-item> |
||||
</a-col>--> |
||||
</a-row> |
||||
</a-form> |
||||
</a-spin> |
||||
</template> |
||||
|
||||
<script lang="ts" setup> |
||||
import { ref, reactive, defineExpose, nextTick, defineProps, computed, onMounted,watch } from 'vue'; |
||||
import { defHttp } from '/@/utils/http/axios'; |
||||
import { useMessage } from '/@/hooks/web/useMessage'; |
||||
import JDictSelectTag from '/@/components/Form/src/jeecg/components/JDictSelectTag.vue'; |
||||
import JSearchSelect from '/@/components/Form/src/jeecg/components/JSearchSelect.vue'; |
||||
import { getValueType } from '/@/utils'; |
||||
import { sczs,queryCompId } from '../AwardPersion.api'; |
||||
import { Form } from 'ant-design-vue'; |
||||
import { duplicateValidate } from '/@/utils/helper/validator' |
||||
import JImageUpload from '/@/components/Form/src/jeecg/components/JImageUploadzs.vue'; |
||||
|
||||
let strst = ref(); |
||||
let ndbsxm = ref(); |
||||
let options= ref(); |
||||
const props = defineProps({ |
||||
formDisabled: { type: Boolean, default: false }, |
||||
formData: { type: Object, default: ()=>{} }, |
||||
formBpm: { type: Boolean, default: true } |
||||
}); |
||||
const formRef = ref(); |
||||
const useForm = Form.useForm; |
||||
const emit = defineEmits(['register', 'ok']); |
||||
const formData = reactive<Record<string, any>>({ |
||||
id: '', |
||||
sczs: '', |
||||
}); |
||||
const { createMessage } = useMessage(); |
||||
const labelCol = ref<any>({ xs: { span: 24 }, sm: { span: 5 } }); |
||||
const wrapperCol = ref<any>({ xs: { span: 24 }, sm: { span: 16 } }); |
||||
const confirmLoading = ref<boolean>(false); |
||||
//表单验证 |
||||
const validatorRules = { |
||||
sczs: [{ required: true, message: '请上传证书!' }], |
||||
}; |
||||
const { resetFields, validate, validateInfos } = useForm(formData, validatorRules, { immediate: true }); |
||||
|
||||
// 表单禁用 |
||||
const disabled = computed(()=>{ |
||||
if(props.formBpm === true){ |
||||
if(props.formData.disabled === false){ |
||||
return false; |
||||
}else{ |
||||
return true; |
||||
} |
||||
} |
||||
return props.formDisabled; |
||||
}); |
||||
|
||||
/** |
||||
* 新增 |
||||
*/ |
||||
function add(record) { |
||||
edit(record); |
||||
} |
||||
|
||||
/** |
||||
* 编辑 |
||||
*/ |
||||
function edit(record) { |
||||
nextTick(() => { |
||||
resetFields(); |
||||
//赋值 |
||||
Object.assign(formData, record); |
||||
}); |
||||
} |
||||
|
||||
/** |
||||
* 提交数据 |
||||
*/ |
||||
async function submitForm() { |
||||
// 触发表单验证 |
||||
await validate(); |
||||
confirmLoading.value = true; |
||||
const isUpdate = ref<boolean>(false); |
||||
//时间格式化 |
||||
let model = formData; |
||||
/* let awardsort = model.awardname; |
||||
let awardname = model.awardsort; |
||||
model.awardname = awardname; |
||||
model.awardsort = awardsort;*/ |
||||
if (model.id) { |
||||
isUpdate.value = true; |
||||
} |
||||
//循环数据 |
||||
for (let data in model) { |
||||
//如果该数据是数组并且是字符串类型 |
||||
if (model[data] instanceof Array) { |
||||
let valueType = getValueType(formRef.value.getProps, data); |
||||
//如果是字符串类型的需要变成以逗号分割的字符串 |
||||
if (valueType === 'string') { |
||||
model[data] = model[data].join(','); |
||||
} |
||||
} |
||||
} |
||||
await sczs(model, isUpdate.value) |
||||
.then((res) => { |
||||
if (res.success) { |
||||
createMessage.success(res.message); |
||||
emit('ok'); |
||||
} else { |
||||
createMessage.warning(res.message); |
||||
} |
||||
}) |
||||
.finally(() => { |
||||
confirmLoading.value = false; |
||||
}); |
||||
} |
||||
|
||||
|
||||
defineExpose({ |
||||
add, |
||||
edit, |
||||
submitForm, |
||||
}); |
||||
</script> |
||||
|
||||
<style lang="less" scoped> |
||||
.antd-modal-form { |
||||
min-height: 500px !important; |
||||
overflow-y: auto; |
||||
padding: 24px 24px 24px 24px; |
||||
} |
||||
</style> |
||||
@ -0,0 +1,75 @@ |
||||
<template> |
||||
<a-modal :title="title" :width="width" :visible="visible" @ok="handleOk" :okButtonProps="{ class: { 'jee-hidden': disableSubmit } }" @cancel="handleCancel" cancelText="关闭"> |
||||
<AwardPersionForm2 ref="registerForm" @ok="submitCallback" :formDisabled="disableSubmit" :formBpm="false"></AwardPersionForm2> |
||||
</a-modal> |
||||
</template> |
||||
|
||||
<script lang="ts" setup> |
||||
import { ref, nextTick, defineExpose } from 'vue'; |
||||
import AwardPersionForm2 from './AwardPersionForm2.vue' |
||||
|
||||
const title = ref<string>(''); |
||||
const width = ref<number>(400); |
||||
const visible = ref<boolean>(false); |
||||
const disableSubmit = ref<boolean>(false); |
||||
const registerForm = ref(); |
||||
const emit = defineEmits(['register', 'success']); |
||||
|
||||
/** |
||||
* 新增 |
||||
*/ |
||||
function add(record) { |
||||
title.value = '上传证书'; |
||||
visible.value = true; |
||||
nextTick(() => { |
||||
registerForm.value.add(record); |
||||
}); |
||||
} |
||||
|
||||
/** |
||||
* 编辑 |
||||
* @param record |
||||
*/ |
||||
function edit(record) { |
||||
title.value = disableSubmit.value ? '详情' : '编辑'; |
||||
visible.value = true; |
||||
nextTick(() => { |
||||
registerForm.value.edit(record); |
||||
}); |
||||
} |
||||
|
||||
/** |
||||
* 确定按钮点击事件 |
||||
*/ |
||||
function handleOk() { |
||||
registerForm.value.submitForm(); |
||||
} |
||||
|
||||
/** |
||||
* form保存回调事件 |
||||
*/ |
||||
function submitCallback() { |
||||
handleCancel(); |
||||
emit('success'); |
||||
} |
||||
|
||||
/** |
||||
* 取消按钮回调事件 |
||||
*/ |
||||
function handleCancel() { |
||||
visible.value = false; |
||||
} |
||||
|
||||
defineExpose({ |
||||
add, |
||||
edit, |
||||
disableSubmit, |
||||
}); |
||||
</script> |
||||
|
||||
<style> |
||||
/**隐藏样式-modal确定按钮 */ |
||||
.jee-hidden { |
||||
display: none !important; |
||||
} |
||||
</style> |
||||
Loading…
Reference in new issue