query.html 51 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394959697989910010110210310410510610710810911011111211311411511611711811912012112212312412512612712812913013113213313413513613713813914014114214314414514614714814915015115215315415515615715815916016116216316416516616716816917017117217317417517617717817918018118218318418518618718818919019119219319419519619719819920020120220320420520620720820921021121221321421521621721821922022122222322422522622722822923023123223323423523623723823924024124224324424524624724824925025125225325425525625725825926026126226326426526626726826927027127227327427527627727827928028128228328428528628728828929029129229329429529629729829930030130230330430530630730830931031131231331431531631731831932032132232332432532632732832933033133233333433533633733833934034134234334434534634734834935035135235335435535635735835936036136236336436536636736836937037137237337437537637737837938038138238338438538638738838939039139239339439539639739839940040140240340440540640740840941041141241341441541641741841942042142242342442542642742842943043143243343443543643743843944044144244344444544644744844945045145245345445545645745845946046146246346446546646746846947047147247347447547647747847948048148248348448548648748848949049149249349449549649749849950050150250350450550650750850951051151251351451551651751851952052152252352452552652752852953053153253353453553653753853954054154254354454554654754854955055155255355455555655755855956056156256356456556656756856957057157257357457557657757857958058158258358458558658758858959059159259359459559659759859960060160260360460560660760860961061161261361461561661761861962062162262362462562662762862963063163263363463563663763863964064164264364464564664764864965065165265365465565665765865966066166266366466566666766866967067167267367467567667767867968068168268368468568668768868969069169269369469569669769869970070170270370470570670770870971071171271371471571671771871972072172272372472572672772872973073173273373473573673773873974074174274374474574674774874975075175275375475575675775875976076176276376476576676776876977077177277377477577677777877978078178278378478578678778878979079179279379479579679779879980080180280380480580680780880981081181281381481581681781881982082182282382482582682782882983083183283383483583683783883984084184284384484584684784884985085185285385485585685785885986086186286386486586686786886987087187287387487587687787887988088188288388488588688788888989089189289389489589689789889990090190290390490590690790890991091191291391491591691791891992092192292392492592692792892993093193293393493593693793893994094194294394494594694794894995095195295395495595695795895996096196296396496596696796896997097197297397497597697797897998098198298398498598698798898999099199299399499599699799899910001001100210031004100510061007100810091010101110121013101410151016101710181019102010211022102310241025102610271028102910301031103210331034103510361037103810391040104110421043104410451046104710481049105010511052105310541055105610571058105910601061106210631064106510661067106810691070107110721073107410751076107710781079108010811082108310841085108610871088108910901091109210931094109510961097109810991100110111021103110411051106110711081109111011111112111311141115111611171118111911201121112211231124112511261127112811291130113111321133113411351136113711381139114011411142114311441145114611471148114911501151115211531154115511561157115811591160116111621163116411651166116711681169
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="UTF-8">
  5. <!-- import element-ui CSS -->
  6. <link rel="stylesheet" href="../css/element-plus.css">
  7. <!-- import Vue before Element -->
  8. <script src="../utijs/vue.js"></script>
  9. <!-- import element-ui JavaScript -->
  10. <script src="../utijs/elementui.js"></script>
  11. <link rel="stylesheet" href="../css/query.css">
  12. <!-- 拖拽 -->
  13. <script src="../utijs/sorttable.js"></script>
  14. <script src="http://www.itxst.com/package/vuedraggable/vuedraggable.umd.min.js"></script>
  15. </head>
  16. <body>
  17. <!--编写标签-->
  18. <div id="app">
  19. <!-- 内容区域 -->
  20. <div class="hc-layout-box">
  21. <div class="main_box">
  22. <div class="main_nox_header">
  23. <span class="inner-text">
  24. {{projectName}}
  25. </span>
  26. </div>
  27. <!-- 内容区域 -->
  28. <div class="maininfo">
  29. <div class="leftbox">
  30. <div class="treebox tree-line">
  31. <el-tree class="tree-line" highlight-current :data="data" :props="defaultProps" @node-click="handleNodeClick" lazy :load="loadNode" accordion>
  32. <template #default="{ node, data }">
  33. <!--树组件,节点名称-->
  34. <div :class="node.level === 1?'level-name':''">
  35. <!-- <span>{{ node.label }}</span> -->
  36. <span v-if=" node.label && node.label.length <=12">{{ node.label }}</span>
  37. <el-tooltip :content=" node.label" raw-content placement="right" effect="light" v-if=" node.label && node.label.length >12">
  38. <span>{{ node.label|ellipsis }}</span>
  39. </el-tooltip>
  40. </div>
  41. </template>
  42. </el-tree>
  43. </div>
  44. </div>
  45. <div class="contentbox">
  46. <div class="contentbox_head">
  47. <div class="serachbox">
  48. <div style="margin-right: 10px;">
  49. <el-button type="primary" v-if="!showSearchinfo" @click="moreSearch">条件筛选<i class="el-icon-arrow-up mlft" ></i></el-button>
  50. <el-button type="primary" v-else @click="moreSearch">条件筛选<i class="el-icon-arrow-down mlft" ></i></el-button>
  51. </div>
  52. <el-input
  53. v-if="!showSearchinfo"
  54. placeholder="请输入内容"
  55. v-model="searchinput"
  56. @keyup.enter.native="searchByTitle()"
  57. clearable
  58. >
  59. <i slot="prefix" class="el-input__icon el-icon-search"></i>
  60. </el-input>
  61. <div style="margin-left:10px" v-if="!showSearchinfo">
  62. <el-button type="primary" @click="searchByTitle">搜索</el-button>
  63. </div>
  64. <div class="serachbox_info " v-if="showSearchinfo" :class="showSearchinfo?'mask':''">
  65. <el-alert
  66. title="支持模糊搜索,可选择多个搜索条件组合查询,最多可同时设置4个搜索条件"
  67. type="info"
  68. :closable="false"
  69. show-icon>
  70. </el-alert>
  71. <div class="form_box">
  72. <el-form label-position="left" label-width="80px" :model="searchform">
  73. <el-form-item label="保管期限">
  74. <el-checkbox-group v-model="checkList">
  75. <el-checkbox label="3" >永久</el-checkbox>
  76. <el-checkbox label="2" >30年</el-checkbox>
  77. <el-checkbox label="1" >10年</el-checkbox>
  78. </el-checkbox-group>
  79. </el-form-item>
  80. <el-form-item label="案卷档号">
  81. <el-input v-model="searchform.num" clearable></el-input>
  82. </el-form-item>
  83. <el-form-item label="案卷题名">
  84. <el-input v-model="searchform.title" clearable></el-input>
  85. </el-form-item>
  86. <el-form-item label="日期范围">
  87. <el-date-picker
  88. v-model="searchform.time"
  89. type="daterange"
  90. range-separator="至"
  91. start-placeholder="开始日期"
  92. end-placeholder="结束日期"
  93. style="width:100%"
  94. />
  95. />
  96. </el-form-item>
  97. </el-form>
  98. <el-divider class="mp20"></el-divider>
  99. <div class="form_box_btn">
  100. <el-button type="primary" @click="clickmoresearchinfo">搜索</el-button>
  101. <el-button type="primary" @click="clearInput">重置</el-button>
  102. </div>
  103. </div>
  104. </div>
  105. </div>
  106. </div>
  107. <div class="contentbox_table">
  108. <el-table
  109. highlight-current-row
  110. stripe
  111. @row-dblclick="handledbClick"
  112. :data="tableData"
  113. style="width: 100%;
  114. height: 100%;
  115. width: 100%;
  116. overflow-y: auto;
  117. background-color: transparent; "
  118. :cell-class-name="addClass"
  119. :cell-style="cellStyle"
  120. class="mytable"
  121. :header-cell-style="{ background: '#DAE8F3'}"
  122. >
  123. <el-table-column
  124. prop="number"
  125. label="档号"
  126. width="180">
  127. </el-table-column>
  128. <el-table-column prop="title" label="案卷题名">
  129. <template slot-scope="scope">
  130. <a @click="handlerowclick(scope.row,false)">{{scope.row.title}}</a>
  131. </template>
  132. </el-table-column>
  133. <el-table-column
  134. prop="time"
  135. label="保管期限">
  136. </el-table-column>
  137. <el-table-column
  138. prop="secret"
  139. label="密级">
  140. </el-table-column>
  141. <el-table-column
  142. prop="unit"
  143. label="立卷单位">
  144. </el-table-column>
  145. <el-table-column
  146. prop="startendtime"
  147. label="文件起止日期">
  148. </el-table-column>
  149. </el-table>
  150. </div>
  151. <div class="page_box">
  152. <el-pagination
  153. background
  154. layout="total,prev, pager, next"
  155. :total="tableTotal"
  156. @size-change="handleSizeChange"
  157. @current-change="handleCurrentChange"
  158. :current-page="currentPage"
  159. :page-size="15"
  160. >
  161. </el-pagination>
  162. </div>
  163. </div>
  164. </div>
  165. </div>
  166. </div>
  167. <!-- 排序弹窗 -->
  168. <!-- 卷内文件弹窗 -->
  169. <el-dialog
  170. :visible.sync="innerdialogVisible"
  171. width="85%"
  172. :before-close="handleinnerClose"
  173. :close-on-click-modal="false"
  174. >
  175. <div slot="title" class="dialog-title dialog-title_box" >
  176. <span class="title-text" style="margin-right:10px">卷内文件</span>
  177. <span class="title-textsmall">共
  178. <span class="fontoringe">{{innertableTotal}}</span>
  179. 份卷内文件</span>
  180. </div>
  181. <div class="contentbox" style="height: 650px;">
  182. <div class="contentbox_head">
  183. <div class="serachbox">
  184. <el-input
  185. placeholder="请输入内容"
  186. v-model="innerinput" clearable
  187. @keyup.enter.native="searchinnerByTitle()"
  188. v-if="!innershowSearchinfo"
  189. >
  190. <i slot="prefix" class="el-input__icon el-icon-search"></i>
  191. </el-input>
  192. <div style="margin-left:10px" v-if="!innershowSearchinfo">
  193. <el-button type="primary" @click="searchinnerByTitle">搜索</el-button>
  194. </div>
  195. </div>
  196. <div class="serachbox_btn">
  197. <el-button type="primary" @click="openrealData">元数据</el-button>
  198. </div>
  199. </div>
  200. <div class="contentbox_table1">
  201. <el-table
  202. highlight-current-row
  203. @selection-change="handleInnerSelectionChange"
  204. stripe
  205. ref="metaTableref"
  206. :data="innertableData"
  207. style="width: 100%;
  208. height: 100%;
  209. width: 100%;
  210. overflow-y: auto;
  211. background-color: transparent;
  212. "
  213. :header-cell-style="{ background: '#DAE8F3'}"
  214. :cell-class-name="addClass1"
  215. :cell-style="cellStyle"
  216. >
  217. <el-table-column
  218. type="selection"
  219. width="55">
  220. </el-table-column>
  221. <el-table-column prop="title" label="文件名称">
  222. <template slot-scope="scope">
  223. <a @click="handlerowclick(scope.row,true)">{{scope.row.title}}</a>
  224. </template>
  225. </el-table-column>
  226. <el-table-column
  227. prop="dutyUser"
  228. label="责任人">
  229. </el-table-column>
  230. <el-table-column
  231. prop="startime"
  232. label="创建日期">
  233. </el-table-column>
  234. </el-table>
  235. </div>
  236. <div class="page_box1" >
  237. <el-pagination
  238. background
  239. layout="total,prev, pager, next"
  240. :total="innertableTotal">
  241. </el-pagination>
  242. </div>
  243. </div>
  244. </el-dialog>
  245. <!-- 元数据弹窗 -->
  246. <el-dialog
  247. :visible.sync="openrealDataDialog"
  248. width="50%"
  249. :before-close="handleCloserealDataDialog">
  250. <div slot="title" class="dialog-title dialog-title_box" style="padding-right:10px;">
  251. <span class="bulefont">
  252. {{cheeckFileTitle}}
  253. <span style="color: black;"> 文件元数据信息</span>
  254. </span>
  255. </div>
  256. <div class="hc-csc-meta-table-data" v-loading="isrealDataLoading">
  257. <el-scrollbar>
  258. <table class="hc-csc-meta-table" border="1" >
  259. <template>
  260. <template v-for="(item,key) in metaDataTable" >
  261. <tr class="hc-csc-meta-table-tr hc-csc-meta-table-tr1" v-if="item.type === 2">
  262. <td colspan="2" class="hc-csc-meta-table-td title">{{item.title}}</td>
  263. </tr>
  264. <tr class="hc-csc-meta-table-tr" v-else>
  265. <td class="hc-csc-meta-table-td name">{{item.title}}</td>
  266. <td class="hc-csc-meta-table-td val" style="width:380px" >{{item.val}}</td>
  267. </tr>
  268. </template>
  269. </template>
  270. </table>
  271. </el-scrollbar>
  272. </div>
  273. </el-dialog>
  274. <!-- 预览pdf -->
  275. <el-drawer
  276. :visible.sync="pdfdrawer"
  277. direction="ttb"
  278. size="100%"
  279. :before-close="handlepdfClose">
  280. <div slot="title" >
  281. <span style="font-weight: bolder;">预览pdf</span>
  282. </div>
  283. <div class="pdfbox">
  284. <div class="pdfiframe" v-if="!isHavePdfTitle">
  285. <iframe :src="pdfurl" style="height: 100%;width:100%"></iframe>
  286. </div>
  287. <div class="pdfiframe1" v-else>
  288. <iframe :src="pdfurl" style="height: 100%;width:100%"></iframe>
  289. </div>
  290. <div class="pdftitle" v-if="!isHavePdfTitle" >
  291. <el-scrollbar style="height:100%">
  292. <table class="hc-csc-meta-table" border="1">
  293. <template>
  294. <tr class="hc-csc-meta-table-tr">
  295. <td class="pdftitlename">卷内文件名称</td>
  296. </tr>
  297. <tr class="hc-csc-meta-table-tr" style="cursor: pointer;" v-for="(item,key) in pdfTitlelist" @click="changepdf(item)" >
  298. <td class="hc-csc-meta-table-td name" :class="item.isselect?'is_select':''">{{item.title}}</td>
  299. </tr>
  300. </template>
  301. </table>
  302. </el-scrollbar>
  303. </div>
  304. </div>
  305. </el-drawer>
  306. </div>
  307. </body>
  308. <script>
  309. // 创建vue
  310. new Vue({
  311. // 控制的标签容器
  312. el: '#app',
  313. component:{
  314. draggable: window.vuedraggable
  315. },
  316. // 交互的数据
  317. data: function () {
  318. return {
  319. projectName:'安康至来凤国家高速公路奉节至巫山段-档案管理',
  320. visible: false,
  321. //本地文件前缀
  322. aliFile: '../alilib/',
  323. //父类id
  324. parentId: '0',
  325. //page
  326. currentPage:1,
  327. pageSize:15,
  328. data: [],//左边树形控件数据
  329. defaultProps: {
  330. children: 'children',
  331. label: 'label',
  332. isLeaf: function (data) {
  333. if (data['isLeaf']==='true') {
  334. return false;
  335. } else{
  336. return true
  337. }
  338. },
  339. },
  340. tableData: [
  341. {
  342. number: '2016-05-02',
  343. title: '王小虎王小虎王小虎王小虎王小虎王小虎王小虎王小虎',
  344. time: '永久',
  345. secret:'机密',
  346. unit:'贵州路桥集团',
  347. startendtime:'2016-05-04~2016-05-04'
  348. },
  349. {
  350. number: '2016-05-02',
  351. title: '王小虎王小虎王小虎王小虎王小虎王小虎王小虎王小虎',
  352. time: '永久',
  353. secret:'机密',
  354. unit:'贵州路桥集团',
  355. startendtime:'2016-05-04~2016-05-04'
  356. },
  357. {
  358. number: '2016-05-02',
  359. title: '王小虎王小虎王小虎王小虎王小虎王小虎王小虎王小虎',
  360. time: '永久',
  361. secret:'机密',
  362. unit:'贵州路桥集团',
  363. startendtime:'2016-05-04~2016-05-04'
  364. },
  365. ],
  366. tableTotal:200,
  367. innertableTotal:200,
  368. innertableData:[
  369. {
  370. number: '2016-05-02',
  371. title: '王小虎王小虎王小虎王小虎王小虎王小虎王小虎王小虎王小虎王小虎王小虎王小虎王小虎王小虎王小虎王小虎王小虎王小虎王小虎王小虎王小虎王小虎王小虎王小虎王小虎王小虎王小虎王小虎王小虎王小虎王小虎王小虎王小虎王小虎王小虎王小虎王小虎王小虎王小虎王小虎王小虎王小虎王小虎王小虎王小虎王小虎王小虎王小虎王小虎王小虎王小虎王小虎王小虎王小虎王小虎王小虎王小虎王小虎王小虎王小虎王小虎王小虎王小虎王小虎',
  372. dutyUser:'贵州路桥集团',
  373. startime:'2016-05-04~2016-05-04'
  374. },
  375. {
  376. id:'1',
  377. number: '2016-05-02',
  378. title: '王小虎王小虎王小虎王小虎王小虎王小虎王小虎王小虎',
  379. dutyUser:'贵州路桥集团',
  380. startime:'2016-05-04~2016-05-04'
  381. },
  382. ],
  383. multipleTableRef:null,//卷内文件表格
  384. innerinput4:'',//卷内文件输入框
  385. searchinput:'',
  386. innerinput:'',
  387. //选中的案卷id
  388. archiveId:'',
  389. searchform:{
  390. num:'',
  391. title:'',
  392. time:'',
  393. start_time:'',
  394. end_time:'',
  395. timelimit:''
  396. },
  397. innersearchform:{
  398. num:'',
  399. title:'',
  400. time:'',
  401. },
  402. checkList: [],
  403. formLabelAlign:{},
  404. showSearchinfo:false,
  405. innershowSearchinfo:false,
  406. sortdialogVisible:false,
  407. sort:[
  408. {id: "1623580501841694722",nodeName: "某某大桥1",sort: 1},
  409. {id: "1623580501841694722",nodeName: "某某大桥2",sort: 2},
  410. {id: "1623580501841694722",nodeName: "某某大桥3",sort: 3},
  411. ],//排序数据
  412. //卷内文件
  413. innerdialogVisible:false,
  414. openrealDataDialog:false,//元数据
  415. isrealDataLoading:false,
  416. cheeckFileTitle:'',
  417. metaDataTable:[
  418. {type: 2, title: '来源', val: ''},
  419. {type: 1, title: '全宗名称', val: ''},
  420. {type: 1, title: '立档单位名称', val: ''},
  421. {type: 1, title: '电子文件号', val: ''},
  422. {type: 2, title: '文件联', val: ''},
  423. {type: 1, title: '目录文件', val: ''},
  424. {type: 1, title: '文件件数', val: ''},
  425. {type: 1, title: '文件页数', val: ''},
  426. {type: 1, title: '元数据目录文件', val: ''},
  427. {type: 1, title: '验证码', val: ''},
  428. {type: 2, title: '内容描述', val: ''},
  429. {type: 1, title: '题名', val: ''},
  430. {type: 1, title: '关键词', val: ''},
  431. {type: 1, title: '摘要', val: ''},
  432. {type: 1, title: '生成方式', val: ''},
  433. {type: 1, title: '责任者', val: ''},
  434. {type: 1, title: '文件创建日期', val: ''},
  435. {type: 2, title: '组件', val: ''},
  436. {type: 1, title: 'IP地址', val: ''},
  437. {type: 1, title: '桩号', val: ''},
  438. {type: 1, title: '上传时间', val: ''},
  439. {type: 2, title: '文件标识码', val: ''},
  440. {type: 1, title: '文号', val: ''},
  441. {type: 1, title: '表单标识码', val: ''},
  442. {type: 2, title: '竣工图', val: ''},
  443. {type: 1, title: '图号', val: ''},
  444. {type: 1, title: '图幅', val: ''},
  445. {type: 1, title: '图表来源', val: ''},
  446. {type: 1, title: '引用变更令编号', val: ''},
  447. {type: 2, title: '照片文件', val: ''},
  448. {type: 1, title: '主题', val: ''},
  449. {type: 1, title: '拍摄时间', val: ''},
  450. {type: 1, title: '拍摄地点', val: ''},
  451. {type: 1, title: '摄影者', val: ''},
  452. {type: 1, title: '背景', val: ''},
  453. {type: 1, title: '分组号', val: ''},
  454. {type: 1, title: '组内照片编号', val: ''},
  455. {type: 1, title: '水平分辨率', val: ''},
  456. {type: 1, title: '垂直分辨率', val: ''},
  457. {type: 1, title: '保管期限', val: ''},
  458. {type: 1, title: '格式信息', val: ''},
  459. {type: 2, title: '电子属性', val: ''},
  460. {type: 1, title: '位置', val: ''},
  461. {type: 1, title: '计算机文件名', val: ''},
  462. {type: 1, title: '计算机文件大小', val: ''},
  463. {type: 2, title: '数字化属性', val: ''},
  464. {type: 1, title: '扫描分辨率', val: ''},
  465. {type: 1, title: '扫描色彩模式', val: ''},
  466. {type: 2, title: '电子签名', val: ''},
  467. {type: 1, title: '签名类型', val: ''},
  468. {type: 1, title: '签名时间', val: ''},
  469. {type: 1, title: '签名人', val: ''},
  470. {type: 1, title: '建设项目', val: ''},
  471. {type: 2, title: '业务事项', val: ''},
  472. {type: 1, title: '单位工程', val: ''},
  473. {type: 1, title: '分部工程', val: ''},
  474. {type: 1, title: '分项工程', val: ''},
  475. {type: 1, title: '单位工程编码', val: ''},
  476. {type: 1, title: '分部工程编码', val: ''},
  477. {type: 1, title: '分项工程编码', val: ''},
  478. {type: 2, title: '责任者', val: ''},
  479. {type: 1, title: '责任者名称', val: ''},
  480. {type: 1, title: '个人职位', val: ''},
  481. {type: 1, title: '责任者手机号', val: ''},
  482. {type: 2, title: '关系实体', val: ''},
  483. {type: 1, title: '关系标识', val: ''},
  484. {type: 1, title: '关系类型', val: ''},
  485. {type: 1, title: '关系', val: ''},
  486. {type: 1, title: '相关实体标识', val: ''},
  487. ],
  488. metaTableref:null,
  489. pdfdrawer:false,
  490. pdfurl:'',//pdf地址
  491. pdfTitlelist:[
  492. {id:'1',title:'文件一',url:''},
  493. {id:'2',title:'文件二',url:''},
  494. {id:'3',title:'文件三',url:''},
  495. ],
  496. tableCheckItem:[],//选中的案卷
  497. tableinnerCheckItem:[],//选中的卷内文件
  498. isHavePdfTitle:true,//pdf是否有右侧表格
  499. isselect:true,
  500. nowData:[],
  501. //元数据集合
  502. metadataList:[]
  503. }
  504. },
  505. // 方法
  506. methods: {
  507. //格式化时间
  508. dateFormat(fmt, date) {
  509. let ret;
  510. const opt = {
  511. "Y+": date.getFullYear().toString(), // 年
  512. "m+": (date.getMonth() + 1).toString(), // 月
  513. "d+": date.getDate().toString(), // 日
  514. "H+": date.getHours().toString(), // 时
  515. "M+": date.getMinutes().toString(), // 分
  516. "S+": date.getSeconds().toString(), // 秒
  517. // 有其他格式化字符需求可以继续添加,必须转化成字符串
  518. };
  519. for (let k in opt) {
  520. ret = new RegExp("(" + k + ")").exec(fmt);
  521. if (ret) {
  522. fmt = fmt.replace(
  523. ret[1],
  524. ret[1].length === 1 ? opt[k] : opt[k].padStart(ret[1].length, "0")
  525. );
  526. }
  527. }
  528. return fmt;
  529. },
  530. //获取项目名称
  531. getProjectName(){
  532. let that = this;
  533. var db = openDatabase('test1341', '1.0', '测试', 2 * 1024 * 1024);
  534. db.transaction(function (tx) {
  535. tx.executeSql('select node_name as name FROM m_archive_tree_contract WHERE parent_id=0 ',
  536. [], function (tx, results) {
  537. that.projectName = results.rows[0].name;
  538. }, null);
  539. });
  540. },
  541. //加载树
  542. lazyTree(parentId){
  543. let that = this;
  544. return new Promise((resolve, reject)=>{
  545. var db = openDatabase('test1341', '1.0', '测试', 2 * 1024 * 1024);
  546. db.transaction(function (tx) {
  547. tx.executeSql('SELECT (id||"") as "id",m1.node_name as "label",(select CASE WHEN COUNT(1)>0 THEN "true" ELSE "false" END FROM m_archive_tree_contract m2 WHERE m2.parent_id = m1.id)as isLeaf FROM m_archive_tree_contract m1 where parent_id = ? ',
  548. [parentId], function (tx, results) {
  549. var len = results.rows.length, i;
  550. var list=[];
  551. for (i = 0; i < len; i++) {
  552. list.push(results.rows.item(i));
  553. }
  554. resolve(list)
  555. }, null);
  556. });
  557. })
  558. },
  559. //树形控件懒加载
  560. async loadNode(node, resolve) {
  561. console.log(node,'树形控件懒加载');
  562. //懒加载获取节点
  563. if (node.level === 0) {
  564. const testData = await this.lazyTree(this.parentId)
  565. console.log('当前节点',testData);
  566. return resolve(
  567. await this.lazyTree( this.parentId)
  568. );
  569. // resolve([])
  570. }
  571. if (node.level > 0) {
  572. return resolve(
  573. await this.lazyTree( node.data.id)
  574. );
  575. }
  576. },
  577. //获取当前节点的档案,搜索也走此方法
  578. getCurrentNodeArchives(parentId,currentPage,pageSize,searchTitle,searchNum,start_time,end_time,timelimit){
  579. console.log("开始时间:"+start_time);
  580. console.log("结束时间:"+end_time);
  581. console.log("保管期限:"+timelimit);
  582. var time;
  583. if (timelimit == '' || timelimit == undefined){
  584. time = '1,2,3';
  585. }else {
  586. time = timelimit;
  587. }
  588. console.log("time:"+time);
  589. var title;
  590. if (searchTitle == '' || searchTitle == undefined){
  591. title = '%';
  592. }else {
  593. title = '%'+searchTitle+'%';
  594. }
  595. var num;
  596. if (searchNum == '' || searchNum == undefined){
  597. num = '%';
  598. }else {
  599. num = '%'+searchNum+'%';
  600. }
  601. if (start_time == '' || start_time == undefined) {
  602. let that = this;
  603. var db = openDatabase('test1341', '1.0', '测试', 2 * 1024 * 1024);
  604. db.transaction(function (tx) {
  605. tx.executeSql('SELECT u.id,u.file_number as number,u.name as title,case u.storage_time when 1 then "10年" when 2 then "30年" else "永久" end as time,case u.secret_level when 1 then "机密" when 2 then "绝密" else "秘密" end as secret,u.unit as unit,(strftime("%Y/%m/%d",u.start_date)||"~"||strftime("%Y/%m/%d",u.end_date)) as startendtime,u.all_file_pdf as allFilePdf FROM u_archives_auto u WHERE storage_time in ('+time+') and node_id in (select id FROM m_archive_tree_contract WHERE (ancestors like ? or id = ?)) and u.name like ? and u.file_number like ? order by u.tree_sort,u.file_number asc LIMIT ? OFFSET ?',
  606. ['%' + parentId + '%', parentId, title, num, pageSize, (currentPage - 1) * pageSize], function (tx, results) {
  607. var len = results.rows.length, i;
  608. var list = [];
  609. for (i = 0; i < len; i++) {
  610. list.push(results.rows.item(i));
  611. // console.log("一行档案:"+results.rows.item(i).id);
  612. }
  613. that.tableData = list;
  614. // console.log("获取当前档案"+that.tableData.length);
  615. }, null);
  616. });
  617. db.transaction(function (tx) {
  618. tx.executeSql('SELECT count(*) as count FROM u_archives_auto u WHERE storage_time in ('+time+') and node_id in (select id FROM m_archive_tree_contract WHERE (ancestors like ? or id = ?)) and u.name like ? and u.file_number like ? ',
  619. ['%' + parentId + '%', parentId, title, num], function (tx, results) {
  620. that.tableTotal = results.rows[0].count;
  621. // console.log("当前档案总数"+that.tableTotal);
  622. }, null);
  623. });
  624. }else {
  625. console.log("选择了开始日期:"+start_time);
  626. let that = this;
  627. var db = openDatabase('test1341', '1.0', '测试', 2 * 1024 * 1024);
  628. db.transaction(function (tx) {
  629. tx.executeSql('SELECT u.id,u.file_number as number,u.name as title,case u.storage_time when 1 then "10年" when 2 then "30年" else "永久" end as time,case u.secret_level when 1 then "机密" when 2 then "绝密" else "秘密" end as secret,u.unit as unit,(strftime("%Y/%m/%d",u.start_date)||"~"||strftime("%Y/%m/%d",u.end_date)) as startendtime,u.all_file_pdf as allFilePdf FROM u_archives_auto u WHERE storage_time in ('+time+') and ? < end_date and ? > start_date and node_id in (select id FROM m_archive_tree_contract WHERE (ancestors like ? or id = ?)) and u.name like ? and u.file_number like ? order by u.tree_sort,u.file_number asc LIMIT ? OFFSET ?',
  630. [start_time, end_time, '%' + parentId + '%', parentId, title, num, pageSize, (currentPage - 1) * pageSize], function (tx, results) {
  631. var len = results.rows.length, i;
  632. var list = [];
  633. for (i = 0; i < len; i++) {
  634. list.push(results.rows.item(i));
  635. }
  636. that.tableData = list;
  637. // console.log("获取当前档案"+that.tableData.length);
  638. }, null);
  639. });
  640. db.transaction(function (tx) {
  641. tx.executeSql('SELECT count(*) as count FROM u_archives_auto u WHERE storage_time in ('+time+') and ? < end_date and ? > start_date and node_id in (select id FROM m_archive_tree_contract WHERE (ancestors like ? or id = ?)) and u.name like ? and u.file_number like ? ',
  642. [start_time, end_time, '%' + parentId + '%', parentId, title, num], function (tx, results) {
  643. that.tableTotal = results.rows[0].count;
  644. // console.log("当前档案总数"+that.tableTotal);
  645. }, null);
  646. });
  647. }
  648. },
  649. //获取卷内文件列表
  650. getInnerTableData(archiveId,innerInput){
  651. console.log('获取卷内文件列表');
  652. //拼接文件名
  653. var title;
  654. if (innerInput == '' || innerInput == undefined){
  655. title = '%';
  656. }else {
  657. title = '%'+innerInput+'%';
  658. }
  659. console.log('拼接的文件名:'+title);
  660. let that = this;
  661. var db = openDatabase('test1341', '1.0', '测试', 2 * 1024 * 1024);
  662. db.transaction(function (tx) {
  663. tx.executeSql('select id,file_number as number,file_name as title,pdf_file_url as url,file_time as startime,duty_user as dutyUser from u_archive_file where archive_id = ? and file_name like ?',
  664. [archiveId,title], function (tx, results) {
  665. var len = results.rows.length, i;
  666. var list=[];
  667. for (i = 0; i < len; i++) {
  668. list.push(results.rows.item(i));
  669. console.log(results.rows.item(i));
  670. }
  671. that.innertableData = list;
  672. that.pdfTitlelist = list;
  673. that.innertableTotal = list.length;
  674. }, null);
  675. });
  676. },
  677. //查看元数据
  678. getFileMetadata(fileId){
  679. console.log('文件id'+fileId);
  680. let that = this;
  681. var fileData = {
  682. };
  683. var fieldData = [];
  684. var treeType = 'c';
  685. var db = openDatabase('test1341', '1.0', '测试', 2 * 1024 * 1024);
  686. //获取文件元数据
  687. db.transaction(function (tx) {
  688. tx.executeSql('select * from u_metadata_file where file_id = ?',
  689. [fileId], function (tx, results) {
  690. var len = results.rows.length, i;
  691. // console.log("长度"+len);
  692. fileData = results.rows.item(0);
  693. console.log("结果"+fileData.contract_id);
  694. }, null);
  695. });
  696. //获取节点类型
  697. db.transaction(function (tx) {
  698. tx.executeSql('select atc.storage_type from u_archive_file uaf left join m_archive_tree_contract atc on uaf.node_id = atc.id where uaf.id = ?',
  699. [fileId], function (tx, results) {
  700. var len = results.rows.length, i;
  701. treeType = results.rows.item(0).storage_type
  702. console.log("节点类型"+treeType);
  703. if (treeType == 1){
  704. treeType = 'a';
  705. }else if (treeType == 2){
  706. treeType = 'b';
  707. }else if (treeType == 3){
  708. treeType = 'c';
  709. }else if (treeType == 4){
  710. treeType = 'd';
  711. }else if (treeType == 5){
  712. treeType = 'e';
  713. }else if (treeType == 6){
  714. treeType = 'f';
  715. }else if (treeType == 7){
  716. treeType = 'g';
  717. }else if (treeType == 8){
  718. treeType = 'h';
  719. }else if (treeType == 9){
  720. treeType = 'i';
  721. }
  722. }, null);
  723. });
  724. //获取文件字段
  725. db.transaction(function (tx) {
  726. tx.executeSql('select * from u_metadata_classification',
  727. [], function (tx, results) {
  728. var len = results.rows.length, i;
  729. // console.log("长度"+len);
  730. fieldData = results.rows;
  731. console.log("结果"+fieldData[0].code);
  732. //判断是否包含
  733. for (let i=0; i<fieldData.length; i++){
  734. if (fieldData[i].file_storage_type.indexOf(treeType) != -1){
  735. // console.log(fieldData[i].code)
  736. fieldData[i].keyValue = fileData[fieldData[i].field_key];
  737. // console.log(fieldData[i])
  738. var r = {
  739. title: '',
  740. val:''
  741. }
  742. r.title = fieldData[i].container_name;
  743. r.val = fileData[fieldData[i].field_key];
  744. if (r.title.indexOf('生成方式') != -1){
  745. if (r.val == 1){
  746. r.val = '原生';
  747. }else {
  748. r.val = '数字化';
  749. }
  750. }
  751. if (r.title.indexOf('密级') != -1){
  752. if (r.val == 1){
  753. r.val = '机密';
  754. }else if (r.val == 2){
  755. r.val = '绝密';
  756. }else {
  757. r.val = '秘密';
  758. }
  759. }
  760. that.metadataList.push(r);
  761. }
  762. }
  763. // console.log("元数据结果:"+that.metadataList);
  764. for (let j = 0 ;j < that.metadataList.length ; j++){
  765. console.log(that.metadataList[j]);
  766. }
  767. that.metaDataTable=that.metadataList
  768. that.metadataList = []
  769. }, null);
  770. });
  771. },
  772. handleInnerSelectionChange(val){
  773. console.log('选中的卷内文件',val);
  774. if(val.length>1){
  775. this.$message.warning('只能选择一条数据')
  776. this.tableinnerCheckItem=[]
  777. this.$refs.metaTableref.clearSelection()
  778. }
  779. else{
  780. this.tableinnerCheckItem=val
  781. }
  782. },
  783. handleNodeClick(data){
  784. // this.lazyTree(data.id);
  785. console.log(data,'点击wbs节点');
  786. this.parentId = data.id;
  787. this.getCurrentNodeArchives(data.id,this.currentPage,this.pageSize,this.searchinput);
  788. },
  789. moreSearch(){
  790. this.showSearchinfo=!this.showSearchinfo
  791. this.searchform={}
  792. },
  793. //卷内文件更多搜索
  794. innermoreSearch(){
  795. console.log('卷内文件更多搜索');
  796. this.getInnerTableData(this.archiveId,this.innersearchform.title,this.innersearchform.num);
  797. this.innershowSearchinfo=!this.innershowSearchinfo
  798. this.innersearchform={}
  799. },
  800. //行点击事件
  801. handlerowclick(row,type){
  802. if(type){
  803. this.isHavePdfTitle=false
  804. console.log('查看卷内文件pdf',row);
  805. this.pdfdrawer=true;
  806. if( this.pdfTitlelist.length>0){
  807. // this.pdfTitlelist[0].isselect=true;
  808. this.pdfurl=this.aliFile+row.url
  809. this.pdfTitlelist.forEach((ele)=>{
  810. if(ele.id===row.id){
  811. ele.isselect=true
  812. }else{
  813. ele.isselect=false
  814. }
  815. })
  816. this.$forceUpdate()
  817. }
  818. }else{
  819. console.log('查看案卷pdf',row);
  820. this.isHavePdfTitle=true
  821. this.pdfdrawer=true;
  822. this.pdfurl=this.aliFile + row.allFilePdf;
  823. }
  824. },
  825. //为ting'ming添加样式
  826. addClass({row,column,rowIndex,columnIndex}){
  827. if( columnIndex==1){ //此判断为前两列
  828. return 'addColor'
  829. }
  830. },
  831. addClass1({row,column,rowIndex,columnIndex}){
  832. if( columnIndex==1){ //此判断为前两列
  833. return 'addColor'
  834. }
  835. },
  836. /* 加入小手状态 */
  837. cellStyle(data) {
  838. if (data) {
  839. return 'cursor:pointer;'
  840. }
  841. },
  842. //卷内文件
  843. handleinnerClose(){
  844. this.innerdialogVisible=false
  845. this.$refs.metaTableref.clearSelection()
  846. },
  847. //打开元数据
  848. openrealData(){
  849. if(this.tableinnerCheckItem.length==0){
  850. this.$message.warning('请先选择文件')
  851. }else if(this.tableinnerCheckItem.length>1){
  852. this.$message.warning('只能选择一条数据')
  853. this.tableinnerCheckItem=[]
  854. }
  855. else if(this.tableinnerCheckItem.length===1){
  856. this.openrealDataDialog=true
  857. this.cheeckFileTitle=this.tableinnerCheckItem[0].title
  858. this.getFileMetadata(this.tableinnerCheckItem[0].id)
  859. }
  860. },
  861. handleCloserealDataDialog(){
  862. this.openrealDataDialog=false
  863. this.$refs.metaTableref.clearSelection()
  864. },
  865. //预览pdf
  866. handlepdfClose(){
  867. this.pdfdrawer=false
  868. },
  869. handledbClick(row){
  870. this.innerdialogVisible=true
  871. console.log('双击');
  872. console.log(this.data);
  873. console.log(row);
  874. this.archiveId = row.id;
  875. this.getInnerTableData(row.id);
  876. },
  877. changepdf(item){
  878. console.log('切换查看卷内文件',item);
  879. this.pdfurl=this.aliFile+item.url;
  880. this.pdfTitlelist.forEach(element => {
  881. element.isselect=false
  882. });
  883. item.isselect=true
  884. this.$forceUpdate()
  885. },
  886. //分页
  887. handleSizeChange(val) {
  888. console.log(`每页 ${val} 条`);
  889. },
  890. handleCurrentChange(val) {
  891. this.getCurrentNodeArchives(this.parentId,val,this.pageSize);
  892. },
  893. //更多搜索
  894. clickmoresearchinfo(){
  895. // 日期格式化
  896. if(Array.isArray(this.searchform.time)&&this.searchform.time.length>0){
  897. this.searchform.start_time = this.dateFormat("YYYY-mm-dd", this.searchform.time[0]);
  898. this.searchform.end_time = this.dateFormat("YYYY-mm-dd", this.searchform.time[1]);
  899. }else{
  900. this.searchform.end_time =''
  901. this.searchform.start_time =''
  902. }
  903. this.searchform.timelimit=this.checkList.join(',')//保管期限
  904. console.log( this.searchform,' this.searchform');
  905. this.showSearchinfo=false
  906. this.getCurrentNodeArchives(this.parentId,this.currentPage,this.pageSize,this.searchform.title,this.searchform.num,this.searchform.start_time,this.searchform.end_time,this.searchform.timelimit);
  907. this.checkList = [];
  908. },
  909. innerclickmoresearchinfo(){
  910. console.log(this.innersearchform,'this.innersearchform');
  911. // 日期格式化
  912. if(Array.isArray(this.innersearchform.time)&&this.innersearchform.time.length>0){
  913. this.innersearchform.start_time = this.dateFormat("YYYY-mm-dd", this.innersearchform.time[0]);
  914. this.innersearchform.end_time = this.dateFormat("YYYY-mm-dd", this.innersearchform.time[1]);
  915. }else{
  916. this.innersearchform.end_time =''
  917. this.innersearchform.start_time =''
  918. }
  919. this.innershowSearchinfo=false
  920. },
  921. //回车搜索
  922. searchByTitle(e){
  923. console.log(this.searchinput,'this.searchinput');
  924. console.log(this.parentId,'parentId');
  925. this.getCurrentNodeArchives(this.parentId,this.currentPage,this.pageSize,this.searchinput);
  926. },
  927. //卷内文件回车
  928. searchinnerByTitle(e){
  929. console.log(this.innerinput,'this.innerinput4');
  930. this.getInnerTableData(this.archiveId,this.innerinput);
  931. },
  932. //下载案卷
  933. downLoad(){
  934. console.log(this.tableCheckItem,'选中的文件');
  935. console.log('下载卷内文件');
  936. },
  937. //删除案卷、
  938. delTabledata(){
  939. console.log(this.tableCheckItem,'选中的文件');
  940. if(this.tableCheckItem.length<1){
  941. this.$message({
  942. message: '请选择你要删除的文件',
  943. type: 'warning'
  944. });
  945. }else{
  946. this.$confirm('是否确认删除?', '删除案卷', {
  947. distinguishCancelAndClose: true,
  948. confirmButtonText: '删除',
  949. cancelButtonText: '取消'
  950. }).then(() => {
  951. console.log('删除案卷');
  952. })
  953. }
  954. },
  955. //重置搜索输入值
  956. clearInput(){
  957. this.searchform={}
  958. },
  959. clearInnerInput(){
  960. this.innersearchform={}
  961. this.checkList=[]
  962. }
  963. },
  964. mounted(){
  965. // this.lazyTree(this.parentId);
  966. this.getProjectName();
  967. this.getCurrentNodeArchives(this.parentId,this.currentPage,this.pageSize,this.searchinput,this.searchform.title);
  968. },
  969. filters:{
  970. ellipsis(value) {
  971. if (!value) return "";
  972. if (value.length > 12) {
  973. return value.slice(0, 12) + "...";
  974. }
  975. return value;
  976. },
  977. },
  978. })
  979. </script>
  980. <style scoped>
  981. /* //高亮字体颜色 */
  982. .treebox .el-tree-node.is-current > .el-tree-node__content {
  983. background-color: #e6f2ff!important;
  984. color: #409eff;
  985. }
  986. .addColor{
  987. color: #409eff !important;
  988. }
  989. /* 树形控件样式 */
  990. .level-name{
  991. font-weight: bold;
  992. font-size: 16px;
  993. }
  994. .treebox .el-tree-node{
  995. background: #f1f5f8;
  996. }
  997. .treebox .el-tree-node__content{
  998. padding-left: 5px !important;
  999. background: #f1f5f8;
  1000. }
  1001. .treebox{
  1002. width: 340px;
  1003. height: 100%;
  1004. overflow-y: auto;
  1005. overflow-x:clip;
  1006. }
  1007. .treebox .el-tree{
  1008. display: inline-block;
  1009. /* min-width: 100%; */
  1010. }
  1011. .tree-line .el-tree-node{
  1012. position: relative;
  1013. padding-left: 16px !important;
  1014. }
  1015. .tree-line .el-tree__empty-block{
  1016. background-color: #f1f5f8;
  1017. min-height:calc(100vh - 170px);
  1018. width: 340px;
  1019. }
  1020. .tree-line .el-tree-node__label {
  1021. font-size: 14px;
  1022. }
  1023. .tree-line .el-tree-node__children {
  1024. padding-left: 20px !important;
  1025. }
  1026. .tree-line .el-tree-node::before {
  1027. content: '';
  1028. height: 100%;
  1029. width: 2px;
  1030. position: absolute;
  1031. left: -3px;
  1032. top: -26px;
  1033. border-width: 2px;
  1034. border-left: 2px dashed #0081ff;
  1035. }
  1036. .tree-line .el-tree-node:last-child::before {
  1037. height: 38px;
  1038. }
  1039. .tree-line .el-tree-node::after {
  1040. content: '';
  1041. width: 24px;
  1042. height: 20px;
  1043. position: absolute;
  1044. left: -3px;
  1045. top: 12px;
  1046. border-width: 2px;
  1047. border-top: 2px dashed #0081ff;
  1048. }
  1049. .tree-line > .el-tree-node::after {
  1050. border-top: none;
  1051. }
  1052. .tree-line > .el-tree-node::before {
  1053. border-left: none;
  1054. }
  1055. .tree-line .el-tree-node__expand-icon{
  1056. font-size: 16px;
  1057. }
  1058. .tree-line .el-tree-node__expand-icon.is-leaf {
  1059. color: transparent;
  1060. cursor: default;
  1061. display: none;
  1062. }
  1063. .is_select{
  1064. color:#0081ff;
  1065. background-color:#ecf5ff;
  1066. }
  1067. .contentbox_table .el-table tr{
  1068. background-color: #F1F5F8;
  1069. }
  1070. .contentbox_table .el-table tr .el-table__row--striped{
  1071. background-color:#DAE8F3;
  1072. }
  1073. .contentbox_table1 .el-table tr{
  1074. background-color: #F1F5F8;
  1075. }
  1076. .contentbox_table1 .el-table tr .el-table__row--striped{
  1077. background-color:#DAE8F3;
  1078. }
  1079. </style>
  1080. </html>