质控计划-静态页面以及交互代码提交

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

@@ -1,6 +1,6 @@
 <template>
     <el-dialog :visible.sync="dialogVisible" class="custom-dialog" :modal="false" :title="getDialogTitle()" width="85%" @close="onCancel">
-        <el-row type="flex" align="middle" style="width: 100%;margin-bottom: 10px">
+        <el-row type="flex" align="middle" style="width: 100%;margin-bottom: 10px" v-if="action != 'DETAIL'">
           <el-steps :active="activeSteps" finish-status="success" align-center style="width: inherit">
             <el-step title="基础配置" description=""></el-step>
             <el-step title="授权病历" description=""></el-step>
@@ -9,7 +9,7 @@
           <el-button type="primary" @click="onSubmit">生成计划</el-button>
         </el-row>
         <el-form :model="formData"
-            :rules="rules" ref="formDataRef" label-width="120px">
+            :rules="rules" ref="formDataRef" label-width="120px" :disabled="action == 'DETAIL'">
             <SubTitle title="基础配置"/>
             <el-form-item label="质控计划名称" prop="zkjhmc">
                 <el-input style="max-width: 430px" v-model="formData.zkjhmc" placeholder="请输入"></el-input>
@@ -46,7 +46,7 @@
             </el-form-item>
         </el-form>
         <SubTitle title="分配医师"/>
-          <AssignDoctor @onListDataChange="(e) => this.formData.fpysList = e"/>
+          <AssignDoctor :action="action" @onListDataChange="(e) => this.formData.fpysList = e"/>
         <template #footer>
         </template>
     </el-dialog>
@@ -190,23 +190,26 @@ export default {
   methods: {
     getDialogTitle() {
       if(this.action === 'ADD') {
-        return '质控计划配置'
+        return '新建质控计划配置'
       }
       if(this.action === 'EDIT') {
-        return '质控计划配置'
+        return '编辑质控计划配置'
+      }
+      if(this.action === 'DETAIL') {
+        return '质控计划配置详情'
       }
     },
         
     async openModal(action = 'ADD', params) {
+      this.dialogVisible = true;
+      this.$nextTick(() => {
         this.action = action;
         if(action == 'EDIT') {
-            this.$nextTick(() => {
-                for(let keys in this.formData) {
-                    this.formData[keys] = params[keys]
-                }
-            })
+          for(let keys in this.formData) {
+              this.formData[keys] = params[keys]
+          }
         }
-      this.dialogVisible = true;
+      })
     },
     
     onSubmit() {
@@ -214,7 +217,7 @@ export default {
         if (valid) {
             const params = {...this.formData}
             console.log('>>>>>>>>>>>>params', params)
-            // this.$emit('onUpdate')
+            this.$emit('onUpdate')
             this.onCancel();
             
             return

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

@@ -1,65 +1,53 @@
 <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 prop="AAA28" label="计划名称" width="180">
-      <template slot-scope="scope">
-        <el-button class="blue-link" type="text" @click="toPage(scope.row)">{{ scope.row.AAA28 }}</el-button>
-      </template>
-    </el-table-column>
-    <el-table-column
-      prop=""
-      label="进度条"
-      width="220"
-      show-overflow-tooltip>
-      <template slot-scope="scope">
-        <el-progress :text-inside="true" :stroke-width="26" :percentage="70"></el-progress>
-        <el-progress :text-inside="true" :stroke-width="24" :percentage="100" status="success"></el-progress>
-        <el-progress :text-inside="true" :stroke-width="22" :percentage="80" status="warning"></el-progress>
-        <el-progress :text-inside="true" :stroke-width="20" :percentage="50" status="exception"></el-progress>
-      </template>
-    </el-table-column>
-    <el-table-column
-      prop=""
-      label="质控计划周期"
-      width="220"
-    >
-      <template slot-scope="scope">
-        <span>2020-10-10</span>&nbsp;至&nbsp;<span>2020-10-10</span>
-      </template>
-    </el-table-column>
-    <el-table-column
-      width="120"
-      prop="appeal_docter"
-      label="发布人"
-    />
-    <el-table-column
-      width="160"
-      prop="appeal_time"
-      label="发布时间"
-    >
-      <template slot-scope="scope">
-        <span>{{scope.row.appeal_time ? moment(scope.row.appeal_time * 1000).format('YYYY-MM-DD HH:MM:ss') : ''}}</span>
-      </template>
-    </el-table-column>
-    <el-table-column prop="" label="操作">
-      <template slot-scope="scope">
-        <el-button type="text" icon="el-icon-edit"></el-button>
-        <el-button type="text" style="color:#ef1f3a" icon="el-icon-delete"></el-button>
-      </template>
-    </el-table-column>
-  </el-table>
+  <div>
+    <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 prop="AAA28" label="计划名称" width="180">
+        <template slot-scope="scope">
+          <el-button class="blue-link" type="text" @click="openAddPlanModal('DETAIL', scope.row)">{{ scope.row.AAA28 }}</el-button>
+        </template>
+      </el-table-column>
+      <el-table-column prop="" label="进度条" width="220" show-overflow-tooltip>
+        <template slot-scope="scope">
+          <el-progress :text-inside="true" :stroke-width="26" :percentage="70"></el-progress>
+          <el-progress :text-inside="true" :stroke-width="24" :percentage="100" status="success"></el-progress>
+          <el-progress :text-inside="true" :stroke-width="22" :percentage="80" status="warning"></el-progress>
+          <el-progress :text-inside="true" :stroke-width="20" :percentage="50" status="exception"></el-progress>
+        </template>
+      </el-table-column>
+      <el-table-column prop="" label="质控计划周期" width="220">
+        <template slot-scope="scope">
+          <span>2020-10-10</span>&nbsp;至&nbsp;<span>2020-10-10</span>
+        </template>
+      </el-table-column>
+      <el-table-column width="120" prop="appeal_docter" label="发布人" />
+      <el-table-column width="160" prop="appeal_time" label="发布时间">
+        <template slot-scope="scope">
+          <span>{{ scope.row.appeal_time ? moment(scope.row.appeal_time * 1000).format('YYYY-MM-DD HH:MM:ss') :
+            ''}}</span>
+        </template>
+      </el-table-column>
+      <el-table-column prop="" label="操作">
+        <template slot-scope="scope">
+          <el-button type="text" icon="el-icon-edit" @click="openAddPlanModal('EDIT', scope.row)"></el-button>
+          <el-button type="text" style="color:#ef1f3a" icon="el-icon-delete" @click="deleteRow(scope.row)"></el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+    <AddPlanModalBoxVue ref="AddPlanModalBoxVueRef" @onUpdate="$emit('onUpdate')" />
+  </div>
 </template>
 
 <script>
 import moment from 'moment/moment';
+import AddPlanModalBoxVue from '@/views/recordsRoom/qc/components/qualityControlPlan/AddPlanModal.vue'
 
 export default {
+  components: {
+    AddPlanModalBoxVue
+  },
+  emits: ['onUpdate'],
   props: {
     data: {
       type: Array,
@@ -83,12 +71,24 @@ export default {
     moment,
     toPage(row) {
       const { ZYH } = row;
-      this.$router.push({ path: '/qc/caseViews', query: {
-        ZYH,
-        from: 'review'
-      }, meta: {
-        title: '申诉详情'
-      }});
+      this.$router.push({
+        path: '/qc/caseViews', query: {
+          ZYH,
+          from: 'review'
+        }, meta: {
+          title: '申诉详情'
+        }
+      });
+    },
+    openAddPlanModal(action, row) {
+      this.$refs.AddPlanModalBoxVueRef.openModal(action, row)
+    },
+    deleteRow(row) {
+      this.$confirm('确认删除此条数据?', '提示', {
+        type: 'warning'
+      }).then(() => {
+        this.$emit('onUpdate')
+      })
     },
 
     handleSelectionChange(val) {
@@ -106,12 +106,12 @@ export default {
 // }
 
 @mixin status() {
-    width: 60px;
-    text-align: center;
-    border-width: 1px;
-    border-style: solid;
-    border-radius: 4px;
-    font-weight: 500
+  width: 60px;
+  text-align: center;
+  border-width: 1px;
+  border-style: solid;
+  border-radius: 4px;
+  font-weight: 500
 }
 
 .status-0 {
@@ -120,12 +120,14 @@ export default {
   border-color: #ef1f3a;
   color: #ef1f3a;
 }
+
 .status-1 {
   @include status();
   background-color: #d2e4d6;
   border-color: #318240;
   color: #318240;
 }
+
 .status-2 {
   @include status();
   background-color: #ef1f3a;
@@ -134,21 +136,24 @@ export default {
 }
 
 @mixin score-level() {
-    font-weight: 500
+  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;
@@ -158,10 +163,12 @@ export default {
   @include score-level();
   color: #07818a;
 }
+
 .quality-type-2 {
   @include score-level();
   color: #3c108f;
 }
+
 .quality-type-3 {
   @include score-level();
   color: #a26d0a

src/views/recordsRoom/qc/qualityControlPlan.vue

@@ -8,7 +8,7 @@
             <el-button @click="openAddPlanModal" type="primary">新建计划</el-button>
           </el-row>
         </el-row>
-        <TableBoxVue :loading="loading" :data="tableData" ref="tableRef"/>
+        <TableBoxVue :loading="loading" :data="tableData" ref="tableRef"  @onUpdate="getList"/>
       </div>
       <AddPlanModalBoxVue ref="AddPlanModalBoxVueRef" @onUpdate="getList"/>
     </div>