index.vue 7.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246
  1. <template>
  2. <div class="midd-page">
  3. <el-tabs v-model="activeName" @tab-click="handleClick">
  4. <el-tab-pane label="AED数据表" name="first">
  5. <el-table :data="filteredTableData" style="width: 100%">
  6. <el-table-column
  7. label="工作类型"
  8. prop="workType"
  9. :filters="workTypeFilters"
  10. :filter-method="filterWorkType"
  11. filter-placement="bottom-end"
  12. >
  13. <template #default="scope">
  14. <el-select
  15. v-model="scope.row.workType"
  16. placeholder="请选择"
  17. v-if="scope.row.isEdit"
  18. >
  19. <el-option label="类型1" value="type1"></el-option>
  20. <el-option label="类型2" value="type2"></el-option>
  21. <el-option label="类型3" value="type3"></el-option>
  22. </el-select>
  23. <span v-else>{{ scope.row.workType }}</span>
  24. </template>
  25. </el-table-column>
  26. <el-table-column
  27. label="项目"
  28. prop="project"
  29. :filters="projectFilters"
  30. :filter-method="filterProject"
  31. filter-placement="bottom-end"
  32. >
  33. <template #default="scope">
  34. <el-input
  35. v-model="scope.row.project"
  36. v-if="scope.row.isEdit"
  37. ></el-input>
  38. <span v-else>{{ scope.row.project }}</span>
  39. </template>
  40. </el-table-column>
  41. <el-table-column label="说明" prop="description">
  42. <template #default="scope">
  43. <el-input
  44. v-model="scope.row.description"
  45. v-if="scope.row.isEdit"
  46. ></el-input>
  47. <span v-else>{{ scope.row.description }}</span>
  48. </template>
  49. </el-table-column>
  50. <el-table-column label="范例" prop="example">
  51. <template #default="scope">
  52. <el-input
  53. v-model="scope.row.example"
  54. v-if="scope.row.isEdit"
  55. ></el-input>
  56. <span v-else>
  57. {{ scope.row.example }}
  58. <i
  59. class="el-icon-edit"
  60. @click="openExampleDialog(scope.row)"
  61. style="cursor: pointer; margin-left: 5px"
  62. ></i>
  63. </span>
  64. </template>
  65. </el-table-column>
  66. <el-table-column label="操作">
  67. <template #default="scope">
  68. <el-button
  69. size="small"
  70. @click="handleEdit(scope.$index, scope.row)"
  71. v-if="!scope.row.isEdit"
  72. >
  73. 编辑
  74. </el-button>
  75. <el-button
  76. size="small"
  77. type="success"
  78. @click="handleSave(scope.$index, scope.row)"
  79. v-else
  80. >
  81. 保存
  82. </el-button>
  83. <el-button
  84. size="small"
  85. type="danger"
  86. @click="handleDelete(scope.$index, scope.row)"
  87. >
  88. 删除
  89. </el-button>
  90. </template>
  91. </el-table-column>
  92. </el-table>
  93. <el-button type="primary" @click="handleAdd" style="margin-top: 20px"
  94. >新增行</el-button
  95. >
  96. </el-tab-pane>
  97. <el-tab-pane label="SOTA数据表" name="second"></el-tab-pane>
  98. <el-tab-pane label="SOTA内容表" name="third"></el-tab-pane>
  99. <el-tab-pane label="SOTA汇总表" name="fourth"></el-tab-pane>
  100. </el-tabs>
  101. <el-dialog :visible.sync="dialogVisible" title="编辑范例" width="30%">
  102. <el-input v-model="currentExample" type="textarea" :rows="4"></el-input>
  103. <template #footer>
  104. <span class="dialog-footer">
  105. <el-button @click="dialogVisible = false">取消</el-button>
  106. <el-button type="primary" @click="saveExample">确定</el-button>
  107. </span>
  108. </template>
  109. </el-dialog>
  110. </div>
  111. </template>
  112. <script>
  113. export default {
  114. name: "MiddPage",
  115. data() {
  116. return {
  117. activeName: "first",
  118. tableData: [
  119. {
  120. workType: "复制",
  121. project: "indication",
  122. description:
  123. "器械在文献中使用的适应症,按照器械分析,也需要添加器械使用部位以区分",
  124. example: "t1d: n=191;",
  125. isEdit: false,
  126. },
  127. {
  128. workType: "总结",
  129. project: "Study Design/ Method",
  130. description:
  131. "患者/试验者的人种,国家地区,以查阅是否存在数据上人种差异",
  132. example:
  133. "white non-hispanic: n=247;african american:n=25;hispanic or latino: n=34",
  134. isEdit: false,
  135. },
  136. {
  137. workType: "总结和数据提取;",
  138. project: "Alternative device(treatment)",
  139. description:
  140. "Device name + model name如无,可写疗法(以评价的器械的替代疗法)",
  141. example:
  142. "Capillary blood by BMG;Venous blood by YSI(此处为CGM的替代疗法)",
  143. isEdit: false,
  144. },
  145. ],
  146. workTypeFilters: [
  147. { text: "类型1", value: "type1" },
  148. { text: "类型2", value: "type2" },
  149. { text: "类型3", value: "type3" },
  150. ],
  151. projectFilters: [],
  152. activeFilters: {
  153. workType: [],
  154. project: [],
  155. },
  156. dialogVisible: false,
  157. currentExample: "",
  158. currentRow: null,
  159. };
  160. },
  161. computed: {
  162. filteredTableData() {
  163. return this.tableData.filter((data) => {
  164. return (
  165. (!this.activeFilters.workType.length ||
  166. this.activeFilters.workType.includes(data.workType)) &&
  167. (!this.activeFilters.project.length ||
  168. this.activeFilters.project.includes(data.project))
  169. );
  170. });
  171. },
  172. },
  173. created() {
  174. this.updateProjectFilters();
  175. },
  176. methods: {
  177. openExampleDialog(row) {
  178. console.log(112);
  179. this.dialogVisible = true;
  180. this.currentExample = row.example;
  181. this.currentRow = row;
  182. },
  183. saveExample() {
  184. if (this.currentRow) {
  185. this.currentRow.example = this.currentExample;
  186. }
  187. this.dialogVisible = false;
  188. },
  189. handleEdit(index, row) {
  190. row.isEdit = true;
  191. },
  192. handleSave(index, row) {
  193. row.isEdit = false;
  194. this.updateProjectFilters();
  195. // 在这里可以添加保存到后端的逻辑
  196. },
  197. handleDelete(index, row) {
  198. this.tableData.splice(index, 1);
  199. this.updateProjectFilters();
  200. // 在这里可以添加从后端删除的逻辑
  201. },
  202. handleAdd() {
  203. this.tableData.push({
  204. workType: "",
  205. project: "",
  206. description: "",
  207. example: "",
  208. isEdit: true,
  209. });
  210. },
  211. filterWorkType(value, row) {
  212. return row.workType === value;
  213. },
  214. filterProject(value, row) {
  215. return row.project === value;
  216. },
  217. updateProjectFilters() {
  218. const projects = [...new Set(this.tableData.map((item) => item.project))];
  219. this.projectFilters = projects.map((project) => ({
  220. text: project,
  221. value: project,
  222. }));
  223. },
  224. },
  225. watch: {
  226. tableData: {
  227. handler() {
  228. this.updateProjectFilters();
  229. },
  230. deep: true,
  231. },
  232. },
  233. };
  234. </script>
  235. <style scoped>
  236. .midd-page {
  237. padding: 20px;
  238. }
  239. .el-icon-edit {
  240. font-size: 14px;
  241. color: #409eff;
  242. }
  243. </style>