质控计划-常用收藏条件增加加载显示和无数据显示

src/views/recordsRoom/qc/components/expertQualityControl/CollectListModal.vue

@@ -1,99 +1,92 @@
 <template>
-    <el-dialog :visible.sync="dialogVisible" class="custom-dialog" :modal="false" :title="getDialogTitle()" width="600px" @close="onCancel">
-        <el-form :model="formData"
-            :rules="rules" ref="formDataRef" label-width="0px">
-            <el-form-item label="" prop="tjmc">
-                <el-input v-model="formData.tjmc" clearable placeholder="请输入需查询的条件名称">
-                  <el-button
-                    slot="suffix"
-                    class="el-icon-search el-input__icon"
-                    @click="getListData"
-                    type="text"
-                  />
-                </el-input>
-            </el-form-item>
-            <el-form-item label="" prop="sfgg">
-                <el-tabs v-model="formData.sfgg" @tab-click="getListData">
-                  <el-tab-pane label="个人" name="0" />
-                  <el-tab-pane label="公共" name="1" />
-                </el-tabs>
-            </el-form-item>
-        </el-form>
-        <div>
-          <div v-for="(item, index) in listData">
-            <el-row  :gutter="24" type="flex" align="middle">
-              <el-col :span="16" style="display: flex">
-                <h5>条件{{index + 1}}：</h5>
-                <span>{{item.tjmc}}</span>
-              </el-col>
-              <el-col :span="8" style="text-align: right">
-                <el-radio v-model="item.mrtj" :label="1">默认</el-radio>
-                <el-button
-                  class="el-icon-edit-outline"
-                  @click="openCollectModal(item)"
-                  type="text"
-                />
-                <el-button
-                  class="el-icon-delete"
-                  @click="onRemove(item)"
-                  type="text"
-                  style="color: #ef1f3a"
-                />
-              </el-col>
-            </el-row>
-            <el-divider></el-divider>
-          </div>
+  <el-dialog :visible.sync="dialogVisible" class="custom-dialog" :modal="false" :title="getDialogTitle()" width="600px"
+    @close="onCancel">
+    <el-form :model="formData" :rules="rules" ref="formDataRef" label-width="0px">
+      <el-form-item label="" prop="tjmc">
+        <el-input v-model="formData.tjmc" clearable placeholder="请输入需查询的条件名称">
+          <el-button slot="suffix" class="el-icon-search el-input__icon" @click="getListData" type="text" />
+        </el-input>
+      </el-form-item>
+      <el-form-item label="" prop="sfgg">
+        <el-tabs v-model="formData.sfgg" @tab-click="getListData">
+          <el-tab-pane label="个人" name="0" />
+          <el-tab-pane label="公共" name="1" />
+        </el-tabs>
+      </el-form-item>
+    </el-form>
+    <div v-loading="loading" style="min-height: 335px;">
+      <div v-if="Array.isArray(listData) && !!listData.length">
+        <div v-for="(item, index) in listData">
+          <el-row :gutter="24" type="flex" align="middle">
+            <el-col :span="16" style="display: flex">
+              <h5>条件{{ index + 1 }}：</h5>
+              <span>{{ item.tjmc }}</span>
+            </el-col>
+            <el-col :span="8" style="text-align: right">
+              <el-radio v-model="item.mrtj" :label="1">默认</el-radio>
+              <el-button class="el-icon-edit-outline" @click="openCollectModal(item)" type="text" />
+              <el-button class="el-icon-delete" @click="onRemove(item)" type="text" style="color: #ef1f3a" />
+            </el-col>
+          </el-row>
+          <el-divider />
         </div>
-        <template #footer>
-            <!-- <el-button type="primary" @click="onSubmit()">保存 </el-button>
+      </div>
+      <div v-else>
+        <el-empty :image-size="200"></el-empty>
+      </div>
+    </div>
+    <template #footer>
+      <!-- <el-button type="primary" @click="onSubmit()">保存 </el-button>
             <el-button @click="onCancel()">取消 </el-button> -->
-        </template>
-        <CollectModalBox ref="CollectModalBoxRef" @onUpdate="getListData"/>
-    </el-dialog>
+    </template>
+    <CollectModalBox ref="CollectModalBoxRef" @onUpdate="getListData" />
+  </el-dialog>
 </template>
 <script>
-import { examineAppeal } from '@/api/qc';
 import CollectModalBox from './CollectModal.vue'
 
 export default {
   components: {
     CollectModalBox,
   },
-  emits: ['onUpdate'],
   data() {
     return {
-        action: 'ADD',
       dialogVisible: false,
       formData: {
         tjmc: '',
         sfgg: '0',
       },
       rules: {},
-      listData: []
+      listData: [],
+      loading: false
     };
   },
   computed: {},
   watch: {},
-  created() {},
-  mounted() {},
-  beforeDestroy() {},
+  created() { },
+  mounted() { },
+  beforeDestroy() { },
 
   methods: {
     getDialogTitle() {
       return '常用收藏条件'
     },
-        
+
     async openModal(params) {
       this.dialogVisible = true;
       this.getListData()
     },
 
     getListData() {
+      this.loading = true
       this.$message.success(`请求了${this.formData.tjmc}, ${this.formData.sfgg}`)
-      this.listData = [
-        {tjmc: '11111111', mrtj: 1},
-        {tjmc: '2222222', mrtj: 0}
-      ]
+      setTimeout(() => {
+        this.loading = false
+        this.listData = [
+          { tjmc: '11111111', mrtj: 1 },
+          { tjmc: '2222222', mrtj: 0 }
+        ]
+      }, 2000);
     },
 
     openCollectModal(row) {
@@ -102,57 +95,32 @@ export default {
 
     onRemove() {
       this.$confirm('确定要删除吗?', '提示', {
-          confirmButtonText: '确定',
-          cancelButtonText: '取消',
-          type: 'warning'
-        }).then(() => {
-          this.$message({
-            type: 'success',
-            message: '删除成功!'
-          });
-          this.getListData()
-        }).catch(() => {          
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning'
+      }).then(() => {
+        this.$message({
+          type: 'success',
+          message: '删除成功!'
         });
+        this.getListData()
+      }).catch(() => {
+      });
     },
-    
+
     onSubmit() {
       this.$refs.formDataRef.validate((valid) => {
         if (valid) {
-            return
-            // 申诉逻辑
-            const pramse = {
-              id: this.currentId,
-              zyh: this.MEDRECID,
-              type: 2,
-              quality_type: this.qualityType,
-              defect_content: this.formData.reason, // 使用 formData 中的原因
-              appeal_docter: this.formData.tjmc, // 使用 formData 中的医师
-            };
-            console.log(pramse, 'pramse');
-
-            examineAppeal(pramse).then(res => {
-              if(res.code == 200) {
-                this.$message({
-                  message: '提交申诉成功',
-                  type: 'success',
-                });
-                // 提交后关闭弹框
-                this.dialogVisible = false;
-                this.$emit('onUpdate')
-              }
-            });
-          // 申诉审核通过和驳回逻辑
-        
         } else {
           console.log('error submit!!');
           return false;
         }
       });
-      
+
     },
     onCancel() {
-        this.dialogVisible = false;
-        this.$refs.formDataRef && this.$refs.formDataRef.resetFields()
+      this.dialogVisible = false;
+      this.$refs.formDataRef && this.$refs.formDataRef.resetFields()
     }
   },
 };
@@ -172,6 +140,7 @@ export default {
 ::v-deep .el-dialog__title {
   color: #fff;
 }
+
 ::v-deep .el-divider--horizontal {
   margin: 5px 0
 }