|
@@ -0,0 +1,175 @@
|
|
|
+<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>
|
|
|
+ {{ 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%">
|
|
|
+ <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 {
|
|
|
+ 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>
|