index.vue 15 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468
  1. <template>
  2. <div class="view-table-content">
  3. <div class="view-dataSpecies-left">
  4. <MenuTree :currentNodeKey="currentNodeKey" nodeKey="id" :treedata="menuTreeData" @TreeNodeclick="treeNodeClick" v-bind="treeObj"> </MenuTree>
  5. </div>
  6. <div class="view-dataSpecies-right">
  7. <div class="view-dataType-title">
  8. <div class="view-dataType-title-btn">
  9. <el-button type="success" @click="openDialog()" :disabled="!(currentNode.type == 1 && currentNode.children.length == 0)">新增</el-button>
  10. <el-button type="warning" @click="remove(tableCheckItems)" :disabled="tableCheckItems.length == 0">删除</el-button>
  11. <el-button type="primary">导入</el-button>
  12. <!-- @click="handleImport" @click="handleExport"-->
  13. <el-button type="primary">导出</el-button>
  14. </div>
  15. <div class="view-dataType-title-search">
  16. <el-input placeholder="请输入架次号" v-model="keyWordData" class="input1">
  17. <el-button slot="append" icon="el-icon-search" @click="searchClick"></el-button>
  18. </el-input>
  19. </div>
  20. </div>
  21. <div class="view-dataType-table">
  22. <LTable ref="table" @selection-change="selection" :defaultFetch="false" :fetch="fetch" :columns="columns" :dataSource="tableData" :options="options" :pagination="tableRequset"></LTable>
  23. </div>
  24. <!-- 添加或修改飞参数据信息对话框 -->
  25. <el-dialog :title="dialogTitle" :visible.sync="dialogVisible" width="600px" :before-close="handleClose">
  26. <el-form ref="form" :model="form" label-width="80px">
  27. <!-- <el-form-item label="文件编号" prop="ossId">
  28. <el-input v-model="form.ossId" placeholder="请输入文件编号" />
  29. </el-form-item> -->
  30. <el-form-item label="数据源" prop="source">
  31. <el-input v-model="form.source" placeholder="请输入数据源" disabled />
  32. </el-form-item>
  33. <el-form-item label="机型" prop="aircaftModel">
  34. <el-select v-model="form.aircaftModel" placeholder="请选择机型" disabled>
  35. <el-option v-for="item in aircaftModelAll" :key="item.aircaftModelId" :label="item.aircaftModelName" :value="item.aircaftModelId"> </el-option>
  36. </el-select>
  37. </el-form-item>
  38. <!-- 编目 = 机号 -->
  39. <el-form-item label="编目" prop="aircraftId">
  40. <el-select v-model="form.aircraftId" placeholder="请选择编目" disabled>
  41. <el-option v-for="item in aircaftCatalogAll" :key="item.aircaftCatalogId" :label="item.aircaftCatalogCode" :value="item.aircaftCatalogId"> </el-option>
  42. </el-select>
  43. </el-form-item>
  44. <el-form-item label="架次号" prop="sortieNo">
  45. <el-input v-model="form.sortieNo" placeholder="请输入架次号" />
  46. </el-form-item>
  47. <el-form-item label="飞行日期" prop="flightDate">
  48. <el-date-picker v-model="form.flightDate" type="date" value-format="yyyy-MM-dd" placement="bottom-start" placeholder="请选择飞行日期"> </el-date-picker>
  49. </el-form-item>
  50. <el-form-item label="数据导入" prop="ossId">
  51. <FileUpload v-model="form.ossId" :limit="1" :fileSize="500" :fileType="['xls', 'xlsx']" />
  52. </el-form-item>
  53. </el-form>
  54. <span slot="footer" class="dialog-footer">
  55. <el-button @click="handleClose">取 消</el-button>
  56. <el-button type="primary" @click="submit">确 定</el-button>
  57. </span>
  58. </el-dialog>
  59. </div>
  60. <!-- <ImportExcel ref="dialogRef" /> -->
  61. <el-dialog :title="upload.title" :visible.sync="upload.open" width="400px" append-to-body>
  62. <el-upload ref="upload" :limit="1" accept=".xlsx, .xls" :headers="upload.headers" :action="upload.url" :disabled="upload.isUploading" :on-progress="handleFileUploadProgress" :on-success="handleFileSuccess" :auto-upload="false" drag>
  63. <i class="el-icon-upload"></i>
  64. <div class="el-upload__text">将文件拖到此处,或<em>点击上传</em></div>
  65. <div class="el-upload__tip text-center" slot="tip">
  66. <div class="el-upload__tip" slot="tip"><el-checkbox v-model="upload.updateSupport" /> 是否更新已经存在的用户数据</div>
  67. <span>仅允许导入xls、xlsx格式文件。</span>
  68. <el-link type="primary" :underline="false" style="font-size: 12px; vertical-align: baseline" @click="importTemplate">下载模板</el-link>
  69. </div>
  70. </el-upload>
  71. <div slot="footer" class="dialog-footer">
  72. <el-button type="primary" @click="submitFileForm">确 定</el-button>
  73. <el-button @click="upload.open = false">取 消</el-button>
  74. </div>
  75. </el-dialog>
  76. </div>
  77. </template>
  78. <script>
  79. import { getDataImport, addDataImport, updateDataImport, removeDataImport } from '@/api/als/dataImport'
  80. import { getAircaftCatalogTree, getAircaftTypeAndModelTree } from '@/api/als/sideTree'
  81. import { getAircaftModelAll, getAircaftCatalogAll } from '@/api/als/aircraft'
  82. import { deepClone, debounce } from '@/utils/index'
  83. import { getItem } from '@/utils/index'
  84. // import ImportExcel from '@/api/als/ImportExcel/index.vue'
  85. export default {
  86. name: 'MDCData',
  87. // components: { ImportExcel },
  88. data() {
  89. // 这里存放数据
  90. return {
  91. dialogTitle: '新增',
  92. dialogVisible: false,
  93. keyWordData: '',
  94. aircaftModelIdList: [],
  95. currentNodeKey: '',
  96. currentNode: {},
  97. menuTreeData: [],
  98. treeObj: {
  99. title: '所属机种',
  100. activityheight: '275px',
  101. searchIcon: false,
  102. configure: {
  103. children: 'children',
  104. label: 'label'
  105. }
  106. },
  107. typeTree: {
  108. children: 'children',
  109. label: 'label'
  110. },
  111. searchValue: '',
  112. columns: [
  113. { prop: 'id', label: '唯一编号' },
  114. {
  115. prop: 'ossId',
  116. label: '文件编号'
  117. },
  118. {
  119. prop: 'source',
  120. label: '数据源'
  121. },
  122. {
  123. prop: 'aircraftId',
  124. label: '编目',
  125. render: (h, params) => {
  126. const matchedItem = this.aircaftCatalogAll.find((item) => params.row.aircraftId.trim() === item.aircaftCatalogId.trim())
  127. if (matchedItem) {
  128. return h('span', matchedItem.aircaftCatalogCode)
  129. } else {
  130. return h('span', {}, '')
  131. }
  132. }
  133. },
  134. {
  135. prop: 'sortieNo',
  136. label: '架次号'
  137. },
  138. {
  139. prop: 'flightDate',
  140. label: '飞行日期'
  141. },
  142. {
  143. prop: 'status',
  144. label: '状态'
  145. },
  146. {
  147. button: true,
  148. label: '操作',
  149. width: '240px',
  150. group: [
  151. {
  152. name: '编辑',
  153. type: 'text',
  154. round: false,
  155. plain: false,
  156. onClick: (row, index, scope) => {
  157. this.handUpdate(row)
  158. }
  159. },
  160. {
  161. name: '删除',
  162. type: 'text',
  163. round: false,
  164. plain: false,
  165. onClick: (row, index, scope) => {
  166. this.remove([row])
  167. }
  168. }
  169. ]
  170. }
  171. ],
  172. options: {
  173. stripe: true, // 斑马纹
  174. mutiSelect: true, // 多选框
  175. index: false, // 显示序号, 多选则 mutiSelect
  176. loading: false, // 表格动画
  177. initTable: false, // 是否一挂载就加载数据
  178. border: true,
  179. height: 'calc(100vh - 300px)'
  180. },
  181. tableCheckItems: [],
  182. tableData: [],
  183. tableRequset: {
  184. total: 0,
  185. pageIndex: 1,
  186. pageSize: 10,
  187. searchValue: ''
  188. },
  189. form: {
  190. id: '',
  191. ossId: '',
  192. source: '2',
  193. aircaftModel: '',
  194. aircraftId: '',
  195. sortieNo: '',
  196. flightDate: '',
  197. status: '',
  198. tenantId: '',
  199. version: '',
  200. delFlag: '',
  201. createBy: '',
  202. createTime: '',
  203. updateBy: '',
  204. updateTime: ''
  205. },
  206. debounceFn: debounce(this.fetch, 500),
  207. aircaftModelAll: [],
  208. aircaftCatalogAll: [],
  209. upload: {
  210. open: false,
  211. title: '',
  212. // 是否禁用上传
  213. isUploading: false,
  214. // 是否更新已经存在的用户数据
  215. updateSupport: 0,
  216. // 设置上传的请求头部
  217. // headers: { Authorization: 'Bearer ' + getToken() },
  218. headers: { Authorization: getItem('token') },
  219. // 上传的地址
  220. url: '/als' + '/dataImport/importData'
  221. }
  222. }
  223. },
  224. watch: {
  225. keyWord() {
  226. this.tableRequset.pageIndex = 1
  227. this.debounceFn()
  228. }
  229. },
  230. mounted() {
  231. this.getAircaftCatalogTreeAPI()
  232. },
  233. methods: {
  234. async getAircaftCatalogTreeAPI(params) {
  235. const { data } = await getAircaftCatalogTree(params)
  236. this.menuTreeData = data
  237. const getAircaftModelAllParams = {
  238. aircaftTypeCode: '',
  239. aircaftTypeId: '',
  240. queryParam: ''
  241. }
  242. const { data: data1 } = await getAircaftModelAll(getAircaftModelAllParams)
  243. this.aircaftModelAll = data1
  244. const getAircaftCatalogAllParams = {
  245. keyWord: '',
  246. aircaftModelIdList: []
  247. }
  248. const { data: data2 } = await getAircaftCatalogAll(getAircaftCatalogAllParams)
  249. this.aircaftCatalogAll = data2
  250. if (data.length) {
  251. this.currentNodeKey = data[0].id
  252. this.currentNode = data[0]
  253. this.aircaftModelIdList = this.getTreeLeafData(data[0]?.children)
  254. .map((e) => e.id)
  255. .toString()
  256. this.getDataImportAPI({ aircraftId: this.aircaftModelIdList })
  257. }
  258. },
  259. async removeDataImportAPI(params) {
  260. try {
  261. const { code } = await removeDataImport(params)
  262. if (code === 200) {
  263. this.$message({
  264. type: 'success',
  265. message: '操作成功!'
  266. })
  267. // await this.getDataImportAPI(this.currentNodeKey === 'quanbu' ? null : this.currentNodeKey)
  268. await this.getDataImportAPI({ aircraftId: this.aircaftModelIdList })
  269. this.handleClose()
  270. }
  271. } catch (error) {}
  272. },
  273. getTreeLeafData(list) {
  274. const newArr = []
  275. function getLeaf(data, arr) {
  276. data.forEach((e) => {
  277. if (e.type === 1) {
  278. arr.push(e)
  279. }
  280. if (e.children.length) {
  281. getLeaf(e.children, arr)
  282. }
  283. })
  284. }
  285. getLeaf(list, newArr)
  286. return newArr
  287. },
  288. async getDataImportAPI(params) {
  289. if (this.$refs.table) this.$refs.table.clearSelection()
  290. const { keyWord } = this
  291. const { pageSize, pageIndex } = this.tableRequset
  292. const {
  293. data: { list, totalCount }
  294. } = await getDataImport({ pageSize, pageIndex, ...params, source: 2 })
  295. this.tableData = list
  296. this.tableRequset.total = totalCount
  297. },
  298. fetch() {
  299. this.getDataImportAPI({ aircraftId: this.aircaftModelIdList })
  300. },
  301. searchClick() {
  302. this.getDataImportAPI({ aircraftId: this.aircaftModelIdList, sortieNo: this.keyWordData })
  303. },
  304. async addDataImportAPI() {
  305. try {
  306. delete this.form.aircaftModelName
  307. const { code } = await addDataImport({ ...this.form })
  308. if (code === 200) {
  309. this.$message({
  310. type: 'success',
  311. message: '操作成功!'
  312. })
  313. this.getDataImportAPI({ aircraftId: this.aircaftModelIdList })
  314. }
  315. } catch (error) {}
  316. },
  317. async updateDataImportAPI() {
  318. try {
  319. const { code } = await updateDataImport({ ...this.form })
  320. if (code === 200) {
  321. this.$message({
  322. type: 'success',
  323. message: '操作成功!'
  324. })
  325. this.getDataImportAPI({ aircraftId: this.aircaftModelIdList })
  326. }
  327. } catch (error) {}
  328. },
  329. treeNodeClick(data) {
  330. this.$refs.table.clearSelection()
  331. this.currentNodeKey = data.id
  332. this.currentNode = data
  333. this.aircaftModelIdList = this.getTreeLeafData(data.children.length ? data.children : [data])
  334. .map((e) => e.id)
  335. .toString()
  336. this.getDataImportAPI({ aircraftId: this.aircaftModelIdList })
  337. },
  338. openDialog() {
  339. this.dialogTitle = '新增'
  340. this.dialogVisible = true
  341. this.form.aircraftId = this.currentNodeKey
  342. this.form.aircaftModel = this.currentNode.parentId
  343. },
  344. handleClose() {
  345. this.dialogVisible = false
  346. this.form = {
  347. id: '',
  348. ossId: '',
  349. source: '2',
  350. aircaftModel: '',
  351. sortieNo: '',
  352. aircraftId: '',
  353. flightDate: '',
  354. status: '',
  355. tenantId: '',
  356. version: '',
  357. delFlag: '',
  358. createBy: '',
  359. createTime: '',
  360. updateBy: '',
  361. updateTime: ''
  362. }
  363. },
  364. handUpdate(row) {
  365. this.dialogTitle = '编辑'
  366. this.form = deepClone(row)
  367. this.dialogVisible = true
  368. },
  369. submit() {
  370. switch (this.dialogTitle) {
  371. case '编辑':
  372. this.updateDataImportAPI()
  373. this.handleClose()
  374. break
  375. case '新增':
  376. this.addDataImportAPI()
  377. this.handleClose()
  378. break
  379. }
  380. },
  381. selection(val) {
  382. this.tableCheckItems = val
  383. },
  384. remove(row) {
  385. this.$confirm('是否删除该数据', '提示', {
  386. confirmButtonText: '确定',
  387. cancelButtonText: '取消',
  388. type: 'warning'
  389. })
  390. .then(() => {
  391. this.removeDataImportAPI(row.map((e) => e.id))
  392. })
  393. .catch(() => {})
  394. },
  395. // async downloadFile() {
  396. // this.$confirm('确认导出飞参数据?', '温馨提示', {
  397. // confirmButtonText: '确定',
  398. // cancelButtonText: '取消',
  399. // type: 'warning'
  400. // })
  401. // .then(() => {
  402. // // exportDownApi(proTable.value?.searchParam)
  403. // // taskDialogRef.value?.openExportDialog()
  404. // })
  405. // .catch(() => {})
  406. // },
  407. // handleImport() {
  408. // this.upload.title = '用户导入'
  409. // this.upload.open = true
  410. // }
  411. /** 导出按钮操作 */
  412. handleExport() {
  413. this.download(
  414. 'dataImport/export',
  415. {
  416. ...this.queryParams
  417. },
  418. `user_${new Date().getTime()}.xlsx`
  419. )
  420. },
  421. /** 导入按钮操作 */
  422. handleImport() {
  423. this.upload.title = '用户导入'
  424. this.upload.open = true
  425. },
  426. /** 下载模板操作 */
  427. importTemplate() {
  428. this.download('dataImport/importTemplate', {}, `user_template_${new Date().getTime()}.xlsx`)
  429. },
  430. // 文件上传中处理
  431. handleFileUploadProgress(event, file, fileList) {
  432. this.upload.isUploading = true
  433. },
  434. // 文件上传成功处理
  435. handleFileSuccess(response, file, fileList) {
  436. this.upload.open = false
  437. this.upload.isUploading = false
  438. this.$refs.upload.clearFiles()
  439. this.$alert("<div style='overflow: auto;overflow-x: hidden;max-height: 70vh;padding: 10px 20px 0;'>" + response.msg + '</div>', '导入结果', { dangerouslyUseHTMLString: true })
  440. // this.getList()
  441. },
  442. // 提交上传文件
  443. submitFileForm() {
  444. this.$refs.upload.submit()
  445. }
  446. }
  447. }
  448. </script>
  449. <style lang="scss" scoped>
  450. @import '../index.scss';
  451. </style>