Newer
Older
KaiFengPC / src / views / document / fileManagement / list / operate.vue
@zhangdeliang zhangdeliang on 23 May 7 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">
  12. <el-col :span="12">
  13. <el-form-item label="文件名称:" prop="fileName">
  14. <el-input
  15. v-model="form.fileName"
  16. type="text"
  17. placeholder="请输入分类名称"
  18. />
  19. </el-form-item>
  20. </el-col>
  21. <el-col :span="12">
  22. <el-form-item label="保密等级:" prop="secretLevel">
  23. <el-select
  24. v-model="form.secretLevel"
  25. placeholder="请选择保密等级"
  26. style="width: 100%"
  27. >
  28. <el-option
  29. v-for="dict in document_secret_level"
  30. :key="dict.value"
  31. :label="dict.label"
  32. :value="dict.value"
  33. />
  34. </el-select>
  35. </el-form-item>
  36. </el-col>
  37. </el-row>
  38. <el-row :gutter="20">
  39. <el-col :span="12">
  40. <el-form-item label="所属分类:" prop="typeId">
  41. <el-tree-select
  42. v-model="form.typeId"
  43. :data="treeData"
  44. node-key="id"
  45. :render-after-expand="false"
  46. :props="{label: 'typeName'}"
  47. check-strictly
  48. style="width: 100%"
  49. />
  50. </el-form-item>
  51. </el-col>
  52. <el-col :span="12">
  53. <el-form-item label="文件标签:" prop="fileTag">
  54. <el-select
  55. v-model="form.fileTag"
  56. placeholder="请选择文件标签"
  57. clearable
  58. style="width: 100%"
  59. multiple
  60. >
  61. <el-option
  62. v-for="dict in document_tag"
  63. :key="dict.value"
  64. :label="dict.label"
  65. :value="dict.value"
  66. />
  67. </el-select>
  68. </el-form-item>
  69. </el-col>
  70. </el-row>
  71. <el-row :gutter="20">
  72. <el-col :span="12">
  73. <el-form-item label="电子档:" prop="sysFileSaveRequestList">
  74. <FileUpload
  75. v-model="form.sysFileSaveRequestList"
  76. :limit="1"
  77. :isBackName="true"
  78. :disabled="opts.type === 'view'"
  79. @preview="handlePreview"
  80. />
  81. </el-form-item>
  82. </el-col>
  83. <el-col :span="12">
  84. <el-form-item label="纸质原件:" prop="saveAddressId">
  85. <el-select
  86. v-model="form.saveAddressId"
  87. placeholder="请选择纸质原件存放地址"
  88. style="width: 100%"
  89. clearable
  90. >
  91. <el-option
  92. v-for="item in documentSaveAddressList"
  93. :key="item.id"
  94. :label="item.addressName"
  95. :value="item.id"
  96. />
  97. </el-select>
  98. </el-form-item>
  99. </el-col>
  100. </el-row>
  101. <el-row :gutter="20">
  102. <el-col :span="8">
  103. <el-form-item label="电子档名称:">
  104. <el-input
  105. :model-value="fileInfo.name"
  106. type="text"
  107. disabled
  108. />
  109. </el-form-item>
  110. </el-col>
  111. <el-col :span="8">
  112. <el-form-item label="电子档格式:">
  113. <el-input
  114. :model-value="fileInfo.extension"
  115. type="text"
  116. disabled
  117. />
  118. </el-form-item>
  119. </el-col>
  120. <el-col :span="8">
  121. <el-form-item label="电子档大小:">
  122. <el-input
  123. :model-value="handleFileSize(fileInfo.size)"
  124. type="text"
  125. disabled
  126. />
  127. </el-form-item>
  128. </el-col>
  129. </el-row>
  130. <el-row :gutter="20">
  131. <el-col :span="24">
  132. <el-form-item label="文件描述:" prop="remark">
  133. <el-input
  134. v-model="form.remark"
  135. type="textarea"
  136. placeholder="请输入文件描述"
  137. resize="none"
  138. :rows="4"
  139. />
  140. </el-form-item>
  141. </el-col>
  142. </el-row>
  143. </el-form>
  144. </div>
  145. </template>
  146.  
  147. <script setup>
  148. import { ref, reactive, onMounted, watch } from 'vue'
  149. import { inheritAttr } from '@/utils/v3'
  150. import { required } from '@/utils/validate-helper'
  151. import { handleFileSize } from '@/utils'
  152. import {
  153. getDocumentSaveAddressList,
  154. documentFileAdd,
  155. documentFileEdit,
  156. documentFileDetail
  157. } from '@/api/document/fileManagement/list'
  158. import { documentAccessRecordAdd } from '@/api/document/fileManagement/loanRecord'
  159. import { documentTypeTree } from '@/api/document/dataClassify'
  160. import FileUpload from '@/components/FileUpload'
  161. import { fileList } from '@/api/system/file'
  162. const methed = {
  163. add: documentFileAdd,
  164. edit: documentFileEdit
  165. }
  166.  
  167. const { proxy } = getCurrentInstance()
  168. const {
  169. document_secret_level,
  170. document_tag,
  171. document_save_type
  172. } = proxy.useDict('document_secret_level', 'document_tag', 'document_save_type')
  173.  
  174. const props = defineProps({
  175. curRow: {
  176. type: Object,
  177. default: () => ({})
  178. },
  179. opts: {
  180. type: Object,
  181. default: () => ({})
  182. }
  183. })
  184. const { curRow, opts } = props
  185. const emit = defineEmits(['close'])
  186. const treeData = ref([])
  187. const form = reactive({
  188. id: curRow.id || '',
  189. fileName: '',
  190. secretLevel: '',
  191. saveType: '',
  192. saveAddressId: '',
  193. typeId: '',
  194. fileTag: [],
  195. remark: '',
  196. sysFileSaveRequestList: []
  197. })
  198. watch(() => form.sysFileSaveRequestList, (val) => {
  199. if(val[0]){
  200. val[0].refType = 'document_file_attachment'
  201. }
  202. fileInfo.value = val[0] || {}
  203. nextTick(() => {
  204. proxy.$refs.ruleForm.validateField('sysFileSaveRequestList')
  205. })
  206. })
  207. const fileInfo = ref({})
  208.  
  209. const rules = reactive({
  210. fileName: required('文件名称'),
  211. secretLevel: required('保密等级'),
  212. typeId: required('所属分类'),
  213. fileTag: required('文件标签'),
  214. sysFileSaveRequestList: required('电子档')
  215. })
  216.  
  217. const documentSaveAddressList = ref([])
  218.  
  219. const submit = () => {
  220. proxy.$refs.ruleForm.validate(async (valid, fields) => {
  221. if (valid) {
  222. let api = methed[opts.type]
  223. if(!api) return
  224. let saveType = 'electronic'
  225. if(form.saveAddressId){
  226. saveType = 'electronic,paper'
  227. }
  228. const params = {
  229. ...form,
  230. fileTag: form.fileTag.join(),
  231. saveType
  232. }
  233. const res = await api(params)
  234. if(res?.code !== 200) return
  235. proxy.$modal.msgSuccess('操作成功')
  236. emit('close', opts)
  237. } else {
  238. console.log('error submit!', fields)
  239. }
  240. })
  241. }
  242.  
  243. const getDocumentSaveAddressListFn = async () => {
  244. const res = await getDocumentSaveAddressList()
  245. if(res?.code !== 200) return
  246. documentSaveAddressList.value = res.data || []
  247. }
  248.  
  249. const getTreeData = async () => {
  250. const res = await documentTypeTree()
  251. if(res?.code !== 200) return
  252. treeData.value = res.data || []
  253. }
  254.  
  255. const getDetail = async () => {
  256. const res = await documentFileDetail(curRow.id)
  257. if(res?.code !== 200) return
  258. inheritAttr(res.data, form)
  259. form.fileTag = form.fileTag ? form.fileTag.split(',') : []
  260. getFileInfo(res.data.id, 'document_file_attachment', (data) => {
  261. if(!data.length) return
  262. const fileInfo = data[0]
  263. form.sysFileSaveRequestList = [{ ...fileInfo, refType: 'document_file_attachment' }]
  264. })
  265. }
  266.  
  267. const getFileInfo = async (id, refType, callback) => {
  268. const res = await fileList({ refId: id, refType })
  269. if(res?.code !== 200) return
  270. callback && callback(res.data)
  271. }
  272.  
  273. const handlePreview = () => {
  274. console.log(form.id)
  275. documentAccessRecordAdd({
  276. fileId: form.id
  277. })
  278. }
  279.  
  280. onMounted(() => {
  281. getDocumentSaveAddressListFn()
  282. getTreeData()
  283. if(curRow?.id) getDetail()
  284. })
  285.  
  286. defineExpose({
  287. submit
  288. })
  289. </script>
  290.  
  291. <style lang="scss" scoped>
  292.  
  293. </style>