|
@@ -1,65 +1,105 @@
|
|
|
<template>
|
|
|
- <div class="midd-page">
|
|
|
- <el-table :data="filteredTableData" style="width: 100%">
|
|
|
- <el-table-column
|
|
|
- label="工作类型"
|
|
|
- prop="workType"
|
|
|
- :filters="workTypeFilters"
|
|
|
- :filter-method="filterWorkType"
|
|
|
- filter-placement="bottom-end"
|
|
|
- >
|
|
|
- <template #default="scope">
|
|
|
- <el-select v-model="scope.row.workType" placeholder="请选择" v-if="scope.row.isEdit">
|
|
|
- <el-option label="类型1" value="type1"></el-option>
|
|
|
- <el-option label="类型2" value="type2"></el-option>
|
|
|
- <el-option label="类型3" value="type3"></el-option>
|
|
|
- </el-select>
|
|
|
- <span v-else>{{ scope.row.workType }}</span>
|
|
|
- </template>
|
|
|
- </el-table-column>
|
|
|
- <el-table-column
|
|
|
- label="项目"
|
|
|
- prop="project"
|
|
|
- :filters="projectFilters"
|
|
|
- :filter-method="filterProject"
|
|
|
- filter-placement="bottom-end"
|
|
|
- >
|
|
|
- <template #default="scope">
|
|
|
- <el-input v-model="scope.row.project" v-if="scope.row.isEdit"></el-input>
|
|
|
- <span v-else>{{ scope.row.project }}</span>
|
|
|
- </template>
|
|
|
- </el-table-column>
|
|
|
- <el-table-column label="说明" prop="description">
|
|
|
- <template #default="scope">
|
|
|
- <el-input v-model="scope.row.description" v-if="scope.row.isEdit"></el-input>
|
|
|
- <span v-else>{{ scope.row.description }}</span>
|
|
|
- </template>
|
|
|
- </el-table-column>
|
|
|
- <el-table-column label="范例" prop="example">
|
|
|
- <template #default="scope">
|
|
|
- <el-input v-model="scope.row.example" v-if="scope.row.isEdit"></el-input>
|
|
|
- <span v-else>
|
|
|
+ <div class="midd-page">
|
|
|
+ <el-tabs v-model="activeName" @tab-click="handleClick">
|
|
|
+ <el-tab-pane label="AED数据表" name="first">
|
|
|
+ <el-table :data="filteredTableData" style="width: 100%">
|
|
|
+ <el-table-column
|
|
|
+ label="工作类型"
|
|
|
+ prop="workType"
|
|
|
+ :filters="workTypeFilters"
|
|
|
+ :filter-method="filterWorkType"
|
|
|
+ filter-placement="bottom-end"
|
|
|
+ >
|
|
|
+ <template #default="scope">
|
|
|
+ <el-select
|
|
|
+ v-model="scope.row.workType"
|
|
|
+ placeholder="请选择"
|
|
|
+ v-if="scope.row.isEdit"
|
|
|
+ >
|
|
|
+ <el-option label="类型1" value="type1"></el-option>
|
|
|
+ <el-option label="类型2" value="type2"></el-option>
|
|
|
+ <el-option label="类型3" value="type3"></el-option>
|
|
|
+ </el-select>
|
|
|
+ <span v-else>{{ scope.row.workType }}</span>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column
|
|
|
+ label="项目"
|
|
|
+ prop="project"
|
|
|
+ :filters="projectFilters"
|
|
|
+ :filter-method="filterProject"
|
|
|
+ filter-placement="bottom-end"
|
|
|
+ >
|
|
|
+ <template #default="scope">
|
|
|
+ <el-input
|
|
|
+ v-model="scope.row.project"
|
|
|
+ v-if="scope.row.isEdit"
|
|
|
+ ></el-input>
|
|
|
+ <span v-else>{{ scope.row.project }}</span>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column label="说明" prop="description">
|
|
|
+ <template #default="scope">
|
|
|
+ <el-input
|
|
|
+ v-model="scope.row.description"
|
|
|
+ v-if="scope.row.isEdit"
|
|
|
+ ></el-input>
|
|
|
+ <span v-else>{{ scope.row.description }}</span>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column label="范例" prop="example">
|
|
|
+ <template #default="scope">
|
|
|
+ <el-input
|
|
|
+ v-model="scope.row.example"
|
|
|
+ v-if="scope.row.isEdit"
|
|
|
+ ></el-input>
|
|
|
+ <span v-else>
|
|
|
{{ scope.row.example }}
|
|
|
- <i class="el-icon-edit" @click="openExampleDialog(scope.row)" style="cursor: pointer; margin-left: 5px;"></i>
|
|
|
- </span>
|
|
|
- </template>
|
|
|
- </el-table-column>
|
|
|
- <el-table-column label="操作">
|
|
|
- <template #default="scope">
|
|
|
- <el-button size="small" @click="handleEdit(scope.$index, scope.row)" v-if="!scope.row.isEdit">
|
|
|
- 编辑
|
|
|
- </el-button>
|
|
|
- <el-button size="small" type="success" @click="handleSave(scope.$index, scope.row)" v-else>
|
|
|
- 保存
|
|
|
- </el-button>
|
|
|
- <el-button size="small" type="danger" @click="handleDelete(scope.$index, scope.row)">
|
|
|
- 删除
|
|
|
- </el-button>
|
|
|
- </template>
|
|
|
- </el-table-column>
|
|
|
- </el-table>
|
|
|
- <el-button type="primary" @click="handleAdd" style="margin-top: 20px;">新增行</el-button>
|
|
|
- <el-dialog :visible.sync="dialogVisible" title="编辑范例" width="30%">
|
|
|
+ <i
|
|
|
+ class="el-icon-edit"
|
|
|
+ @click="openExampleDialog(scope.row)"
|
|
|
+ style="cursor: pointer; margin-left: 5px"
|
|
|
+ ></i>
|
|
|
+ </span>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column label="操作">
|
|
|
+ <template #default="scope">
|
|
|
+ <el-button
|
|
|
+ size="small"
|
|
|
+ @click="handleEdit(scope.$index, scope.row)"
|
|
|
+ v-if="!scope.row.isEdit"
|
|
|
+ >
|
|
|
+ 编辑
|
|
|
+ </el-button>
|
|
|
+ <el-button
|
|
|
+ size="small"
|
|
|
+ type="success"
|
|
|
+ @click="handleSave(scope.$index, scope.row)"
|
|
|
+ v-else
|
|
|
+ >
|
|
|
+ 保存
|
|
|
+ </el-button>
|
|
|
+ <el-button
|
|
|
+ size="small"
|
|
|
+ type="danger"
|
|
|
+ @click="handleDelete(scope.$index, scope.row)"
|
|
|
+ >
|
|
|
+ 删除
|
|
|
+ </el-button>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ </el-table>
|
|
|
+ <el-button type="primary" @click="handleAdd" style="margin-top: 20px"
|
|
|
+ >新增行</el-button
|
|
|
+ >
|
|
|
+ </el-tab-pane>
|
|
|
+ <el-tab-pane label="SOTA数据表" name="second"></el-tab-pane>
|
|
|
+ <el-tab-pane label="SOTA内容表" name="third"></el-tab-pane>
|
|
|
+ <el-tab-pane label="SOTA汇总表" name="fourth"></el-tab-pane>
|
|
|
+ </el-tabs>
|
|
|
+
|
|
|
+ <el-dialog :visible.sync="dialogVisible" title="编辑范例" width="30%">
|
|
|
<el-input v-model="currentExample" type="textarea" :rows="4"></el-input>
|
|
|
<template #footer>
|
|
|
<span class="dialog-footer">
|
|
@@ -68,48 +108,76 @@
|
|
|
</span>
|
|
|
</template>
|
|
|
</el-dialog>
|
|
|
- </div>
|
|
|
- </template>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
|
|
|
<script>
|
|
|
- export default {
|
|
|
- name: 'MiddPage',
|
|
|
- data() {
|
|
|
- return {
|
|
|
- tableData: [
|
|
|
- { workType: '复制', project: 'indication', description: '器械在文献中使用的适应症,按照器械分析,也需要添加器械使用部位以区分', example: 't1d: n=191;', isEdit: false },
|
|
|
- { workType: '总结', project: 'Study Design/ Method', description: '患者/试验者的人种,国家地区,以查阅是否存在数据上人种差异', example: 'white non-hispanic: n=247;african american:n=25;hispanic or latino: n=34', isEdit: false },
|
|
|
- { workType: '总结和数据提取;', project: 'Alternative device(treatment)', description: 'Device name + model name如无,可写疗法(以评价的器械的替代疗法)', example: 'Capillary blood by BMG;Venous blood by YSI(此处为CGM的替代疗法)', isEdit: false },
|
|
|
- ],
|
|
|
- workTypeFilters: [
|
|
|
- { text: '类型1', value: 'type1' },
|
|
|
- { text: '类型2', value: 'type2' },
|
|
|
- { text: '类型3', value: 'type3' },
|
|
|
- ],
|
|
|
- projectFilters: [],
|
|
|
- activeFilters: {
|
|
|
- workType: [],
|
|
|
- project: [],
|
|
|
+export default {
|
|
|
+ name: "MiddPage",
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ activeName: "first",
|
|
|
+ tableData: [
|
|
|
+ {
|
|
|
+ workType: "复制",
|
|
|
+ project: "indication",
|
|
|
+ description:
|
|
|
+ "器械在文献中使用的适应症,按照器械分析,也需要添加器械使用部位以区分",
|
|
|
+ example: "t1d: n=191;",
|
|
|
+ isEdit: false,
|
|
|
},
|
|
|
- dialogVisible: false,
|
|
|
- currentExample: '',
|
|
|
- currentRow: null,
|
|
|
- }
|
|
|
- },
|
|
|
- computed: {
|
|
|
- filteredTableData() {
|
|
|
- return this.tableData.filter(data => {
|
|
|
- return (!this.activeFilters.workType.length || this.activeFilters.workType.includes(data.workType)) &&
|
|
|
- (!this.activeFilters.project.length || this.activeFilters.project.includes(data.project));
|
|
|
- });
|
|
|
+ {
|
|
|
+ workType: "总结",
|
|
|
+ project: "Study Design/ Method",
|
|
|
+ description:
|
|
|
+ "患者/试验者的人种,国家地区,以查阅是否存在数据上人种差异",
|
|
|
+ example:
|
|
|
+ "white non-hispanic: n=247;african american:n=25;hispanic or latino: n=34",
|
|
|
+ isEdit: false,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ workType: "总结和数据提取;",
|
|
|
+ project: "Alternative device(treatment)",
|
|
|
+ description:
|
|
|
+ "Device name + model name如无,可写疗法(以评价的器械的替代疗法)",
|
|
|
+ example:
|
|
|
+ "Capillary blood by BMG;Venous blood by YSI(此处为CGM的替代疗法)",
|
|
|
+ isEdit: false,
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ workTypeFilters: [
|
|
|
+ { text: "类型1", value: "type1" },
|
|
|
+ { text: "类型2", value: "type2" },
|
|
|
+ { text: "类型3", value: "type3" },
|
|
|
+ ],
|
|
|
+ projectFilters: [],
|
|
|
+ activeFilters: {
|
|
|
+ workType: [],
|
|
|
+ project: [],
|
|
|
},
|
|
|
+ dialogVisible: false,
|
|
|
+ currentExample: "",
|
|
|
+ currentRow: null,
|
|
|
+ };
|
|
|
+ },
|
|
|
+ computed: {
|
|
|
+ filteredTableData() {
|
|
|
+ return this.tableData.filter((data) => {
|
|
|
+ return (
|
|
|
+ (!this.activeFilters.workType.length ||
|
|
|
+ this.activeFilters.workType.includes(data.workType)) &&
|
|
|
+ (!this.activeFilters.project.length ||
|
|
|
+ this.activeFilters.project.includes(data.project))
|
|
|
+ );
|
|
|
+ });
|
|
|
},
|
|
|
- created() {
|
|
|
- this.updateProjectFilters();
|
|
|
- },
|
|
|
- methods: {
|
|
|
- openExampleDialog(row) {
|
|
|
- console.log(112);
|
|
|
+ },
|
|
|
+ created() {
|
|
|
+ this.updateProjectFilters();
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ openExampleDialog(row) {
|
|
|
+ console.log(112);
|
|
|
this.dialogVisible = true;
|
|
|
this.currentExample = row.example;
|
|
|
this.currentRow = row;
|
|
@@ -120,56 +188,59 @@
|
|
|
}
|
|
|
this.dialogVisible = false;
|
|
|
},
|
|
|
- handleEdit(index, row) {
|
|
|
- row.isEdit = true;
|
|
|
- },
|
|
|
- handleSave(index, row) {
|
|
|
- row.isEdit = false;
|
|
|
- this.updateProjectFilters();
|
|
|
- // 在这里可以添加保存到后端的逻辑
|
|
|
- },
|
|
|
- handleDelete(index, row) {
|
|
|
- this.tableData.splice(index, 1);
|
|
|
+ handleEdit(index, row) {
|
|
|
+ row.isEdit = true;
|
|
|
+ },
|
|
|
+ handleSave(index, row) {
|
|
|
+ row.isEdit = false;
|
|
|
+ this.updateProjectFilters();
|
|
|
+ // 在这里可以添加保存到后端的逻辑
|
|
|
+ },
|
|
|
+ handleDelete(index, row) {
|
|
|
+ this.tableData.splice(index, 1);
|
|
|
+ this.updateProjectFilters();
|
|
|
+ // 在这里可以添加从后端删除的逻辑
|
|
|
+ },
|
|
|
+ handleAdd() {
|
|
|
+ this.tableData.push({
|
|
|
+ workType: "",
|
|
|
+ project: "",
|
|
|
+ description: "",
|
|
|
+ example: "",
|
|
|
+ isEdit: true,
|
|
|
+ });
|
|
|
+ },
|
|
|
+ filterWorkType(value, row) {
|
|
|
+ return row.workType === value;
|
|
|
+ },
|
|
|
+ filterProject(value, row) {
|
|
|
+ return row.project === value;
|
|
|
+ },
|
|
|
+ updateProjectFilters() {
|
|
|
+ const projects = [...new Set(this.tableData.map((item) => item.project))];
|
|
|
+ this.projectFilters = projects.map((project) => ({
|
|
|
+ text: project,
|
|
|
+ value: project,
|
|
|
+ }));
|
|
|
+ },
|
|
|
+ },
|
|
|
+ watch: {
|
|
|
+ tableData: {
|
|
|
+ handler() {
|
|
|
this.updateProjectFilters();
|
|
|
- // 在这里可以添加从后端删除的逻辑
|
|
|
- },
|
|
|
- handleAdd() {
|
|
|
- this.tableData.push({
|
|
|
- workType: '',
|
|
|
- project: '',
|
|
|
- description: '',
|
|
|
- example: '',
|
|
|
- isEdit: true
|
|
|
- });
|
|
|
- },
|
|
|
- filterWorkType(value, row) {
|
|
|
- return row.workType === value;
|
|
|
- },
|
|
|
- filterProject(value, row) {
|
|
|
- return row.project === value;
|
|
|
- },
|
|
|
- updateProjectFilters() {
|
|
|
- const projects = [...new Set(this.tableData.map(item => item.project))];
|
|
|
- this.projectFilters = projects.map(project => ({ text: project, value: project }));
|
|
|
},
|
|
|
+ deep: true,
|
|
|
},
|
|
|
- watch: {
|
|
|
- tableData: {
|
|
|
- handler() {
|
|
|
- this.updateProjectFilters();
|
|
|
- },
|
|
|
- deep: true
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- </script>
|
|
|
+ },
|
|
|
+};
|
|
|
+</script>
|
|
|
|
|
|
<style scoped>
|
|
|
- .midd-page {
|
|
|
- padding: 20px;
|
|
|
- }
|
|
|
- .el-icon-edit {
|
|
|
+.midd-page {
|
|
|
+ padding: 20px;
|
|
|
+}
|
|
|
+.el-icon-edit {
|
|
|
font-size: 14px;
|
|
|
- color: #409EFF;
|
|
|
+ color: #409eff;
|
|
|
}
|
|
|
- </style>
|
|
|
+</style>
|