ProjectInput.vue 64 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915916917918919920921922923924925926927928929930931932933934935936937938939940941942943944945946947948949950951952953954955956957958959960961962963964965966967968969970971972973974975976977978979980981982983984985986987988989990991992993994995996997998999100010011002100310041005100610071008100910101011101210131014101510161017101810191020102110221023102410251026102710281029103010311032103310341035103610371038103910401041104210431044104510461047104810491050105110521053105410551056105710581059106010611062106310641065106610671068106910701071107210731074107510761077107810791080108110821083108410851086108710881089109010911092109310941095109610971098109911001101110211031104110511061107110811091110111111121113111411151116111711181119112011211122112311241125112611271128112911301131113211331134113511361137113811391140114111421143114411451146114711481149115011511152115311541155115611571158115911601161116211631164116511661167116811691170117111721173117411751176117711781179118011811182118311841185118611871188118911901191119211931194119511961197119811991200120112021203120412051206120712081209121012111212121312141215121612171218121912201221122212231224122512261227122812291230123112321233123412351236123712381239124012411242124312441245124612471248124912501251125212531254125512561257125812591260126112621263126412651266126712681269127012711272127312741275127612771278127912801281128212831284128512861287128812891290129112921293129412951296129712981299130013011302130313041305130613071308130913101311131213131314131513161317131813191320132113221323132413251326132713281329133013311332133313341335133613371338133913401341134213431344134513461347134813491350135113521353135413551356135713581359136013611362136313641365136613671368136913701371137213731374137513761377137813791380138113821383138413851386138713881389139013911392139313941395139613971398139914001401140214031404140514061407140814091410141114121413141414151416141714181419142014211422142314241425142614271428142914301431143214331434143514361437143814391440144114421443144414451446144714481449145014511452145314541455145614571458145914601461146214631464146514661467146814691470147114721473147414751476147714781479148014811482148314841485148614871488148914901491149214931494149514961497149814991500150115021503150415051506150715081509151015111512151315141515151615171518151915201521152215231524152515261527152815291530153115321533153415351536153715381539154015411542154315441545154615471548154915501551155215531554155515561557155815591560156115621563156415651566156715681569157015711572157315741575157615771578157915801581158215831584158515861587158815891590159115921593159415951596159715981599160016011602160316041605160616071608160916101611161216131614161516161617161816191620162116221623162416251626162716281629163016311632163316341635163616371638163916401641164216431644164516461647164816491650165116521653165416551656165716581659166016611662166316641665166616671668166916701671167216731674167516761677167816791680168116821683168416851686168716881689169016911692169316941695169616971698169917001701170217031704170517061707170817091710171117121713171417151716171717181719172017211722172317241725172617271728172917301731173217331734173517361737173817391740174117421743174417451746174717481749175017511752175317541755175617571758175917601761176217631764176517661767176817691770177117721773177417751776177717781779178017811782178317841785178617871788178917901791179217931794179517961797179817991800180118021803180418051806180718081809181018111812181318141815181618171818181918201821182218231824182518261827182818291830183118321833183418351836183718381839184018411842184318441845184618471848184918501851185218531854185518561857185818591860186118621863186418651866186718681869187018711872187318741875187618771878187918801881188218831884188518861887188818891890189118921893189418951896189718981899190019011902190319041905190619071908190919101911191219131914191519161917191819191920192119221923192419251926192719281929193019311932193319341935193619371938193919401941194219431944194519461947194819491950195119521953195419551956195719581959196019611962196319641965196619671968196919701971197219731974197519761977197819791980198119821983198419851986198719881989199019911992199319941995199619971998199920002001200220032004200520062007200820092010201120122013201420152016201720182019202020212022202320242025202620272028202920302031203220332034203520362037203820392040204120422043204420452046204720482049205020512052205320542055
  1. <!-- 项目输入页面 -->
  2. <template>
  3. <div class="project-input-container">
  4. <!-- 从原代码中移动第一个 tab-pane 的内容 -->
  5. <div class="project-selector">
  6. <el-form :inline="true">
  7. <el-form-item label="当前项目">
  8. <el-select
  9. v-model="selectedProjectId"
  10. disabled
  11. placeholder="请选择项目"
  12. style="width: 300px"
  13. @change="handleProjectConfirm"
  14. >
  15. <el-option
  16. v-for="project in projectOptions"
  17. :key="project.id"
  18. :label="project.name"
  19. :value="project.id"
  20. />
  21. </el-select>
  22. </el-form-item>
  23. <el-form-item>
  24. <el-button
  25. v-if="!hasExistingData"
  26. type="primary"
  27. @click="handleAddGspr"
  28. >创建输入项目</el-button
  29. >
  30. <el-button v-else type="primary" @click="handleUpdateGspr"
  31. >更新输入项目</el-button
  32. >
  33. <el-button type="danger" @click="handleDeleteItems">删除</el-button>
  34. </el-form-item>
  35. </el-form>
  36. </div>
  37. <!-- 使用 v-if 控制其余内容的显示 -->
  38. <template v-if="selectedProjectId">
  39. <div class="operation-bar">
  40. <el-form :inline="true" :model="gsprSearchForm" class="search-form">
  41. <el-form-item label="内容">
  42. <el-input
  43. v-model="gsprSearchForm.keyword"
  44. placeholder="请输入项目名称/技术报告位置"
  45. style="width: 300px"
  46. clearable
  47. />
  48. </el-form-item>
  49. <el-form-item label="部门">
  50. <el-select
  51. v-model="gsprSearchForm.department"
  52. placeholder="请选择部门"
  53. clearable
  54. >
  55. <el-option
  56. v-for="(item, index) in departList"
  57. :key="index"
  58. :label="item.label"
  59. :value="item.label"
  60. />
  61. </el-select>
  62. </el-form-item>
  63. <!-- 添加时间范围选择器 -->
  64. <el-form-item label="创建时间">
  65. <el-date-picker
  66. v-model="gsprSearchForm.dateRange"
  67. type="daterange"
  68. range-separator="至"
  69. start-placeholder="开始日期"
  70. end-placeholder="结束日期"
  71. value-format="yyyy-MM-dd"
  72. :picker-options="pickerOptions"
  73. />
  74. </el-form-item>
  75. <!-- 添加内容状态筛选 -->
  76. <el-form-item label="内容状态">
  77. <el-select
  78. v-model="gsprSearchForm.content_empty"
  79. placeholder="请选择"
  80. clearable
  81. >
  82. <!-- <el-option label="请选择状态" value="null" /> -->
  83. <el-option label="有内容" :value="false" />
  84. <el-option label="无内容" :value="true" />
  85. </el-select>
  86. </el-form-item>
  87. <el-form-item>
  88. <el-button type="primary" @click="handleGsprSearch">搜索</el-button>
  89. <el-button @click="handleGsprReset">重置</el-button>
  90. </el-form-item>
  91. </el-form>
  92. </div>
  93. <div>
  94. <el-button type="primary" @click="handleExport">导出输入项目</el-button>
  95. <!-- <el-button type="primary" @click="handleDocViewGspr"
  96. >文档预览</el-button
  97. > -->
  98. </div>
  99. <el-table
  100. :data="gsprTableData"
  101. style="width: 100%"
  102. :default-sort="{ prop: sort_field, order: sort_order }"
  103. @sort-change="handleSortChange"
  104. :row-class-name="getRowClassName"
  105. >
  106. <el-table-column prop="sequence" label="排序" sortable width="80">
  107. <template slot-scope="scope">
  108. <div style="display: flex; align-items: center">
  109. <span style="margin-right: 10px">{{ scope.row.sequence }}</span>
  110. <i
  111. class="el-icon-edit"
  112. style="cursor: pointer; margin-left: 5px"
  113. @click="handleEditSequence(scope.row)"
  114. />
  115. </div>
  116. </template>
  117. </el-table-column>
  118. <el-table-column prop="name" label="项目名称" sortable>
  119. <template slot-scope="scope">
  120. <span v-if="currentModifiedItem === scope.row.id" class="modified-indicator"></span>
  121. {{ scope.row.name }}
  122. </template>
  123. </el-table-column>
  124. <el-table-column prop="tech_report_location" label="技术报告位置" />
  125. <el-table-column prop="department" label="部门" sortable />
  126. <el-table-column prop="content" label="内容" width="450">
  127. <template slot-scope="scope">
  128. <div class="content-cell">
  129. <!-- <el-tooltip
  130. placement="top-start"
  131. :disabled="!scope.row.content"
  132. popper-class="custom-tooltip"
  133. >
  134. <template slot="content">
  135. <div
  136. class="tooltip-content"
  137. style="color: #fff !important"
  138. v-html="scope.row.content"
  139. ></div>
  140. </template>
  141. </el-tooltip> -->
  142. <span class="content-text">{{
  143. getPlainText(scope.row.content)
  144. }}</span>
  145. <i
  146. class="el-icon-edit"
  147. style="cursor: pointer; margin-left: 5px"
  148. @click="handleEditContent(scope.row)"
  149. />
  150. </div>
  151. </template>
  152. </el-table-column>
  153. <el-table-column prop="" label="难度" sortable>
  154. <template slot-scope="scope">
  155. <el-rate
  156. v-model="scope.row.score"
  157. show-score
  158. text-color="#ff9900"
  159. score-template="{value}"
  160. @change="(value) => rateScope(value, scope.row)"
  161. />
  162. </template>
  163. </el-table-column>
  164. <el-table-column label="备注" width="200">
  165. <template slot-scope="scope">
  166. <div style="display: flex; align-items: center">
  167. <span style="margin-right: 10px">{{ scope.row.remarks }}</span>
  168. <i
  169. class="el-icon-edit"
  170. style="cursor: pointer; margin-left: 5px"
  171. @click="handleEditRemark(scope.row)"
  172. />
  173. </div>
  174. </template>
  175. </el-table-column>
  176. <el-table-column prop="modified_by" label="创建人" />
  177. <el-table-column label="操作">
  178. <template slot-scope="scope">
  179. <el-button type="primary" @click="handleViewGspr(scope.row)"
  180. >查看</el-button
  181. >
  182. <!-- <el-button type="primary" @click="handleDocViewGspr(scope.row)"
  183. >文档预览</el-button
  184. > -->
  185. <!-- <el-button type="primary" @click="handleEditGspr(scope.row)"
  186. >编辑</el-button
  187. >
  188. <el-button type="danger" @click="handleDeleteGspr(scope.row)"
  189. >删除</el-button
  190. > -->
  191. </template>
  192. </el-table-column>
  193. </el-table>
  194. <div class="pagination-container">
  195. <el-pagination
  196. :current-page.sync="currentPage"
  197. :page-sizes="[30, 50]"
  198. :page-size="pageSize"
  199. layout="total, sizes, prev, pager, next, jumper"
  200. :total="gsprTotal"
  201. @size-change="handleGsprSizeChange"
  202. @current-change="handleGsprCurrentChange"
  203. />
  204. </div>
  205. <!-- GSPR表单弹窗 -->
  206. <el-dialog
  207. :title="gsprDialogTitle"
  208. :visible.sync="gsprDialogVisible"
  209. :close-on-click-modal="false"
  210. width="700px"
  211. >
  212. <el-form
  213. ref="gsprForm"
  214. :model="gsprForm"
  215. :rules="gsprRules"
  216. label-width="120px"
  217. >
  218. <el-form-item label="名称" prop="name">
  219. <el-input v-model="gsprForm.name" />
  220. </el-form-item>
  221. <el-form-item label="技术报告位置" prop="tech_report_location">
  222. <el-input v-model="gsprForm.tech_report_location" />
  223. </el-form-item>
  224. <el-form-item label="部门" prop="department">
  225. <el-select v-model="gsprForm.department" placeholder="请选择状态">
  226. <el-option
  227. v-for="(item, index) in departList"
  228. :key="index"
  229. :label="item.label"
  230. :value="item.label"
  231. />
  232. </el-select>
  233. </el-form-item>
  234. <!-- <el-form-item label="内容" prop="content">
  235. <div class="editor-area sticky-editor">
  236. <ckeditor
  237. ref="editor"
  238. v-model="gsprForm.content"
  239. :config="editorConfig"
  240. :editorUrl="editorUrl"
  241. ></ckeditor>
  242. </div>
  243. </el-form-item> -->
  244. </el-form>
  245. <div slot="footer">
  246. <el-button @click="gsprDialogVisible = false">取消</el-button>
  247. <el-button type="primary" @click="handleGsprSubmit">确定</el-button>
  248. </div>
  249. </el-dialog>
  250. <!-- 添加内容编辑弹窗 -->
  251. <el-dialog
  252. title="编辑内容"
  253. :visible.sync="contentDialogVisible"
  254. :close-on-click-modal="false"
  255. width="70%"
  256. top="10px"
  257. >
  258. <!-- <el-form :model="contentForm" ref="contentForm">
  259. <el-form-item label="内容" prop="content"> -->
  260. <!-- <el-inputwidth="600px"
  261. type="textarea"
  262. v-model="contentForm.content"
  263. :rows="4"
  264. placeholder="请输入内容"
  265. /> -->
  266. <!-- <ckeditor
  267. ref="editor"
  268. v-model="contentForm.content"
  269. :config="editorConfig"
  270. :editorUrl="editorUrl"
  271. ></ckeditor> -->
  272. <CanvasEditor
  273. ref="wordEditor"
  274. :key="keys"
  275. :edit-mode="Modetype"
  276. :html-data="htmlData"
  277. :doc-json="docJson"
  278. :editor-options="editorOptions"
  279. @save="save"
  280. @is-save="getSave"
  281. />
  282. <!-- </el-form-item>
  283. </el-form> -->
  284. <div slot="footer">
  285. <el-button @click="contentDialogVisible = false">取消</el-button>
  286. <el-button type="primary" @click="handleContentSubmit"
  287. >确定</el-button
  288. >
  289. </div>
  290. </el-dialog>
  291. <!-- 查看弹窗 -->
  292. <el-dialog
  293. title="查看详情"
  294. :visible.sync="viewDialogVisible"
  295. :close-on-click-modal="false"
  296. width="80%"
  297. >
  298. <div class="view-details">
  299. <el-descriptions :column="2" border>
  300. <el-descriptions-item label="项目名称">{{
  301. viewForm.name
  302. }}</el-descriptions-item>
  303. <el-descriptions-item label="技术报告位置">{{
  304. viewForm.tech_report_location
  305. }}</el-descriptions-item>
  306. <el-descriptions-item label="部门">{{
  307. viewForm.department
  308. }}</el-descriptions-item>
  309. <el-descriptions-item label="难度">
  310. <el-rate
  311. v-model="viewForm.score"
  312. disabled
  313. show-score
  314. text-color="#ff9900"
  315. score-template="{value}"
  316. />
  317. </el-descriptions-item>
  318. <el-descriptions-item label="备注" :span="2">{{
  319. viewForm.remarks || "-"
  320. }}</el-descriptions-item>
  321. <el-descriptions-item label="内容" :span="2">
  322. <div class="content-view" v-html="viewForm.content || '-'" />
  323. </el-descriptions-item>
  324. </el-descriptions>
  325. </div>
  326. </el-dialog>
  327. <!-- 添加文档预览对话框 -->
  328. <el-dialog
  329. title="文档预览"
  330. :visible.sync="docPreviewDialogVisible"
  331. :close-on-click-modal="false"
  332. width="65%"
  333. class="doc-preview-dialog"
  334. >
  335. <div class="doc-preview-header">
  336. <span>当前文档:</span>
  337. <el-select
  338. v-model="docPreviewSel"
  339. placeholder="请选择文档"
  340. style="width: 300px"
  341. @change="handleDocPreviewChange"
  342. >
  343. <el-option
  344. v-for="doc in boundTemplateList"
  345. :key="doc.id"
  346. :label="doc.title"
  347. :value="doc"
  348. />
  349. </el-select>
  350. </div>
  351. <div v-loading="previewLoading" class="doc-preview-content">
  352. <div v-if="previewContent" v-html="previewContent" />
  353. <el-empty v-else description="请选择要预览的文档" />
  354. </div>
  355. </el-dialog>
  356. </template>
  357. <!-- 未选择项目时显示提示 -->
  358. <el-empty v-else description="请先选择一个项目" :image-size="200" />
  359. <!-- 添加删除确认对话框 -->
  360. <el-dialog
  361. title="删除确认"
  362. :visible.sync="deleteDialogVisible"
  363. width="400px"
  364. >
  365. <!-- 添加提示信息区域 -->
  366. <div class="delete-warning" style="margin-bottom: 20px">
  367. <i class="el-icon-warning" style="color: #e6a23c; margin-right: 8px" />
  368. <span
  369. >此操作将永久删除该项目下的所有输入项目,请输入'DELETE'确认删除</span
  370. >
  371. </div>
  372. <el-form
  373. ref="deleteForm"
  374. :model="deleteForm"
  375. :rules="deleteRules"
  376. label-width="100px"
  377. >
  378. <el-form-item label="确认文本" prop="confirmText">
  379. <el-input
  380. v-model="deleteForm.confirmText"
  381. placeholder="请输入'DELETE'"
  382. />
  383. </el-form-item>
  384. </el-form>
  385. <span slot="footer" class="dialog-footer">
  386. <el-button @click="deleteDialogVisible = false">取消</el-button>
  387. <el-button type="danger" @click="confirmDelete">确认删除</el-button>
  388. </span>
  389. </el-dialog>
  390. <!-- 其余第一个tab的内容... -->
  391. <!-- 修改序号 -->
  392. <el-dialog
  393. v-el-drag-dialog
  394. :visible.sync="dialogVisible"
  395. title="修改序号"
  396. width="30%"
  397. :close-on-click-modal="false"
  398. append-to-body
  399. >
  400. <el-form :model="sequenceForm" label-width="80px">
  401. <el-form-item label="序号">
  402. <el-input-number
  403. v-model="sequenceForm.sequence"
  404. :min="0"
  405. controls-position="right"
  406. />
  407. </el-form-item>
  408. </el-form>
  409. <template #footer>
  410. <span class="dialog-footer">
  411. <el-button @click="dialogVisible = false">取消</el-button>
  412. <el-button type="primary" @click="submitSequence">确定</el-button>
  413. </span>
  414. </template>
  415. </el-dialog>
  416. <!-- 添加备注编辑对话框 -->
  417. <el-dialog
  418. title="编辑备注"
  419. :visible.sync="remarkDialogVisible"
  420. :close-on-click-modal="false"
  421. width="500px"
  422. >
  423. <el-form :model="remarkForm">
  424. <el-form-item label="备注">
  425. <el-input
  426. v-model="remarkForm.remarks"
  427. type="textarea"
  428. :rows="4"
  429. placeholder="请输入备注"
  430. />
  431. </el-form-item>
  432. </el-form>
  433. <div slot="footer">
  434. <el-button @click="remarkDialogVisible = false">取消</el-button>
  435. <el-button type="primary" @click="handleRemarkSubmit">确定</el-button>
  436. </div>
  437. </el-dialog>
  438. </div>
  439. </template>
  440. <script>
  441. import {
  442. projectListFromTemplate,
  443. projectAdd,
  444. departments,
  445. projectUpdate,
  446. projectDelete,
  447. create_items,
  448. delete_items,
  449. update_items,
  450. rateScope,
  451. sequence,
  452. projectList,
  453. } from "@/api/knowledge";
  454. import {
  455. searchProject,
  456. getProjectInfo,
  457. searchTemplateList,
  458. } from "@/api/project";
  459. import axios from "axios";
  460. import elDragDialog from "@/directive/el-drag-dialog";
  461. import CanvasEditor from "@/components/CanvasEditor/index"; // 确保路径正确
  462. export default {
  463. name: "ProjectInput",
  464. components: {
  465. CanvasEditor, // 使用驼峰式注册
  466. // 或者使用短横线式注册
  467. // 'canvas-editor': CanvasEditor,
  468. },
  469. directives: { elDragDialog },
  470. data() {
  471. // 自定义验证规则
  472. const validateDeleteConfirm = (rule, value, callback) => {
  473. if (value !== "DELETE") {
  474. callback(new Error("请输入正确的确认文本"));
  475. } else {
  476. callback();
  477. }
  478. };
  479. return {
  480. pickerOptions: {
  481. shortcuts: [
  482. {
  483. text: "最近一周",
  484. onClick(picker) {
  485. const end = new Date();
  486. const start = new Date();
  487. start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
  488. picker.$emit("pick", [start, end]);
  489. },
  490. },
  491. {
  492. text: "最近一个月",
  493. onClick(picker) {
  494. const end = new Date();
  495. const start = new Date();
  496. start.setMonth(start.getMonth() - 1);
  497. picker.$emit("pick", [start, end]);
  498. },
  499. },
  500. ],
  501. },
  502. selectedProjectId: null,
  503. projectOptions: [],
  504. gsprTableData: [],
  505. gsprSearchForm: {
  506. keyword: "",
  507. department: "",
  508. content_empty: null,
  509. },
  510. gsprTotal: 0,
  511. departList: [],
  512. sort_field: "sequence",
  513. sort_order: "asc",
  514. hasExistingData: false,
  515. gsprDialogVisible: false,
  516. gsprDialogTitle: "",
  517. gsprForm: {
  518. id: "",
  519. name: "",
  520. tech_report_locations: "",
  521. department: "",
  522. content: "",
  523. remarks: "",
  524. sequence: 0,
  525. },
  526. gsprRules: {
  527. name: [{ required: true, message: "请输入名称", trigger: "blur" }],
  528. tech_report_location: [
  529. { required: true, message: "请输入技术报告位置", trigger: "blur" },
  530. ],
  531. department: [
  532. { required: true, message: "请输入部门", trigger: "blur" },
  533. ],
  534. status: [{ required: true, message: "请选择状态", trigger: "change" }],
  535. },
  536. editorOptions: {},
  537. contentDialogVisible: false,
  538. contentForm: {
  539. id: "",
  540. content: "",
  541. name: "",
  542. department: "",
  543. },
  544. /* 删除逻辑 */
  545. deleteDialogVisible: false,
  546. deleteForm: {
  547. confirmText: "",
  548. },
  549. deleteRules: {
  550. confirmText: [
  551. { required: true, message: "请输入确认文本", trigger: "blur" },
  552. { validator: validateDeleteConfirm, trigger: "blur" },
  553. ],
  554. },
  555. editorUrl: "/ckeditor/ckeditor.js",
  556. editorConfig: {
  557. language: "zh-cn",
  558. height: "300px",
  559. },
  560. dialogVisible: false,
  561. sequenceForm: {
  562. sequence: 1,
  563. id: null,
  564. },
  565. remarkDialogVisible: false,
  566. remarkForm: {
  567. id: "",
  568. remarks: "",
  569. },
  570. /* 已绑定项目 */
  571. documentIds: [],
  572. templateLocations: [], // 存储传递过来的位置信息
  573. matchedContents: {}, // 存储技术报告位置匹配的内容
  574. Modetype: "edit",
  575. htmlData: "", // 编辑器html数据
  576. docJson: null, // 编辑器getValue数据
  577. keys: new Date().getTime(), // 给编辑器赋值不刷新的时候,改变key
  578. /* 查看 */
  579. viewDialogVisible: false,
  580. viewForm: {
  581. name: "",
  582. tech_report_location: "",
  583. department: "",
  584. score: 0,
  585. remarks: "",
  586. content: "",
  587. },
  588. /* 文档预览 */
  589. docPreviewDialogVisible: false,
  590. previewData: {
  591. name: "",
  592. tech_report_location: "",
  593. interpretation: "",
  594. content: "",
  595. },
  596. /* 文档列表 */
  597. boundTemplateList: [],
  598. docPreviewSel: "",
  599. previewLoading: false,
  600. previewContent: "",
  601. currentPage: 1,
  602. pageSize: 30,
  603. // 修改状态跟踪
  604. currentModifiedItem: null, // 当前高亮的项ID(只保持一个)
  605. originalData: new Map(), // 存储原始数据用于对比
  606. clearTimer: null, // 自动清理定时器
  607. };
  608. },
  609. mounted() {
  610. this.fetchProjects().then(() => {
  611. // Get project ID from URL query parameter
  612. const urlProjectId = this.$route.query.id;
  613. if (urlProjectId) {
  614. this.selectedProjectId = parseInt(urlProjectId);
  615. this.handleProjectConfirm();
  616. }
  617. });
  618. // 获取并处理传递过来的模板位置数据
  619. /* const projectDataStr = this.$route.query.projectData;
  620. if (projectDataStr) {
  621. try {
  622. const projectData = JSON.parse(decodeURIComponent(projectDataStr));
  623. this.templateLocations = projectData.locations;
  624. // 创建位置到内容的映射
  625. this.matchedContents = this.templateLocations.reduce((acc, loc) => {
  626. if (loc.type === "template_location") {
  627. // 移除位置标记中的括号以便匹配
  628. const cleanLocation = loc.tech_report_location;
  629. acc[cleanLocation] = loc;
  630. }
  631. return acc;
  632. }, {});
  633. } catch (error) {
  634. console.error("解析项目数据失败:", error);
  635. }
  636. } */
  637. this.init();
  638. },
  639. methods: {
  640. /* 当前文档选择 */
  641. // 处理文档选择变化
  642. async handleDocPreviewChange(docId) {
  643. if (!docId) {
  644. this.previewContent = "";
  645. return;
  646. }
  647. this.previewLoading = true;
  648. try {
  649. const docData = JSON.parse(docId.data);
  650. // 假设这是获取文档预览内容的API
  651. this.previewContent = docData[0].content;
  652. } catch (error) {
  653. this.$message.error(
  654. "获取文档预览失败:" + (error.message || "未知错误")
  655. );
  656. this.previewContent = "";
  657. } finally {
  658. this.previewLoading = false;
  659. }
  660. },
  661. /* 处理文字 */
  662. getPlainText(html) {
  663. if (!html) return "";
  664. // 创建临时 DOM 元素来解析 HTML
  665. const temp = document.createElement("div");
  666. temp.innerHTML = html;
  667. // 获取纯文本内容
  668. const plainText = temp.textContent || temp.innerText;
  669. // 截断文本
  670. return plainText.length > 50
  671. ? plainText.substring(0, 50) + "..."
  672. : plainText;
  673. },
  674. // 添加 CanvasEditor 相关的方法
  675. save(data) {
  676. // 处理保存逻辑
  677. console.log("保存数据:", data);
  678. // 这里可以添加具体的保存实现
  679. },
  680. getSave(isSaved) {
  681. // 处理保存状态
  682. console.log("是否已保存:", isSaved);
  683. // 这里可以添加保存状态的处理逻辑
  684. },
  685. // 修改 handleEditContent 方法,添加编辑器数据的处理
  686. handleEditContent(row) {
  687. const selectedProject = this.projectOptions.find(
  688. (p) => p.id === this.selectedProjectId
  689. );
  690. // 保存原始数据用于对比
  691. this.saveOriginalData(row);
  692. // 处理 content 内容,将文本格式转换为 HTML 并清理空样式
  693. const processedContent = this.cleanEmptyStyles(
  694. this.convertTextToHtml(row.content)
  695. );
  696. this.contentForm = {
  697. sequence: row.sequence,
  698. project: selectedProject.id,
  699. project_name: selectedProject.name,
  700. id: row.id,
  701. tech_report_location: row.tech_report_location,
  702. content: row.content, // processedContent,
  703. name: row.name,
  704. department: row.department,
  705. };
  706. if (row.font_style) {
  707. this.editorOptions = row.font_style;
  708. } else {
  709. this.editorOptions = {
  710. font: "Arial",
  711. size: 14,
  712. bold: false,
  713. align: "left",
  714. };
  715. }
  716. // 设置编辑器数据
  717. this.htmlData = processedContent;
  718. this.Modetype = "edit";
  719. this.keys = new Date().getTime(); // 强制刷新编辑器
  720. this.contentDialogVisible = true;
  721. },
  722. // 处理内容中的a标签,移除a标签但保持表头样式
  723. processContentForSave(htmlContent) {
  724. try {
  725. if (!htmlContent) return htmlContent;
  726. console.log('开始处理内容,移除a标签但保持表头样式:', htmlContent);
  727. // 创建临时DOM元素来解析HTML
  728. const tempDiv = document.createElement('div');
  729. tempDiv.innerHTML = htmlContent;
  730. // 处理所有表格
  731. const tables = tempDiv.querySelectorAll('table');
  732. tables.forEach(table => {
  733. // 处理表头行
  734. const headerRows = table.querySelectorAll('thead tr, tr:first-child');
  735. headerRows.forEach(headerRow => {
  736. // 确保表头有背景色
  737. if (!headerRow.style.backgroundColor) {
  738. headerRow.style.backgroundColor = '#f5f5f5';
  739. }
  740. // 获取表头单元格
  741. const headerCells = headerRow.querySelectorAll('th, td');
  742. // 找到第一个没有a标签的表头单元格作为样式参考
  743. let referenceCell = null;
  744. let referenceStyle = null;
  745. for (let cell of headerCells) {
  746. if (!cell.querySelector('a')) {
  747. referenceCell = cell;
  748. referenceStyle = window.getComputedStyle(cell);
  749. break;
  750. }
  751. }
  752. // 如果没找到参考单元格,使用默认样式
  753. if (!referenceStyle) {
  754. referenceStyle = {
  755. getPropertyValue: (prop) => {
  756. const defaults = {
  757. 'font-weight': 'bold',
  758. 'font-size': '14px',
  759. 'font-family': 'Arial, sans-serif',
  760. 'color': '#000000',
  761. 'background-color': '#f5f5f5',
  762. 'text-align': 'left'
  763. };
  764. return defaults[prop] || '';
  765. }
  766. };
  767. }
  768. console.log('参考样式:', {
  769. fontWeight: referenceStyle.getPropertyValue('font-weight'),
  770. fontSize: referenceStyle.getPropertyValue('font-size'),
  771. fontFamily: referenceStyle.getPropertyValue('font-family'),
  772. color: referenceStyle.getPropertyValue('color'),
  773. backgroundColor: referenceStyle.getPropertyValue('background-color')
  774. });
  775. // 处理所有表头单元格
  776. headerCells.forEach(cell => {
  777. // 确保表头单元格有背景色
  778. if (!cell.style.backgroundColor) {
  779. cell.style.backgroundColor = '#f5f5f5';
  780. }
  781. // 处理单元格内的超链接
  782. const cellLinks = cell.querySelectorAll('a');
  783. cellLinks.forEach(cellLink => {
  784. const span = document.createElement('span');
  785. span.textContent = cellLink.textContent;
  786. // 直接应用参考样式
  787. span.style.fontWeight = referenceStyle.getPropertyValue('font-weight') || 'bold';
  788. span.style.fontSize = referenceStyle.getPropertyValue('font-size') || '14px';
  789. span.style.fontFamily = referenceStyle.getPropertyValue('font-family') || 'Arial, sans-serif';
  790. span.style.color = referenceStyle.getPropertyValue('color') || '#000000';
  791. span.style.textAlign = referenceStyle.getPropertyValue('text-align') || 'left';
  792. // 移除链接样式
  793. span.style.textDecoration = 'none';
  794. span.style.cursor = 'default';
  795. console.log('替换a标签,应用样式:', {
  796. fontWeight: span.style.fontWeight,
  797. fontSize: span.style.fontSize,
  798. fontFamily: span.style.fontFamily,
  799. color: span.style.color,
  800. backgroundColor: span.style.backgroundColor
  801. });
  802. cellLink.parentNode.replaceChild(span, cellLink);
  803. });
  804. });
  805. });
  806. // 处理表格单元格中的超链接(非表头)
  807. const cellLinks = table.querySelectorAll('td a, tbody a');
  808. cellLinks.forEach(cellLink => {
  809. const span = document.createElement('span');
  810. span.textContent = cellLink.textContent;
  811. // 保持单元格的默认样式
  812. span.style.color = 'inherit';
  813. span.style.textDecoration = 'none';
  814. span.style.cursor = 'default';
  815. cellLink.parentNode.replaceChild(span, cellLink);
  816. });
  817. });
  818. // 处理表格外的超链接
  819. const links = tempDiv.querySelectorAll('a:not(table a)');
  820. links.forEach(link => {
  821. const span = document.createElement('span');
  822. span.textContent = link.textContent;
  823. // 获取父元素的样式
  824. const parentElement = link.parentElement;
  825. if (parentElement) {
  826. const parentStyles = window.getComputedStyle(parentElement);
  827. // 复制重要的样式属性
  828. const stylesToCopy = [
  829. 'background-color', 'background', 'font-family', 'font-size',
  830. 'font-weight', 'font-style', 'text-align', 'padding', 'margin',
  831. 'border', 'border-color', 'border-width', 'border-style',
  832. 'color', 'text-decoration'
  833. ];
  834. stylesToCopy.forEach(styleProp => {
  835. const value = parentStyles.getPropertyValue(styleProp);
  836. if (value && value !== 'initial' && value !== 'inherit' && value !== 'transparent') {
  837. span.style.setProperty(styleProp, value);
  838. }
  839. });
  840. }
  841. // 设置文本样式为普通文本,移除链接样式
  842. span.style.textDecoration = 'none';
  843. span.style.cursor = 'default';
  844. // 替换超链接元素
  845. link.parentNode.replaceChild(span, link);
  846. });
  847. const result = tempDiv.innerHTML;
  848. console.log('处理完成后的HTML:', result);
  849. return result;
  850. } catch (error) {
  851. console.error('处理内容时出错:', error);
  852. return htmlContent; // 如果处理失败,返回原始内容
  853. }
  854. },
  855. // 修改 handleContentSubmit 方法
  856. async handleContentSubmit() {
  857. try {
  858. // 获取编辑器的最新内容
  859. const editorContent = this.$refs.wordEditor.editorRef.command.getHTML();
  860. // 获取当前的字体样式配置
  861. const fontStyle = this.editorOptions || {
  862. font: 'Arial',
  863. size: 14,
  864. align: 'left'
  865. };
  866. // 创建样式字符串
  867. const styleString = `font-family: ${fontStyle.font}; font-size: ${fontStyle.size}px; text-align: ${fontStyle.align};}`;
  868. // 处理表格内容
  869. const processedContent = editorContent.main.replace(
  870. /<table[^>]*>([\s\S]*?)<\/table>/g,
  871. (tableMatch) => {
  872. // 首先处理表格级别的空白和换行
  873. const cleanTableMatch = tableMatch
  874. .replace(/>\s+</g, '><') // 移除标签之间的空白
  875. .replace(/\n/g, '') // 移除所有换行符
  876. .replace(/<div style="text-align: justify;">([\s\S]*?)<\/div>/g, '$1') // 移除对齐div标签
  877. .replace(/<a[^>]*>([\s\S]*?)<\/a>/g, (match, content) => {
  878. // 使用配置的字体样式替换超链接文本
  879. return `<span style="${styleString}">${content}</span>`;
  880. });
  881. return cleanTableMatch.replace(
  882. /(<td[^>]*>)([\s\S]*?)(<\/td>)/g,
  883. (tdMatch, tdOpen, content, tdClose) => {
  884. // 处理单元格内容
  885. const cleanContent = content
  886. .replace(/<div style="text-align: justify;">([\s\S]*?)<\/div>/g, '$1') // 移除对齐div标签
  887. .replace(/<a[^>]*>([\s\S]*?)<\/a>/g, (match, linkContent) => {
  888. // 使用配置的字体样式替换超链接文本
  889. return `<span style="${styleString}">${linkContent}</span>`;
  890. })
  891. .replace(/\n/g, '') // 移除所有换行
  892. .replace(/\s+/g, ' ') // 多个空格变成一个
  893. .replace(/^\s+|\s+$/g, '') // 移除首尾空格
  894. .replace(/—\s+/g, '— ') // 处理破折号后的空格
  895. .replace(/\s+—/g, ' —') // 处理破折号前的空格
  896. .replace(/\s*([,.])\s*/g, '$1 '); // 处理标点符号周围的空格
  897. return tdOpen + cleanContent + tdClose;
  898. }
  899. );
  900. }
  901. );
  902. // 更新 contentForm
  903. this.contentForm.content = this.processContentForSave(editorContent.main);
  904. const submitData = {
  905. ...this.contentForm,
  906. id: this.contentForm.id,
  907. content: this.contentForm.content,
  908. font_style: this.editorOptions // 保存字体样式配置
  909. };
  910. await projectUpdate(submitData);
  911. this.$message.success("内容更新成功");
  912. this.contentDialogVisible = false;
  913. // 检查数据是否有变化,如果有则标记为已修改
  914. const originalData = this.originalData.get(this.contentForm.id);
  915. if (this.checkDataChanged(submitData, originalData)) {
  916. this.markAsModified(this.contentForm.id);
  917. }
  918. this.fetchGsprData();
  919. } catch (error) {
  920. this.$message.error("内容更新失败");
  921. }
  922. },
  923. // 修改现有的 handleEditRemark 方法
  924. handleEditRemark(row) {
  925. // 保存原始数据用于对比
  926. this.saveOriginalData(row);
  927. // 只复制需要的字段
  928. this.remarkForm = {
  929. id: row.id,
  930. remarks: row.remarks || "",
  931. sequence: row.sequence,
  932. project: row.project,
  933. content: row.content,
  934. name:row.name,
  935. department:row.department
  936. };
  937. this.remarkDialogVisible = true;
  938. },
  939. // 修改备注提交方法
  940. async handleRemarkSubmit() {
  941. try {
  942. console.log(this.remarkForm);
  943. // 只更新必要的字段
  944. const updateData = {
  945. ...this.remarkForm,
  946. remarks: this.remarkForm.remarks,
  947. id: this.remarkForm.id,
  948. };
  949. await projectUpdate(updateData);
  950. this.$message.success("备注更新成功");
  951. this.remarkDialogVisible = false;
  952. // 检查数据是否有变化,如果有则标记为已修改
  953. const originalData = this.originalData.get(this.remarkForm.id);
  954. if (this.checkDataChanged(updateData, originalData)) {
  955. this.markAsModified(this.remarkForm.id);
  956. }
  957. this.fetchGsprData();
  958. } catch (error) {
  959. this.$message.error("备注更新失败");
  960. }
  961. },
  962. /* 修改评分 */
  963. async rateScope(value, row) {
  964. try {
  965. // 保存原始数据用于对比
  966. if (!this.originalData.has(row.id)) {
  967. this.saveOriginalData(row);
  968. }
  969. const response = await rateScope({
  970. id: row.id,
  971. score: value,
  972. });
  973. if (response.status === 200) {
  974. this.$message.success("评分更新成功");
  975. // 更新本地数据
  976. const index = this.gsprTableData.findIndex(
  977. (item) => item.id === row.id
  978. );
  979. if (index !== -1) {
  980. this.gsprTableData[index].score = value;
  981. }
  982. // 检查数据是否有变化,如果有则标记为已修改
  983. const originalData = this.originalData.get(row.id);
  984. if (originalData && originalData.score !== value) {
  985. this.markAsModified(row.id);
  986. }
  987. } else {
  988. throw new Error(response.message || "评分更新失败");
  989. }
  990. } catch (error) {
  991. this.$message.error(error.message || "评分更新失败");
  992. // 恢复原始评分
  993. row.score = row.score || 0;
  994. }
  995. },
  996. /* 修改序号 */
  997. handleEditSequence(row) {
  998. // 保存原始数据用于对比
  999. this.saveOriginalData(row);
  1000. this.sequenceForm.sequence = row.sequence;
  1001. this.sequenceForm.id = row.id;
  1002. this.dialogVisible = true;
  1003. },
  1004. // 提交序号修改
  1005. async submitSequence() {
  1006. try {
  1007. await sequence({
  1008. id: this.sequenceForm.id,
  1009. new_sequence: this.sequenceForm.sequence,
  1010. });
  1011. this.$message.success("修改序号成功");
  1012. this.dialogVisible = false;
  1013. // 检查数据是否有变化,如果有则标记为已修改
  1014. const originalData = this.originalData.get(this.sequenceForm.id);
  1015. if (originalData && originalData.sequence !== this.sequenceForm.sequence) {
  1016. this.markAsModified(this.sequenceForm.id);
  1017. }
  1018. // 重新加载数据
  1019. this.fetchGsprData();
  1020. } catch (error) {
  1021. this.$message.error("修改序号失败:" + error.message);
  1022. }
  1023. },
  1024. /* 项目导出 */
  1025. async handleExport() {
  1026. const loading = this.$loading({
  1027. lock: true,
  1028. text: "导出中...",
  1029. });
  1030. try {
  1031. const response = await axios({
  1032. url: `${process.env.VUE_APP_BASE_API}/project-input/export`,
  1033. method: "post",
  1034. data: { project_id: this.selectedProjectId },
  1035. headers: {
  1036. "Content-Type": "application/json",
  1037. Authorization: "Bearer " + localStorage.getItem("token"), // 根据实际token获取方式调整
  1038. },
  1039. });
  1040. // 检查响应数据
  1041. if (
  1042. !response.data ||
  1043. !response.data.data ||
  1044. !response.data.data.data.file_content
  1045. ) {
  1046. throw new Error("导出失败:返回数据格式错误");
  1047. }
  1048. // 获取文件内容和文件名
  1049. const { file_content, file_name } = response.data.data.data;
  1050. // 将base64转换为blob
  1051. const byteCharacters = atob(file_content);
  1052. const byteNumbers = new Array(byteCharacters.length);
  1053. for (let i = 0; i < byteCharacters.length; i++) {
  1054. byteNumbers[i] = byteCharacters.charCodeAt(i);
  1055. }
  1056. const byteArray = new Uint8Array(byteNumbers);
  1057. const blob = new Blob([byteArray], {
  1058. type: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet",
  1059. });
  1060. // 下载文件
  1061. const link = document.createElement("a");
  1062. link.href = window.URL.createObjectURL(blob);
  1063. link.download = file_name;
  1064. document.body.appendChild(link);
  1065. link.click();
  1066. document.body.removeChild(link);
  1067. window.URL.revokeObjectURL(link.href);
  1068. this.$message.success(response.data.message || "导出成功");
  1069. } catch (error) {
  1070. console.error("导出错误:", error);
  1071. let errorMessage = "导出失败,请稍后重试";
  1072. if (error.response) {
  1073. switch (error.response.status) {
  1074. case 401:
  1075. errorMessage = "导出失败:未授权,请重新登录";
  1076. break;
  1077. case 403:
  1078. errorMessage = "导出失败:没有导出权限";
  1079. break;
  1080. case 404:
  1081. errorMessage = "导出失败:导出接口不存在";
  1082. break;
  1083. case 500:
  1084. errorMessage = "导出失败:服务器内部错误";
  1085. break;
  1086. default:
  1087. errorMessage = `导出失败:${error.response.status}`;
  1088. }
  1089. }
  1090. this.$message.error(errorMessage);
  1091. } finally {
  1092. loading.close();
  1093. }
  1094. },
  1095. /* 删除 */
  1096. async handleDeleteGspr(row) {
  1097. try {
  1098. await this.$confirm("确认删除该记录?", "提示", {
  1099. type: "warning",
  1100. });
  1101. // 替换为实际的删除API调用
  1102. await projectDelete({ id: row.id });
  1103. this.$message.success("删除成功");
  1104. this.fetchGsprData();
  1105. } catch (error) {
  1106. if (error !== "cancel") {
  1107. this.$message.error("删除失败");
  1108. }
  1109. }
  1110. },
  1111. /* 文档预览 */
  1112. async handleDocViewGspr(row) {
  1113. try {
  1114. const loading = this.$loading({
  1115. lock: true,
  1116. text: "加载文档预览...",
  1117. spinner: "el-icon-loading",
  1118. background: "rgba(0, 0, 0, 0.7)",
  1119. });
  1120. searchTemplateList({ ids: this.documentIds.join(",") || 0 }).then(
  1121. (res) => {
  1122. if (res.status !== 200) return;
  1123. this.boundTemplateList = res.data;
  1124. loading.close();
  1125. this.docPreviewDialogVisible = true;
  1126. }
  1127. );
  1128. } catch (error) {
  1129. loading.close();
  1130. this.$message.error(
  1131. "获取文档预览失败:" + (error.message || "未知错误")
  1132. );
  1133. }
  1134. },
  1135. /* 查看 */
  1136. handleViewGspr(row) {
  1137. this.viewForm = {
  1138. name: row.name,
  1139. tech_report_location: row.tech_report_location,
  1140. department: row.department,
  1141. score: row.score || 0,
  1142. remarks: row.remarks,
  1143. content: row.content,
  1144. };
  1145. this.viewDialogVisible = true;
  1146. },
  1147. /* 编辑 */
  1148. handleEditGspr(row) {
  1149. this.gsprDialogTitle = "编辑文献项目";
  1150. this.gsprForm = { ...row };
  1151. this.gsprDialogVisible = true;
  1152. },
  1153. // 修改回显方法,解析样式
  1154. convertTextToHtml(text) {
  1155. if (!text) return "";
  1156. let html = text;
  1157. // 处理表格标记(包含边框样式)
  1158. html = html.replace(
  1159. /\[表格\|style=(.*?)\|class=(.*?)\]([\s\S]*?)(?=\[|$)/g,
  1160. (match, tableStyle, tableClass, tableContent) => {
  1161. const rows = tableContent.trim().split("\n");
  1162. let tableHtml = `<table style="${tableStyle}" class="${tableClass}">`;
  1163. rows.forEach((row) => {
  1164. tableHtml += "<tr>";
  1165. const cells = row.split("|").map((cell) => {
  1166. const cellMatch = cell.match(
  1167. /(.*?)(?:\[style=(.*?)\|class=(.*?)\])?$/
  1168. );
  1169. if (cellMatch) {
  1170. const [_, content, style = "", className = ""] = cellMatch;
  1171. return `<td style="${style}" class="${className}">${content.trim()}</td>`;
  1172. }
  1173. return `<td>${cell.trim()}</td>`;
  1174. });
  1175. tableHtml += cells.join("") + "</tr>";
  1176. });
  1177. tableHtml += "</table>";
  1178. return tableHtml;
  1179. }
  1180. );
  1181. // 2. 处理图片标记(保持不变)
  1182. html = html.replace(
  1183. /\[图片:(.*?)\|style=(.*?)\|class=(.*?)\]/g,
  1184. (match, src, style, className) => {
  1185. return `<img src="${src}" alt="图片" style="${style}" class="${className}">`;
  1186. }
  1187. );
  1188. // 3. 处理文本样式(保持不变)
  1189. html = html.replace(
  1190. /\[文本:(.*?)\|style=(.*?)\|class=(.*?)\]/g,
  1191. (match, content, style, className) => {
  1192. return `<span style="${style}" class="${className}">${content}</span>`;
  1193. }
  1194. );
  1195. // 4. 处理换行
  1196. html = html.replace(/\n/g, "<br>");
  1197. return html;
  1198. },
  1199. // 添加辅助方法:清理空样式属性
  1200. cleanEmptyStyles(html) {
  1201. return html
  1202. .replace(/style=""/g, "")
  1203. .replace(/class=""/g, "")
  1204. .replace(/\s+>/g, ">");
  1205. },
  1206. /* */
  1207. /* async handleContentSubmit() {
  1208. try {
  1209. // 创建一个函数来处理富文本内容,保留样式
  1210. const processContent = (htmlContent) => {
  1211. const tempDiv = document.createElement("div");
  1212. tempDiv.innerHTML = htmlContent;
  1213. // 处理图片:保留样式属性
  1214. const images = tempDiv.getElementsByTagName("img");
  1215. Array.from(images).forEach((img) => {
  1216. const style = img.getAttribute("style") || "";
  1217. const className = img.getAttribute("class") || "";
  1218. const imgPlaceholder = `[图片:${img.src}|style=${style}|class=${className}]`;
  1219. img.replaceWith(document.createTextNode(imgPlaceholder));
  1220. });
  1221. // 处理表格:保留完整的样式属性,包括边框
  1222. const tables = tempDiv.getElementsByTagName("table");
  1223. Array.from(tables).forEach((table) => {
  1224. const tableStyle = table.getAttribute("style") || "";
  1225. const tableClass = table.getAttribute("class") || "";
  1226. const tableBorder = table.getAttribute("border") || "";
  1227. const rows = Array.from(table.rows).map((row) => {
  1228. return Array.from(row.cells)
  1229. .map((cell) => {
  1230. const cellStyle = cell.getAttribute("style") || "";
  1231. const cellClass = cell.getAttribute("class") || "";
  1232. const cellBorder = cell.getAttribute("border") || "";
  1233. const content = cell.textContent.trim();
  1234. // 合并所有样式属性
  1235. const cellStyles = [
  1236. cellStyle,
  1237. cellBorder ? `border: ${cellBorder}px solid #000;` : "",
  1238. ]
  1239. .filter(Boolean)
  1240. .join(" ");
  1241. return `${content}${
  1242. cellStyles || cellClass
  1243. ? `[style=${cellStyles}|class=${cellClass}]`
  1244. : ""
  1245. }`;
  1246. })
  1247. .join("|");
  1248. });
  1249. // 合并表格的样式属性
  1250. const tableStyles = [
  1251. tableStyle,
  1252. tableBorder ? `border: ${tableBorder}px solid #000;` : "",
  1253. ]
  1254. .filter(Boolean)
  1255. .join(" ");
  1256. const tablePlaceholder = `[表格|style=${tableStyles}|class=${tableClass}]\n${rows.join(
  1257. "\n"
  1258. )}`;
  1259. table.replaceWith(document.createTextNode(tablePlaceholder));
  1260. });
  1261. // 处理文本样式
  1262. const styledSpans = tempDiv.getElementsByTagName("span");
  1263. Array.from(styledSpans).forEach((span) => {
  1264. const style = span.getAttribute("style") || "";
  1265. const className = span.getAttribute("class") || "";
  1266. if (style || className) {
  1267. const content = span.textContent;
  1268. span.replaceWith(
  1269. document.createTextNode(
  1270. `[文本:${content}|style=${style}|class=${className}]`
  1271. )
  1272. );
  1273. }
  1274. });
  1275. return tempDiv.textContent || tempDiv.innerText;
  1276. };
  1277. const submitData = {
  1278. ...this.contentForm,
  1279. content: processContent(this.contentForm.content),
  1280. };
  1281. await projectUpdate(submitData);
  1282. this.$message.success("内容更新成功");
  1283. this.contentDialogVisible = false;
  1284. this.fetchGsprData();
  1285. } catch (error) {
  1286. this.$message.error("内容更新失败");
  1287. }
  1288. }, */
  1289. // 同样修改handleGsprSubmit方法
  1290. async handleGsprSubmit() {
  1291. try {
  1292. await this.$refs.gsprForm.validate();
  1293. // 处理富文本内容
  1294. const processContent = (htmlContent) => {
  1295. const tempDiv = document.createElement("div");
  1296. tempDiv.innerHTML = htmlContent;
  1297. // 处理图片
  1298. const images = tempDiv.getElementsByTagName("img");
  1299. Array.from(images).forEach((img) => {
  1300. const imgPlaceholder = `[图片:${img.src}]`;
  1301. img.replaceWith(document.createTextNode(imgPlaceholder));
  1302. });
  1303. // 处理表格
  1304. const tables = tempDiv.getElementsByTagName("table");
  1305. Array.from(tables).forEach((table) => {
  1306. const rows = Array.from(table.rows).map((row) =>
  1307. Array.from(row.cells)
  1308. .map((cell) => cell.textContent.trim())
  1309. .join(" | ")
  1310. );
  1311. const tablePlaceholder = "[表格]\n" + rows.join("\n");
  1312. table.replaceWith(document.createTextNode(tablePlaceholder));
  1313. });
  1314. return tempDiv.textContent || tempDiv.innerText;
  1315. };
  1316. // 创建新对象避免修改原始数据
  1317. const submitData = {
  1318. ...this.gsprForm,
  1319. content: processContent(this.gsprForm.content),
  1320. };
  1321. if (this.gsprForm.id) {
  1322. await projectUpdate(submitData);
  1323. } else {
  1324. await projectAdd(submitData);
  1325. }
  1326. this.$message.success(this.gsprForm.id ? "更新成功" : "创建成功");
  1327. this.gsprDialogVisible = false;
  1328. this.fetchGsprData();
  1329. } catch (error) {
  1330. if (error !== false) {
  1331. this.$message.error("保存失败");
  1332. }
  1333. }
  1334. },
  1335. /* */
  1336. // async handleGsprSubmit() {
  1337. // try {
  1338. // await this.$refs.gsprForm.validate()
  1339. // if (this.gsprForm.id) {
  1340. // await projectUpdate(this.gsprForm)
  1341. // } else {
  1342. // await projectAdd(this.gsprForm)
  1343. // }
  1344. // this.$message.success(this.gsprForm.id ? '更新成功' : '创建成功')
  1345. // this.gsprDialogVisible = false
  1346. // this.fetchGsprData()
  1347. // } catch (error) {
  1348. // if (error !== false) {
  1349. // this.$message.error('保存失败')
  1350. // }
  1351. // }
  1352. // },
  1353. /* 初始化项目列表 */
  1354. async fetchProjects() {
  1355. try {
  1356. const response = await searchProject({ page: 1, pageSize: 999 });
  1357. if (response.status === 200) {
  1358. this.projectOptions = response.data.dataList;
  1359. // 如果有当前项目ID但没有选中项目,自动选中
  1360. // 如果有当前项目ID但没有选中项目,自动选中
  1361. if (!this.selectedProjectId && this.$route.query.id) {
  1362. this.selectedProjectId = parseInt(this.$route.query.id);
  1363. this.handleProjectConfirm();
  1364. }
  1365. }
  1366. } catch (error) {
  1367. this.$message.error("获取项目列表失败");
  1368. }
  1369. },
  1370. async handleProjectConfirm() {
  1371. if (!this.selectedProjectId) {
  1372. this.$message.warning("请先选择一个项目");
  1373. return;
  1374. }
  1375. const selectedProject = this.projectOptions.find(
  1376. (p) => p.id === this.selectedProjectId
  1377. );
  1378. if (!selectedProject) {
  1379. this.$message.error("未找到选中的项目");
  1380. return;
  1381. }
  1382. this.$store.dispatch("project/setCurrentProject", {
  1383. id: selectedProject.id,
  1384. name: selectedProject.name,
  1385. });
  1386. localStorage.setItem(
  1387. "currentProject",
  1388. JSON.stringify({
  1389. id: selectedProject.id,
  1390. name: selectedProject.name,
  1391. })
  1392. );
  1393. // 恢复该项目上次的分页设置
  1394. try {
  1395. const savedPage = Number(
  1396. localStorage.getItem(`gspr_page_${this.selectedProjectId}`)
  1397. );
  1398. const savedPageSize = Number(
  1399. localStorage.getItem(`gspr_page_size_${this.selectedProjectId}`)
  1400. );
  1401. if (!Number.isNaN(savedPage) && savedPage > 0) {
  1402. this.currentPage = savedPage;
  1403. }
  1404. if (!Number.isNaN(savedPageSize) && savedPageSize > 0) {
  1405. this.pageSize = savedPageSize;
  1406. }
  1407. } catch (e) {
  1408. // 忽略本地存储异常
  1409. }
  1410. this.gsprSearchForm.project_id = this.selectedProjectId;
  1411. this.fetchGsprData();
  1412. },
  1413. // 创建项目
  1414. async handleAddGspr() {
  1415. if (!this.selectedProjectId) {
  1416. this.$message.warning("请先选择一个项目");
  1417. return;
  1418. }
  1419. const loading = this.$loading({
  1420. lock: true,
  1421. text: "正在创建项目...",
  1422. spinner: "el-icon-loading",
  1423. background: "rgba(0, 0, 0, 0.7)",
  1424. });
  1425. try {
  1426. const res = await projectListFromTemplate(
  1427. /* create_items */ {
  1428. project_id: this.selectedProjectId,
  1429. }
  1430. );
  1431. if (res.status === 200) {
  1432. this.$message.success("输入项目创建成功");
  1433. await this.fetchGsprData();
  1434. }
  1435. } catch (error) {
  1436. this.$message.error("创建失败: " + (error.message || "未知错误"));
  1437. } finally {
  1438. loading.close();
  1439. }
  1440. },
  1441. // 更新项目
  1442. async handleUpdateGspr() {
  1443. if (!this.selectedProjectId) {
  1444. this.$message.warning("请先选择一个项目");
  1445. return;
  1446. }
  1447. const selectedProject = this.projectOptions.find(
  1448. (p) => p.id === this.selectedProjectId
  1449. );
  1450. try {
  1451. await this.$confirm(
  1452. "此操作将更新当前项目的所有输入项目,是否继续?",
  1453. "提示",
  1454. {
  1455. confirmButtonText: "确定",
  1456. cancelButtonText: "取消",
  1457. type: "warning",
  1458. }
  1459. );
  1460. const loading = this.$loading({
  1461. lock: true,
  1462. text: "正在更新项目...",
  1463. spinner: "el-icon-loading",
  1464. background: "rgba(0, 0, 0, 0.7)",
  1465. });
  1466. try {
  1467. const res = await projectListFromTemplate(
  1468. /* update_items */ {
  1469. // 假设有一个update_items的API
  1470. project_id: selectedProject.id,
  1471. /* project_name: selectedProject.name */
  1472. }
  1473. );
  1474. console.log(res);
  1475. if (res.status !== 200) {
  1476. throw new Error("更新失败");
  1477. }
  1478. this.$message.success(`输入项目更新成功`);
  1479. await this.fetchGsprData();
  1480. } finally {
  1481. loading.close();
  1482. }
  1483. } catch (error) {
  1484. if (error !== "cancel") {
  1485. this.$message.error("更新失败: " + (error.message || "未知错误"));
  1486. }
  1487. }
  1488. },
  1489. // 删除项目
  1490. async handleDeleteItems() {
  1491. if (!this.selectedProjectId) {
  1492. this.$message.warning("请先选择一个项目");
  1493. return;
  1494. }
  1495. const selectedProject = this.projectOptions.find(
  1496. (p) => p.id === this.selectedProjectId
  1497. );
  1498. this.$confirm(
  1499. `您确定要删除项目 "${selectedProject.name}" 的所有输入项目吗?此操作不可恢复。`,
  1500. "警告",
  1501. {
  1502. confirmButtonText: "继续删除",
  1503. cancelButtonText: "取消",
  1504. type: "warning",
  1505. }
  1506. )
  1507. .then(() => {
  1508. this.deleteForm.confirmText = "";
  1509. this.deleteDialogVisible = true;
  1510. })
  1511. .catch(() => {
  1512. this.$message({
  1513. type: "info",
  1514. message: "已取消删除",
  1515. });
  1516. });
  1517. },
  1518. // 确认删除
  1519. confirmDelete() {
  1520. this.$refs.deleteForm.validate(async (valid) => {
  1521. if (!valid) {
  1522. return false;
  1523. }
  1524. try {
  1525. const loading = this.$loading({
  1526. lock: true,
  1527. text: "正在删除...",
  1528. spinner: "el-icon-loading",
  1529. background: "rgba(0, 0, 0, 0.7)",
  1530. });
  1531. const response = await delete_items({
  1532. project_id: this.selectedProjectId,
  1533. });
  1534. loading.close();
  1535. if (response.status === 200) {
  1536. this.$message.success("删除成功");
  1537. this.deleteDialogVisible = false;
  1538. // 重新加载数据
  1539. this.fetchGsprData();
  1540. } else {
  1541. this.$message.error(response.message || "删除失败");
  1542. }
  1543. } catch (error) {
  1544. this.$message.error("删除失败:" + (error.message || "未知错误"));
  1545. }
  1546. });
  1547. },
  1548. // 修改获取数据的方法
  1549. async fetchGsprData() {
  1550. this.gsprTableData = [];
  1551. if (!this.selectedProjectId) {
  1552. this.$message.warning("请先选择项目");
  1553. return;
  1554. }
  1555. const loading = this.$loading({
  1556. lock: true,
  1557. text: "加载中...",
  1558. spinner: "el-icon-loading",
  1559. background: "rgba(0, 0, 0, 0.7)",
  1560. });
  1561. try {
  1562. const params = {
  1563. project_id: this.selectedProjectId,
  1564. page: this.currentPage,
  1565. page_size: this.pageSize,
  1566. sort_field: this.sort_field,
  1567. sort_order: this.sort_order,
  1568. ...this.gsprPageForm,
  1569. ...this.gsprSearchForm,
  1570. start_date: this.gsprSearchForm.dateRange?.[0] || null,
  1571. end_date: this.gsprSearchForm.dateRange?.[1] || null,
  1572. };
  1573. const response = await projectList(params);
  1574. if (!response || !response.data) {
  1575. throw new Error("API响应数据格式错误");
  1576. }
  1577. response.data.list.map((el) => {
  1578. if (el.score == null) {
  1579. el.score = 0;
  1580. }
  1581. });
  1582. const responseData = response.data;
  1583. // 过滤掉 tech_report_locations 为空的数据
  1584. /* const filteredItems = responseData.items
  1585. .filter(item => item.tech_report_locations)
  1586. .map(item => ({
  1587. id: item.id,
  1588. location: item.location || '',
  1589. tech_report_location: item.tech_report_locations || '',
  1590. name: item.name || '',
  1591. department: item.department || '',
  1592. sequence: item.sequence || 0,
  1593. remarks: item.remarks || '',
  1594. content: item.content || '',
  1595. project: item.project || '',
  1596. project_name: item.project_name || '',
  1597. create_time: item.create_time || '',
  1598. update_time: item.update_time || '',
  1599. score: item.score || 0
  1600. })) */
  1601. this.gsprTableData = responseData.list; //filteredItems
  1602. this.gsprTotal = responseData.total; // 使用API返回的总数
  1603. this.hasExistingData = this.gsprTableData.length > 0;
  1604. // 保存原始数据用于后续对比
  1605. this.gsprTableData.forEach(item => {
  1606. if (!this.originalData.has(item.id)) {
  1607. this.saveOriginalData(item);
  1608. }
  1609. });
  1610. } catch (error) {
  1611. console.error("数据加载失败:", error);
  1612. this.$message.error(error.message || "获取数据失败");
  1613. this.gsprTableData = [];
  1614. this.gsprTotal = 0;
  1615. this.hasExistingData = false;
  1616. } finally {
  1617. loading.close();
  1618. }
  1619. },
  1620. // 添加一个辅助方法来检查位置是否匹配
  1621. isLocationMatched(location) {
  1622. if (!location) return false;
  1623. const cleanLocation = location.replace(/[\[\]【】]/g, "");
  1624. return !!this.matchedContents[cleanLocation];
  1625. },
  1626. handleGsprSearch() {
  1627. this.currentPage = Number(
  1628. localStorage.getItem(`gspr_page_${this.selectedProjectId}`)
  1629. ) ; // 搜索时重置到第一页
  1630. console.log(this.currentPage);
  1631. this.searchList();
  1632. /* this.fetchGsprData(); */
  1633. },
  1634. /* 搜索 */
  1635. async searchList() {
  1636. this.gsprTableData = [];
  1637. const loading = this.$loading({
  1638. lock: true,
  1639. text: "加载中...",
  1640. spinner: "el-icon-loading",
  1641. background: "rgba(0, 0, 0, 0.7)",
  1642. });
  1643. try {
  1644. const params = {
  1645. project_id: this.selectedProjectId,
  1646. page: this.currentPage,
  1647. page_size: this.pageSize,
  1648. sort_field: this.sort_field,
  1649. sort_order: this.sort_order,
  1650. ...this.gsprPageForm,
  1651. ...this.gsprSearchForm,
  1652. start_date: this.gsprSearchForm.dateRange?.[0] || null,
  1653. end_date: this.gsprSearchForm.dateRange?.[1] || null,
  1654. };
  1655. const response = await projectList(params);
  1656. response.data.list.map((el) => {
  1657. if (el.score == null) {
  1658. el.score = 0;
  1659. }
  1660. });
  1661. this.gsprTableData = response.data.list; //filteredItems
  1662. this.gsprTotal = response.data.total; // 使用API返回的总数
  1663. /* this.currentPage = response.data.current_page; */
  1664. this.hasExistingData = this.gsprTableData.length > 0;
  1665. // 保存原始数据用于后续对比
  1666. this.gsprTableData.forEach(item => {
  1667. if (!this.originalData.has(item.id)) {
  1668. this.saveOriginalData(item);
  1669. }
  1670. });
  1671. console.log(response);
  1672. } finally {
  1673. loading.close();
  1674. }
  1675. },
  1676. handleGsprReset() {
  1677. this.gsprSearchForm = {
  1678. keyword: "",
  1679. department: "",
  1680. project_id: this.selectedProjectId,
  1681. dateRange: [],
  1682. content_empty: null,
  1683. };
  1684. this.handleGsprSearch();
  1685. },
  1686. // 排序处理
  1687. handleSortChange({ prop, order }) {
  1688. this.sort_field = prop;
  1689. this.sort_order = order === "ascending" ? "asc" : "desc";
  1690. if (!order) {
  1691. this.sort_field = "name";
  1692. this.sort_order = "desc";
  1693. }
  1694. this.fetchGsprData();
  1695. },
  1696. /* 获取字段 */
  1697. init() {
  1698. departments().then((res) => {
  1699. if (res.status !== 200) return;
  1700. this.departList = res.data.departments;
  1701. });
  1702. /* 获取当前项目绑定的文档 */
  1703. getProjectInfo({ id: this.$route.query.id }).then((res) => {
  1704. this.documentIds = res.data.documentIds;
  1705. });
  1706. },
  1707. handleGsprSizeChange(val) {
  1708. this.pageSize = val;
  1709. // this.currentPage = 1; // 切换每页显示数量时重置到第一页
  1710. try {
  1711. localStorage.setItem(
  1712. `gspr_page_size_${this.selectedProjectId}`,
  1713. String(this.pageSize)
  1714. );
  1715. localStorage.setItem(
  1716. `gspr_page_${this.selectedProjectId}`,
  1717. String(this.currentPage)
  1718. );
  1719. } catch (e) {
  1720. // 忽略本地存储异常
  1721. }
  1722. this.fetchGsprData();
  1723. },
  1724. handleGsprCurrentChange(val) {
  1725. this.currentPage = val;
  1726. try {
  1727. localStorage.setItem(
  1728. `gspr_page_${this.selectedProjectId}`,
  1729. String(this.currentPage)
  1730. );
  1731. } catch (e) {
  1732. // 忽略本地存储异常
  1733. }
  1734. this.fetchGsprData();
  1735. },
  1736. // 获取行样式类名
  1737. getRowClassName({ row }) {
  1738. if (this.currentModifiedItem === row.id) {
  1739. return 'modified-row';
  1740. }
  1741. return '';
  1742. },
  1743. // 标记项为已修改(只保持一个高亮)
  1744. markAsModified(itemId) {
  1745. // 清除之前的定时器
  1746. if (this.clearTimer) {
  1747. clearTimeout(this.clearTimer);
  1748. this.clearTimer = null;
  1749. }
  1750. // 设置新的高亮项
  1751. this.currentModifiedItem = itemId;
  1752. // 设置10秒后自动清除
  1753. this.clearTimer = setTimeout(() => {
  1754. this.currentModifiedItem = null;
  1755. this.clearTimer = null;
  1756. }, 10000); // 10秒
  1757. },
  1758. // 清除修改标记
  1759. clearModifiedMark() {
  1760. if (this.clearTimer) {
  1761. clearTimeout(this.clearTimer);
  1762. this.clearTimer = null;
  1763. }
  1764. this.currentModifiedItem = null;
  1765. },
  1766. // 检查数据是否有变化
  1767. checkDataChanged(newData, originalData) {
  1768. if (!originalData) return true;
  1769. const fieldsToCheck = ['name', 'tech_report_location', 'department', 'content', 'remarks', 'score'];
  1770. return fieldsToCheck.some(field => newData[field] !== originalData[field]);
  1771. },
  1772. // 保存原始数据
  1773. saveOriginalData(item) {
  1774. this.originalData.set(item.id, { ...item });
  1775. },
  1776. },
  1777. // 组件销毁时清理定时器
  1778. beforeDestroy() {
  1779. if (this.clearTimer) {
  1780. clearTimeout(this.clearTimer);
  1781. this.clearTimer = null;
  1782. }
  1783. },
  1784. };
  1785. </script>
  1786. <style lang="scss" >
  1787. .project-input-container {
  1788. padding: 20px;
  1789. }
  1790. .editor-area {
  1791. ::v-deep .cke_top {
  1792. display: block; // Hide the original toolbar
  1793. }
  1794. }
  1795. .project-input-container {
  1796. padding: 20px;
  1797. }
  1798. .pagination-container {
  1799. display: flex;
  1800. justify-content: flex-end;
  1801. }
  1802. /* 添加编辑器工具栏样式 */
  1803. .editor-area {
  1804. .cke_top {
  1805. display: flex !important;
  1806. justify-content: space-between;
  1807. align-items: center;
  1808. padding: 6px 8px !important;
  1809. /* 工具栏组样式 */
  1810. .cke_toolgroup {
  1811. margin: 0 2px;
  1812. display: flex;
  1813. align-items: center;
  1814. }
  1815. /* 工具栏按钮样式 */
  1816. .cke_toolbar {
  1817. float: none !important;
  1818. display: inline-flex;
  1819. align-items: center;
  1820. }
  1821. }
  1822. }
  1823. /* 如果需要调整编辑器容器宽度 */
  1824. .cke_chrome {
  1825. width: 100% !important;
  1826. }
  1827. /* 内容部分样式 */
  1828. .content-cell {
  1829. display: flex;
  1830. align-items: center;
  1831. justify-content: space-between;
  1832. .content-text {
  1833. flex: 1;
  1834. white-space: nowrap;
  1835. overflow: hidden;
  1836. text-overflow: ellipsis;
  1837. max-width: 430px; // 可以根据需要调整最大宽度
  1838. }
  1839. }
  1840. /* 自定义 Tooltip 样式 */
  1841. .custom-tooltip {
  1842. min-width: 200px !important; // 设置最大宽度
  1843. /* background-color: rgba(232, 232, 232, 0.9) !important; */
  1844. line-height: 1.5; // 设置行高
  1845. word-break: break-all; // 允许在任意字符间断行
  1846. white-space: pre-wrap; // 保留空格和换行
  1847. .el-tooltip__popper {
  1848. padding: 10px !important; // 增加内边距
  1849. font-size: 12px; // 设置字体大小
  1850. }
  1851. }
  1852. ::v-deep .el-dialog {
  1853. margin-top: 0 !important;
  1854. }
  1855. /* 修改项高亮样式 */
  1856. .modified-row {
  1857. background-color: #e6f7ff !important; /* 浅蓝色背景 */
  1858. border-left: 4px solid #1890ff !important; /* 左侧蓝色边框 */
  1859. transition: all 0.3s ease; /* 添加过渡效果 */
  1860. }
  1861. .modified-row:hover {
  1862. background-color: #bae7ff !important; /* 悬停时更深的蓝色 */
  1863. }
  1864. @keyframes pulse {
  1865. 0% {
  1866. opacity: 1;
  1867. transform: scale(1);
  1868. }
  1869. 50% {
  1870. opacity: 0.7;
  1871. transform: scale(1.1);
  1872. }
  1873. 100% {
  1874. opacity: 1;
  1875. transform: scale(1);
  1876. }
  1877. }
  1878. @keyframes fadeOut {
  1879. 0% {
  1880. opacity: 1;
  1881. }
  1882. 90% {
  1883. opacity: 1;
  1884. }
  1885. 100% {
  1886. opacity: 0;
  1887. }
  1888. }
  1889. </style>