质控计划-分配医师组件封装（增加、编辑在列表中进行交互）

src/views/recordsRoom/qc/components/AssignDoctor/SearchBox.vue

@@ -0,0 +1,95 @@
+<template>
+  <el-form style="width: 100%" ref="filterListFormRef" :model="formData" class="demo-form-inline" label-suffix=":"
+    label-width="120px">
+    <el-row :gutter="24">
+      <el-col :span="6">
+        <el-form-item label="导入审阅医师" prop="drsyys">
+          <el-select style="width:100%" v-model="formData.drsyys" filterable clearable placeholder="请选择">
+            <el-option v-for="item of peopleList" :key="item.dep_id" :label="item.name" :value="item.dep_id" />
+          </el-select>
+        </el-form-item>
+      </el-col>
+      <el-col :span="6">
+        <el-form-item label="随机分配" prop="sjfp">
+          <el-radio-group v-model="formData.sjfp">
+            <el-radio :label="1">是</el-radio>
+            <el-radio :label="0">否</el-radio>
+          </el-radio-group>
+        </el-form-item>
+      </el-col>
+      <el-col :span="6">
+        <el-form-item label="导入审阅科室" prop="drsyks">
+          <el-select style="width:100%" v-model="formData.drsyks" filterable clearable placeholder="请选择">
+            <el-option v-for="item of peopleList" :key="item.dep_id" :label="item.name" :value="item.dep_id" />
+          </el-select>
+        </el-form-item>
+      </el-col>
+      <el-col :span="6" v-if="action !== 'DETAIL'">
+        <el-form-item label="" prop="">
+          <el-row type="flex" justify="end">
+            <el-button icon="el-icon-plus" @click="$emit('add')">新增</el-button>
+            <!-- <el-button icon="el-icon-delete" @click="onReset">批量删除</el-button>
+            <el-button icon="el-icon-edit-outline"type="primary" @click="onReset" plain>批量编辑</el-button> -->
+          </el-row>
+        </el-form-item>
+      </el-col>
+    </el-row>
+    <!-- <el-row :gutter="24">
+      <el-col :span="7" :offset="17">
+        <el-form-item label="" prop="" style="float: right;">
+          <el-button type="primary" @click="onSubmit">查询</el-button>
+          <el-button @click="onReset">重置</el-button>
+        </el-form-item>
+      </el-col>
+    </el-row> -->
+  </el-form>
+</template>
+<script>
+import moment from 'moment/moment';
+
+export default {
+  props: ['action'],
+  emits: ['search', 'reset', 'add'],
+  data() {
+    const that = this
+    return {
+      formData: {
+        drsyys: '',
+        sjfp: 1,
+        drsyks: '',
+      },
+      peopleList: [],
+    }
+  },
+  created() {
+    this.getDeportmentList()
+  },
+  watch: {
+    formData: {
+      handler() {
+        this.$emit('search')
+      },
+      deep: true // 深度监听对象内部属性的变化
+    }
+  },
+  methods: {
+    onSubmit() {
+      this.$emit('search')
+    },
+    onReset() {
+      this.$refs.filterListFormRef.resetFields();
+      this.$emit('reset')
+    },
+    getDeportmentList() {
+      this.$axios.get('/user/depDropDown').then(res => {
+        const { data } = res
+        this.peopleList = data;
+      }).catch(error => {
+        console.log(error)
+      })
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped></style>

src/views/recordsRoom/qc/components/AssignDoctor/TableBox.vue

@@ -0,0 +1,192 @@
+<template>
+  <el-table
+    v-loading="loading"
+    :data="data"
+    style="width: 100%"
+    @selection-change="handleSelectionChange"
+  >
+   <!-- <el-table-column type="selection" width="55"></el-table-column> -->
+   <el-table-column type="index" label="序号" width="80" />
+    <!-- 动态列 -->
+    <el-table-column v-for="column in columns" :key="column.prop" :prop="column.prop" :label="column.label">
+      <template slot-scope="scope">
+        <template v-if="scope.row.isEditing">
+          <!-- <el-form-item :prop="column.prop"> -->
+            <el-input v-model="scope.row.editData[column.prop]"></el-input>
+          <!-- </el-form-item> -->
+        </template>
+        <template v-else>
+          {{ scope.row[column.prop] }}
+        </template>
+      </template>
+    </el-table-column>
+    <el-table-column label="操作" width="200" v-if="action != 'DETAIL'">
+      <template slot-scope="scope">
+        <template v-if="scope.row.isEditing">
+          <el-button type="text" @click="saveRow(scope.row)">保存</el-button>
+          <el-button type="text" @click="cancelEdit(scope.row)">取消</el-button>
+=        </template>
+        <template v-else>
+          <el-button type="text" icon="el-icon-edit" @click="editRow(scope.row, scope.$index)"></el-button>
+          <el-button type="text" style="color:#ef1f3a" icon="el-icon-delete" @click="deleteRow(scope.row)"></el-button>
+        </template>
+      </template>
+    </el-table-column>
+  </el-table>
+</template>
+
+<script>
+import moment from 'moment/moment';
+
+export default {
+  emits: ['onUpdate'],
+  props: {
+    action: {
+      type: String,
+      default() {
+        return '';
+      },
+    },
+    data: {
+      type: Array,
+      default() {
+        return [];
+      },
+    },
+    loading: {
+      type: Boolean,
+      default() {
+        return false;
+      },
+    }
+  },
+  data() {
+    return {
+      columns: [
+        { prop: 'appeal_docter', label: '所属院区' },
+        { prop: 'ssks', label: '所属科室' },
+        { prop: 'syys', label: '审阅医师' },
+        { prop: 'syks', label: '审阅科室' }
+      ],
+      selectedArray: []
+    }
+  },
+  methods: {
+    moment,
+    toPage(row) {
+      const { ZYH } = row;
+      this.$router.push({ path: '/qc/caseViews', query: {
+        ZYH,
+        from: 'review'
+      }, meta: {
+        title: '申诉详情'
+      }});
+    },
+
+    handleSelectionChange(val) {
+      this.selectedArray = val;
+    },
+    editRow(row, index) {
+      row.editData = { ...row }
+      this.$parent.tableData.splice(index, 1, {
+        ...this.$parent.tableData[index],
+        isEditing: true
+      })
+    },
+    saveRow(row) {
+      Object.assign(row, row.editData)
+      if (row.id) { // 编辑
+        console.log('>>>>>>>>编辑', row.editData)
+      } else {
+        console.log('>>>>>>>>新增', row.editData)
+      }
+      row.isEditing = false
+      this.$emit('onUpdate')
+    },
+    cancelEdit(row, index) {
+      if (row.id) {
+        row.isEditing = false
+      } else {
+        this.$parent.tableData.splice(index, 1) 
+      }
+    },
+    deleteRow(row) {
+      this.$confirm('确认删除此条数据?', '提示', {
+        type: 'warning'
+      }).then(() => {
+        this.$emit('onUpdate')
+      })
+    }
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+// ::v-deep.el-table {
+//   .selected-row {
+//     background-color:#ecf5ff !important;
+//   }
+// }
+
+@mixin status() {
+    width: 60px;
+    text-align: center;
+    border-width: 1px;
+    border-style: solid;
+    border-radius: 4px;
+    font-weight: 500
+}
+
+.status-0 {
+  @include status();
+  background-color: #fccbd4;
+  border-color: #ef1f3a;
+  color: #ef1f3a;
+}
+.status-1 {
+  @include status();
+  background-color: #d2e4d6;
+  border-color: #318240;
+  color: #318240;
+}
+.status-2 {
+  @include status();
+  background-color: #ef1f3a;
+  border-color: #ef1f3a;
+  color: #ffffff;
+}
+
+@mixin score-level() {
+    font-weight: 500
+}
+
+.score-level-1 {
+  @include score-level();
+  color: #318240;
+}
+.score-level-2 {
+  @include score-level();
+  color: #89c30f;
+}
+.score-level-3 {
+  @include score-level();
+  color: #ec890e;
+}
+.score-level-4 {
+  @include score-level();
+  color: #ef1f3a;
+}
+
+.quality-type-1 {
+  @include score-level();
+  color: #07818a;
+}
+.quality-type-2 {
+  @include score-level();
+  color: #3c108f;
+}
+.quality-type-3 {
+  @include score-level();
+  color: #a26d0a
+}
+</style>

src/views/recordsRoom/qc/components/qualityControlPlan/AssignDoctor.vue

@@ -1,13 +1,12 @@
 <template>
     <div>
-      <SearchBoxVue ref="SearchBoxRef" @search="handleSearch" @reset="handleReset" />
+      <SearchBoxVue ref="SearchBoxRef" @search="handleSearch" @reset="handleReset" @add="handleAdd" :action="action"/>
       <div>
-        <TableBoxVue :loading="loading" :data="tableData" ref="tableRef"/>
+        <TableBoxVue :loading="loading" :data="tableData" ref="tableRef" @onUpdate="getList" :action="action"/>
         <el-row type="flex" justify="end" align="middle">
           <mPagination v-if="tableData && tableData.length !== 0" :data="paginationData" @pageChangeEvent="pageHasChanged"></mPagination>
         </el-row>
       </div>
-      <AddPlanModalBoxVue ref="AddPlanModalBoxVueRef"/>
     </div>
   </template>
   
@@ -15,7 +14,6 @@
   import mPagination from '@/components/m-pagination';
   import SearchBoxVue from '@/views/recordsRoom/qc/components/AssignDoctor/SearchBox.vue'
   import TableBoxVue from '@/views/recordsRoom/qc/components/AssignDoctor/TableBox.vue'
-  import AddPlanModalBoxVue from '@/views/recordsRoom/qc/components/AssignDoctor/AddPlanModal.vue'
   import pagination from '@/components/Pagination/index2.vue'
   import { getCaseAppealList } from '@/api/admin'
   
@@ -25,9 +23,9 @@
       SearchBoxVue,
       TableBoxVue,
       pagination,
-      AddPlanModalBoxVue
     },
     emits: ['onListDataChange'],
+    props: ['action'],
     data() {
       return {
         loading: false,
@@ -73,8 +71,11 @@
       handleReset() {
         this.handleSearch()
       },
-      openAddPlanModal() {
-        this.$refs.AddPlanModalBoxVueRef.openModal()
+      handleAdd() {
+        this.tableData.unshift({
+            isEditing: true,
+            editData: {}
+        })
       }
     }
   }