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