- <template>
- <div class="operate">
- <el-form
- ref="ruleForm"
- :model="form"
- :rules="rules"
- class="dialogForm"
- :label-width="90"
- :disabled="opts.type === 'view'"
- >
- <!-- <el-row :gutter="20" v-if="curRow.parentTypeName">
- <el-col :span="24">
- <el-form-item label="上级名称:">
- <el-input
- v-model="curRow.parentTypeName"
- type="text"
- disabled
- />
- </el-form-item>
- </el-col>
- </el-row> -->
- <el-row :gutter="20">
- <el-col :span="24">
- <el-form-item label="分类编号:" prop="typeCode">
- <el-input
- v-model="form.typeCode"
- type="text"
- placeholder="请输入分类编号"
- />
- </el-form-item>
- </el-col>
- </el-row>
- <el-row :gutter="20">
- <el-col :span="24">
- <el-form-item label="分类名称:" prop="typeName">
- <el-input
- v-model="form.typeName"
- type="text"
- placeholder="请输入分类名称"
- />
- </el-form-item>
- </el-col>
- </el-row>
- <el-row :gutter="20">
- <el-col :span="24">
- <el-form-item label="分类描述:" prop="remark">
- <el-input
- v-model="form.remark"
- type="textarea"
- placeholder="请输入分类描述"
- resize="none"
- :rows="4"
- />
- </el-form-item>
- </el-col>
- </el-row>
- <el-row :gutter="20">
- <el-col :span="24">
- <el-form-item label="封面:" prop="cover">
- <div class="upload">
- <el-upload
- class="avatar-uploader"
- action="/prod-api/system/upload"
- :headers="uploadHeader"
- :before-upload="(rawFile) => beforeUpload(rawFile, ['.png', '.jpg', '.jpeg'])"
- :on-success="(response) => onSuccess(response, 'cover')"
- :on-error="(error, uploadFile, uploadFiles) => onError(error, uploadFile, uploadFiles)"
- :show-file-list="false"
- accept=".jpg, .png, .jpeg, .svg, .gif"
- :disabled="opts.type === 'view' || !!form.cover"
- >
- <div class="img" v-if="form.cover">
- <img :src="form.cover" class="avatar" />
- <div class="mask" v-if="opts.type !== 'view'">
- <el-icon
- class="icon"
- :size="20"
- @click="removeFile('cover')"
- ><Delete /></el-icon>
- </div>
- </div>
- <el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
- </el-upload>
- </div>
- </el-form-item>
- </el-col>
- </el-row>
- </el-form>
- </div>
- </template>
-
- <script setup>
- import { reactive, onMounted } from 'vue'
- import { inheritAttr } from '@/utils/v3'
- import { required } from '@/utils/validate-helper'
- import uploadHeader from '@/utils/getUploadHeader'
- import { documentTypeAdd, documentTypeEdit, documentTypeDetail } from '@/api/document/dataClassify'
- import { fileList } from '@/api/system/file'
- const methed = {
- add: documentTypeAdd,
- edit: documentTypeEdit
- }
- const { proxy } = getCurrentInstance()
- const props = defineProps({
- curRow: {
- type: Object,
- default: () => ({})
- },
- opts: {
- type: Object,
- default: () => ({})
- }
- })
- const { curRow, opts } = props
- const emit = defineEmits(['close'])
- const form = reactive({
- typeCode: '',
- typeName: '',
- remark: '',
- cover: '',
- sysFileSaveRequestList: []
- })
-
- const rules = reactive({
- typeCode: required('分类编号'),
- typeName: required('分类名称'),
- remark: required('分类描述')
- })
-
- const submit = () => {
- proxy.$refs.ruleForm.validate(async (valid, fields) => {
- if (valid) {
- let api = methed[opts.type]
- if(!api) return
- const params = JSON.parse(JSON.stringify(form))
- if(opts.type === 'add'){
- params.parentId = curRow.id
- } else if(opts.type === 'edit'){
- params.id = curRow.id
- }
- const res = await api(params)
- if(res?.code !== 200) return
- proxy.$modal.msgSuccess('操作成功')
- emit('close', opts)
- } else {
- console.log('error submit!', fields)
- }
- })
- }
-
- const beforeUpload = (rawFile) => {
- console.log(rawFile)
- if(rawFile.name.length > 50) {
- proxy.$modal.msgError(`文件名称过长(50个字符以内),请先修改再上传!`);
- return false
- }
- return true
- }
-
- const onSuccess = (response, prop) => {
- console.log(response)
- const { data } = response
- form[prop] = data.url
- form.sysFileSaveRequestList = [{ ...data, refType: 'document_type_cover' }]
- // nextTick(() => {
- // proxy.$refs.ruleForm.validateField(prop)
- // })
-
- }
-
- const onError = (error, uploadFile, uploadFiles) => {
- console.log(error, uploadFile, uploadFiles)
- }
-
- const removeFile = (prop) => {
- proxy.$modal
- .confirm("是否确认删除?")
- .then(async () => {
- form[prop] = ''
- form.sysFileSaveRequestList = []
- nextTick(() => {
- proxy.$refs.ruleForm.validateField(prop)
- })
- })
- .catch(() => {});
- }
-
- const getDetail = async () => {
- const res = await documentTypeDetail(curRow.id)
- if(res?.code !== 200) rteturn
- inheritAttr(res.data, form)
- getFileInfo(res.data.id, 'document_type_cover', (data) => {
- if(!data.length) return
- const fileInfo = data[0]
- form.cover = fileInfo.url
- form.sysFileSaveRequestList = [{ ...fileInfo, refType: 'document_type_cover' }]
- })
- }
-
- const getFileInfo = async (id, refType, callback) => {
- const res = await fileList({ refId: id, refType })
- if(res?.code !== 200) return
- callback && callback(res.data)
- }
-
- onMounted(() => {
- if(['view', 'edit'].includes(opts.type)) getDetail()
- })
-
- defineExpose({
- submit
- })
- </script>
-
- <style lang="scss" scoped>
- .upload {
- position: relative;
- .fileName {
- position: absolute;
- left: 0;
- top: 30px;
- white-space: nowrap;
- display: flex;
- align-items: center;
- .del {
- flex-shrink: 0;
- color: #f56c6c;
- cursor: pointer;
- margin-left: 10px;
- }
- }
- }
- .img {
- position: relative;
- width: 178px;
- height: 178px;
- img {
- width: 100%;
- height: 100%;
- }
- .mask {
- position: absolute;
- left: 0;
- right: 0;
- top: 0;
- bottom: 0;
- background-color: rgba(0, 0, 0, .5);
- display: none;
- .icon {
- position: absolute;
- left: 50%;
- top: 50%;
- transform: translate(-50%, -50%);
- color: #fff;
- }
- }
- &:hover {
- .mask {
- display: block;
- }
- }
- }
- </style>