Newer
Older
KaiFengPC / src / views / document / dataClassify / operate.vue
@zhangdeliang zhangdeliang on 23 May 6 KB 初始化项目
  1. <template>
  2. <div class="operate">
  3. <el-form
  4. ref="ruleForm"
  5. :model="form"
  6. :rules="rules"
  7. class="dialogForm"
  8. :label-width="90"
  9. :disabled="opts.type === 'view'"
  10. >
  11. <!-- <el-row :gutter="20" v-if="curRow.parentTypeName">
  12. <el-col :span="24">
  13. <el-form-item label="上级名称:">
  14. <el-input
  15. v-model="curRow.parentTypeName"
  16. type="text"
  17. disabled
  18. />
  19. </el-form-item>
  20. </el-col>
  21. </el-row> -->
  22. <el-row :gutter="20">
  23. <el-col :span="24">
  24. <el-form-item label="分类编号:" prop="typeCode">
  25. <el-input
  26. v-model="form.typeCode"
  27. type="text"
  28. placeholder="请输入分类编号"
  29. />
  30. </el-form-item>
  31. </el-col>
  32. </el-row>
  33. <el-row :gutter="20">
  34. <el-col :span="24">
  35. <el-form-item label="分类名称:" prop="typeName">
  36. <el-input
  37. v-model="form.typeName"
  38. type="text"
  39. placeholder="请输入分类名称"
  40. />
  41. </el-form-item>
  42. </el-col>
  43. </el-row>
  44. <el-row :gutter="20">
  45. <el-col :span="24">
  46. <el-form-item label="分类描述:" prop="remark">
  47. <el-input
  48. v-model="form.remark"
  49. type="textarea"
  50. placeholder="请输入分类描述"
  51. resize="none"
  52. :rows="4"
  53. />
  54. </el-form-item>
  55. </el-col>
  56. </el-row>
  57. <el-row :gutter="20">
  58. <el-col :span="24">
  59. <el-form-item label="封面:" prop="cover">
  60. <div class="upload">
  61. <el-upload
  62. class="avatar-uploader"
  63. action="/prod-api/system/upload"
  64. :headers="uploadHeader"
  65. :before-upload="(rawFile) => beforeUpload(rawFile, ['.png', '.jpg', '.jpeg'])"
  66. :on-success="(response) => onSuccess(response, 'cover')"
  67. :on-error="(error, uploadFile, uploadFiles) => onError(error, uploadFile, uploadFiles)"
  68. :show-file-list="false"
  69. accept=".jpg, .png, .jpeg, .svg, .gif"
  70. :disabled="opts.type === 'view' || !!form.cover"
  71. >
  72. <div class="img" v-if="form.cover">
  73. <img :src="form.cover" class="avatar" />
  74. <div class="mask" v-if="opts.type !== 'view'">
  75. <el-icon
  76. class="icon"
  77. :size="20"
  78. @click="removeFile('cover')"
  79. ><Delete /></el-icon>
  80. </div>
  81. </div>
  82. <el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
  83. </el-upload>
  84. </div>
  85. </el-form-item>
  86. </el-col>
  87. </el-row>
  88. </el-form>
  89. </div>
  90. </template>
  91.  
  92. <script setup>
  93. import { reactive, onMounted } from 'vue'
  94. import { inheritAttr } from '@/utils/v3'
  95. import { required } from '@/utils/validate-helper'
  96. import uploadHeader from '@/utils/getUploadHeader'
  97. import { documentTypeAdd, documentTypeEdit, documentTypeDetail } from '@/api/document/dataClassify'
  98. import { fileList } from '@/api/system/file'
  99. const methed = {
  100. add: documentTypeAdd,
  101. edit: documentTypeEdit
  102. }
  103. const { proxy } = getCurrentInstance()
  104. const props = defineProps({
  105. curRow: {
  106. type: Object,
  107. default: () => ({})
  108. },
  109. opts: {
  110. type: Object,
  111. default: () => ({})
  112. }
  113. })
  114. const { curRow, opts } = props
  115. const emit = defineEmits(['close'])
  116. const form = reactive({
  117. typeCode: '',
  118. typeName: '',
  119. remark: '',
  120. cover: '',
  121. sysFileSaveRequestList: []
  122. })
  123.  
  124. const rules = reactive({
  125. typeCode: required('分类编号'),
  126. typeName: required('分类名称'),
  127. remark: required('分类描述')
  128. })
  129.  
  130. const submit = () => {
  131. proxy.$refs.ruleForm.validate(async (valid, fields) => {
  132. if (valid) {
  133. let api = methed[opts.type]
  134. if(!api) return
  135. const params = JSON.parse(JSON.stringify(form))
  136. if(opts.type === 'add'){
  137. params.parentId = curRow.id
  138. } else if(opts.type === 'edit'){
  139. params.id = curRow.id
  140. }
  141. const res = await api(params)
  142. if(res?.code !== 200) return
  143. proxy.$modal.msgSuccess('操作成功')
  144. emit('close', opts)
  145. } else {
  146. console.log('error submit!', fields)
  147. }
  148. })
  149. }
  150.  
  151. const beforeUpload = (rawFile) => {
  152. console.log(rawFile)
  153. if(rawFile.name.length > 50) {
  154. proxy.$modal.msgError(`文件名称过长(50个字符以内),请先修改再上传!`);
  155. return false
  156. }
  157. return true
  158. }
  159.  
  160. const onSuccess = (response, prop) => {
  161. console.log(response)
  162. const { data } = response
  163. form[prop] = data.url
  164. form.sysFileSaveRequestList = [{ ...data, refType: 'document_type_cover' }]
  165. // nextTick(() => {
  166. // proxy.$refs.ruleForm.validateField(prop)
  167. // })
  168.  
  169. }
  170.  
  171. const onError = (error, uploadFile, uploadFiles) => {
  172. console.log(error, uploadFile, uploadFiles)
  173. }
  174.  
  175. const removeFile = (prop) => {
  176. proxy.$modal
  177. .confirm("是否确认删除?")
  178. .then(async () => {
  179. form[prop] = ''
  180. form.sysFileSaveRequestList = []
  181. nextTick(() => {
  182. proxy.$refs.ruleForm.validateField(prop)
  183. })
  184. })
  185. .catch(() => {});
  186. }
  187.  
  188. const getDetail = async () => {
  189. const res = await documentTypeDetail(curRow.id)
  190. if(res?.code !== 200) rteturn
  191. inheritAttr(res.data, form)
  192. getFileInfo(res.data.id, 'document_type_cover', (data) => {
  193. if(!data.length) return
  194. const fileInfo = data[0]
  195. form.cover = fileInfo.url
  196. form.sysFileSaveRequestList = [{ ...fileInfo, refType: 'document_type_cover' }]
  197. })
  198. }
  199.  
  200. const getFileInfo = async (id, refType, callback) => {
  201. const res = await fileList({ refId: id, refType })
  202. if(res?.code !== 200) return
  203. callback && callback(res.data)
  204. }
  205.  
  206. onMounted(() => {
  207. if(['view', 'edit'].includes(opts.type)) getDetail()
  208. })
  209.  
  210. defineExpose({
  211. submit
  212. })
  213. </script>
  214.  
  215. <style lang="scss" scoped>
  216. .upload {
  217. position: relative;
  218. .fileName {
  219. position: absolute;
  220. left: 0;
  221. top: 30px;
  222. white-space: nowrap;
  223. display: flex;
  224. align-items: center;
  225. .del {
  226. flex-shrink: 0;
  227. color: #f56c6c;
  228. cursor: pointer;
  229. margin-left: 10px;
  230. }
  231. }
  232. }
  233. .img {
  234. position: relative;
  235. width: 178px;
  236. height: 178px;
  237. img {
  238. width: 100%;
  239. height: 100%;
  240. }
  241. .mask {
  242. position: absolute;
  243. left: 0;
  244. right: 0;
  245. top: 0;
  246. bottom: 0;
  247. background-color: rgba(0, 0, 0, .5);
  248. display: none;
  249. .icon {
  250. position: absolute;
  251. left: 50%;
  252. top: 50%;
  253. transform: translate(-50%, -50%);
  254. color: #fff;
  255. }
  256. }
  257. &:hover {
  258. .mask {
  259. display: block;
  260. }
  261. }
  262. }
  263. </style>