123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246 |
- <template>
- <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-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">
- <el-button @click="dialogVisible = false">取消</el-button>
- <el-button type="primary" @click="saveExample">确定</el-button>
- </span>
- </template>
- </el-dialog>
- </div>
- </template>
-
- <script>
- export default {
- name: "MiddPage",
- data() {
- return {
- activeName: "first",
- 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: [],
- },
- 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);
- this.dialogVisible = true;
- this.currentExample = row.example;
- this.currentRow = row;
- },
- saveExample() {
- if (this.currentRow) {
- this.currentRow.example = this.currentExample;
- }
- 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);
- 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();
- },
- deep: true,
- },
- },
- };
- </script>
-
- <style scoped>
- .midd-page {
- padding: 20px;
- }
- .el-icon-edit {
- font-size: 14px;
- color: #409eff;
- }
- </style>
|