进度信息模块封装ui代码优化

src/views/article-management/article-edit.vue

@@ -215,9 +215,7 @@ export default {
     },
     /** 返回跳转列表页 */
     goBack() {
-      this.$router.push({
-        path: '/article-management/index'
-      })
+      this.$router.back()
     }
   }
 }

src/views/medical-record-management/medical-record-management.vue

 <template>
   <div class="app-container">
     <el-form v-show="showSearch" ref="queryForm" :model="queryParams" size="small" :inline="true" label-width="68px">
-      <el-form-item label="宠物昵称" prop="petNickname">
+      <el-form-item prop="petNickname">
         <el-input
           v-model="queryParams.petNickname"
-          placeholder="请输入宠物昵称"
+          placeholder="请输入病历号/宠物昵称/宠主手机号"
           clearable
           @keyup.enter.native="handleQuery"
         />
       </el-form-item>
-      <el-form-item label="昵称" prop="nickname">
-        <el-input
-          v-model="queryParams.nickname"
-          placeholder="请输入昵称"
-          clearable
-          @keyup.enter.native="handleQuery"
-        />
-      </el-form-item>
-      <el-form-item label="宠物主手机号" prop="petOwnerNumber">
-        <el-input
-          v-model="queryParams.petOwnerNumber"
-          placeholder="请输入宠物主手机号"
-          clearable
-          @keyup.enter.native="handleQuery"
+      <el-form-item prop="doctorName">
+        <el-select v-model.trim="queryParams.doctorName" clearable placeholder="主治兽医">
+          <el-option
+            v-for="item in doctorNameList"
+            :key="item.value"
+            :label="item.label"
+            :value="item.value"
           />
-      </el-form-item>
-      <el-form-item label="医生姓名" prop="doctorName">
-        <el-input
-          v-model="queryParams.doctorName"
-          placeholder="请输入医生姓名"
-          clearable
-          @keyup.enter.native="handleQuery"
+        </el-select>
+      </el-form-item>
+      <el-form-item prop="deptId">
+        <el-select v-model.trim="queryParams.doctorName" clearable placeholder="所属医院">
+          <el-option
+            v-for="item in deptIdList"
+            :key="item.value"
+            :label="item.label"
+            :value="item.value"
           />
-      </el-form-item>
-      <el-form-item label="所属医院" prop="deptId">
-        <el-input
-          v-model="queryParams.deptId"
-          placeholder="请输入所属医院"
-          clearable
-          @keyup.enter.native="handleQuery"
-        />
-      </el-form-item>
-      <el-form-item label="所属科室" prop="departmentId">
-        <el-input
-          v-model="queryParams.departmentId"
-          placeholder="请输入所属科室"
-          clearable
-          @keyup.enter.native="handleQuery"
-        />
-      </el-form-item>
-      <el-form-item label="诊断结果" prop="diagnosticResults">
-        <el-input
-          v-model="queryParams.diagnosticResults"
-          placeholder="请输入诊断结果"
-          clearable
-          @keyup.enter.native="handleQuery"
-        />
-      </el-form-item>
-      <el-form-item label="病例号" prop="visitNumber">
-        <el-input
-          v-model="queryParams.visitNumber"
-          placeholder="请输入病例号"
-          clearable
-          @keyup.enter.native="handleQuery"
+        </el-select>
+      </el-form-item>
+      <el-form-item prop="departmentId">
+        <el-select v-model.trim="queryParams.departmentId" clearable placeholder="兽医所属科室">
+          <el-option
+            v-for="item in departIdList"
+            :key="item.value"
+            :label="item.label"
+            :value="item.value"
           />
+        </el-select>
       </el-form-item>
-      <el-form-item label="就诊时间" prop="visitTime">
+      <el-form-item prop="visitTime">
         <el-date-picker
           v-model="queryParams.visitTime"
           clearable
           type="date"
           value-format="yyyy-MM-dd"
-          placeholder="请选择就诊时间"
-        />
-      </el-form-item>
-      <el-form-item label="就诊诊位" prop="visitOffice">
-        <el-input
-          v-model="queryParams.visitOffice"
-          placeholder="请输入就诊诊位"
-          clearable
-          @keyup.enter.native="handleQuery"
+          placeholder="请选择就诊日期"
         />
       </el-form-item>
-      <el-form-item label="诊断信息" prop="visitInformation">
-        <el-input
-          v-model="queryParams.visitInformation"
-          placeholder="请输入诊断信息"
+      <el-form-item prop="sort">
+        <el-select
+          v-model.trim="queryParams.params.sort"
           clearable
-          @keyup.enter.native="handleQuery"
+          placeholder="请选择排序方式"
+        >
+          <el-option
+            v-for="item in sortList"
+            :key="item.value"
+            :label="item.label"
+            :value="item.value"
           />
-      </el-form-item>
-      <el-form-item label="医嘱" prop="orders">
-        <el-input
-          v-model="queryParams.orders"
-          placeholder="请输入医嘱"
-          clearable
-          @keyup.enter.native="handleQuery"
-        />
-      </el-form-item>
-      <el-form-item label="用药信息" prop="medicationInformation">
-        <el-input
-          v-model="queryParams.medicationInformation"
-          placeholder="请输入用药信息"
-          clearable
-          @keyup.enter.native="handleQuery"
-        />
-      </el-form-item>
-      <el-form-item label="关联宠物" prop="petId">
-        <el-input
-          v-model="queryParams.petId"
-          placeholder="请输入关联宠物"
-          clearable
-          @keyup.enter.native="handleQuery"
-        />
-      </el-form-item>
-      <el-form-item label="关联宠物主" prop="petOwnerId">
-        <el-input
-          v-model="queryParams.petOwnerId"
-          placeholder="请输入关联宠物主"
-          clearable
-          @keyup.enter.native="handleQuery"
-        />
-      </el-form-item>
-      <el-form-item label="关联兽医" prop="doctorId">
-        <el-input
-          v-model="queryParams.doctorId"
-          placeholder="请输入关联兽医"
-          clearable
-          @keyup.enter.native="handleQuery"
-        />
-      </el-form-item>
-      <el-form-item>
-        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
-        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
+        </el-select>
       </el-form-item>
     </el-form>
-
-    <el-row :gutter="10" class="mb8">
-      <el-col :span="1.5">
+    <!--选择全部-->
     <el-button
-          v-hasPermi="['business:case:add']"
-          type="primary"
-          plain
-          icon="el-icon-plus"
-          size="mini"
-          @click="handleAdd"
-        >新增</el-button>
-      </el-col>
-      <el-col :span="1.5">
-        <el-button
-          v-hasPermi="['business:case:edit']"
-          type="success"
-          plain
-          icon="el-icon-edit"
+      v-hasPermi="['business:case:export']"
+      class="fourWordsBtn"
+      icon="el-icon-right"
       size="mini"
-          :disabled="single"
-          @click="handleUpdate"
-        >修改</el-button>
-      </el-col>
-      <el-col :span="1.5">
+      @click="selectAll"
+    >选择全部
+    </el-button>
+    <!--反向选择-->
     <el-button
-          v-hasPermi="['business:case:remove']"
-          type="danger"
-          plain
-          icon="el-icon-delete"
+      v-hasPermi="['business:case:export']"
+      class="fourWordsBtn"
+      icon="el-icon-back"
       size="mini"
-          :disabled="multiple"
-          @click="handleDelete"
-        >删除</el-button>
-      </el-col>
-      <el-col :span="1.5">
+      @click="reverseSelect"
+    >反向选择
+    </el-button>
+    <!--批量导出-->
     <el-button
       v-hasPermi="['business:case:export']"
-          type="warning"
-          plain
-          icon="el-icon-download"
+      class="fourWordsBtn"
+      icon="el-icon-upload2"
       size="mini"
       @click="handleExport"
-        >导出</el-button>
-      </el-col>
-      <right-toolbar :show-search.sync="showSearch" @queryTable="getList" />
-    </el-row>
-
+    >批量导出
+    </el-button>
     <el-table v-loading="loading" :data="caseList" @selection-change="handleSelectionChange">
       <el-table-column type="selection" width="55" align="center" />
-      <el-table-column label="表id" align="center" prop="id" />
+      <el-table-column label="序号" align="center" prop="index" />
+      <el-table-column label="病历号" align="center" prop="visitNumber" />
       <el-table-column label="宠物昵称" align="center" prop="petNickname" />
-      <el-table-column label="昵称" align="center" prop="nickname" />
-      <el-table-column label="宠物主手机号" align="center" prop="petOwnerNumber" />
-      <el-table-column label="医生姓名" align="center" prop="doctorName" />
-      <el-table-column label="所属医院" align="center" prop="deptId" />
+      <el-table-column label="宠物ID" align="center" prop="nickname" />
+      <el-table-column label="宠主姓名" align="center" prop="nickname" />
+      <el-table-column label="宠主手机号" align="center" prop="petOwnerNumber" />
+      <el-table-column label="归档医院" align="center" prop="deptId" />
+      <el-table-column label="主治兽医" align="center" prop="doctorName" />
       <el-table-column label="所属科室" align="center" prop="departmentId" />
-      <el-table-column label="诊断结果" align="center" prop="diagnosticResults" />
-      <el-table-column label="病例号" align="center" prop="visitNumber" />
-      <el-table-column label="就诊时间" align="center" prop="visitTime" width="180">
+      <el-table-column label="就诊日期" align="center" prop="visitTime" width="180">
         <template slot-scope="scope">
           <span>{{ parseTime(scope.row.visitTime, '{y}-{m}-{d}') }}</span>
         </template>
       </el-table-column>
-      <el-table-column label="就诊诊位" align="center" prop="visitOffice" />
-      <el-table-column label="诊断信息" align="center" prop="visitInformation" />
-      <el-table-column label="医嘱" align="center" prop="orders" />
-      <el-table-column label="用药信息" align="center" prop="medicationInformation" />
-      <el-table-column label="关联宠物" align="center" prop="petId" />
-      <el-table-column label="关联宠物主" align="center" prop="petOwnerId" />
-      <el-table-column label="关联兽医" align="center" prop="doctorId" />
-      <el-table-column label="宠物历史数据" align="center" prop="petJson" />
-      <el-table-column label="医生历史数据" align="center" prop="doctorJson" />
-      <el-table-column label="宠物主历史数据" align="center" prop="ownerJson" />
+      <el-table-column label="宠物保险" align="center" prop="visitOffice" />
       <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
         <template slot-scope="scope">
           <el-button
             v-hasPermi="['business:case:edit']"
+            icon="el-icon-document"
+            plain
             size="mini"
-            type="text"
-            icon="el-icon-edit"
+            style="width: 50px; border-radius: 6px 6px 6px 6px;border: 1px solid rgb(95,181,75);"
+            type="success"
             @click="handleUpdate(scope.row)"
-          >修改</el-button>
+          >详情</el-button>
           <el-button
-            v-hasPermi="['business:case:remove']"
+            v-hasPermi="['business:case:edit']"
+            icon="el-icon-edit"
+            plain
             size="mini"
-            type="text"
-            icon="el-icon-delete"
-            @click="handleDelete(scope.row)"
-          >删除</el-button>
+            style="width: 50px; border-radius: 6px 6px 6px 6px;border: 1px solid rgb(52,144,206);"
+            type="primary"
+            @click="handleUpdate(scope.row)"
+          >编辑</el-button>
         </template>
       </el-table-column>
     </el-table>
@@ -312,12 +215,16 @@
 </template>
 
 <script>
-import { listCase, getCase, delCase, addCase, updateCase } from '@/api/business/case'
+import { listCase } from '@/api/business/case'
+import { listAllArticle } from '@/api/business/article'
 
 export default {
   name: 'Case',
   data() {
     return {
+      doctorNameList: [],
+      deptIdList: [],
+      departIdList: [],
       // 遮罩层
       loading: true,
       // 选中数组
@@ -360,6 +267,17 @@ export default {
         doctorJson: null,
         ownerJson: null
       },
+      // 排序方式下拉框字典写死
+      sortList: [
+        {
+          label: '按就诊日期倒序',
+          value: '01'
+        },
+        {
+          label: '按就诊日期正序',
+          value: '02'
+        }
+      ],
       // 表单参数
       form: {},
       // 表单校验
@@ -371,6 +289,65 @@ export default {
     this.getList()
   },
   methods: {
+    /**
+     * 全部选择
+     * @param selection 已选择内容
+     * @param all 是否永远进行全选操作
+     */
+    async selectAll(selection = [], all = true) {
+      // 如果已经全选并且是非一直全选操作则清空选择
+      if (this.articleList.length !== selection.length && !all) {
+        this.effectTableSelect([])
+      } else {
+        await this.changeTableSelect()
+      }
+    },
+    // 反向选择
+    reverseSelect() {
+      this.changeTableSelect(this.ids)
+    },
+    /**
+     * 改变table选择项
+     * @param notIncludeIds 需要排除的id列表
+     */
+    async changeTableSelect(notIncludeIds = []) {
+      // 获取反选的数据
+      const { data } = await listAllArticle({
+        ...this.queryParams,
+        params: {
+          notIncludeIds,
+          sort: this.queryParams.params.sort
+        }
+      })
+      this.effectTableSelect(data)
+    },
+    /**
+     * 控制table的选择项
+     * @param data
+     */
+    effectTableSelect(data = []) {
+      this.$refs.table.store.states.selection = data
+      this.$refs.table.store.updateSelectionByRowKey()
+      this.$refs.table.store.updateAllSelected()
+      this.$refs.table.$emit('selection-change', data)
+    },
+    /** 功能按钮--导出按钮操作 */
+    handleExport() {
+      console.log('queryParams', this.queryParams)
+      this.download('business/article/export', {
+        ...this.queryParams,
+        params: {
+          sort: this.queryParams.params.sort,
+          idList: this.ids
+        }
+      }, `article_${new Date().getTime()}.xlsx`)
+        // 重置选择
+        .then(_ => this.effectTableSelect([]))
+    },
+    /** 列表区--多选框选中数据 */
+    handleSelectionChange(selection) {
+      this.ids = selection.map(item => item.id)
+    },
     /** 查询病例管理列表 */
     getList() {
       this.loading = true
@@ -423,63 +400,14 @@ export default {
       this.resetForm('queryForm')
       this.handleQuery()
     },
-    // 多选框选中数据
-    handleSelectionChange(selection) {
-      this.ids = selection.map(item => item.id)
-      this.single = selection.length !== 1
-      this.multiple = !selection.length
-    },
-    /** 新增按钮操作 */
-    handleAdd() {
-      this.reset()
-      this.open = true
-      this.title = '添加病例管理'
-    },
-    /** 修改按钮操作 */
+    /** 编辑按钮操作--跳转文章编辑页 */
     handleUpdate(row) {
+      console.log('start to edit...' + row)
       this.reset()
-      const id = row.id || this.ids
-      getCase(id).then(response => {
-        this.form = response.data
-        this.open = true
-        this.title = '修改病例管理'
+      console.log('start to edit...')
+      this.$router.push({
+        name: 'medical-edit', params: { id: row.id }
       })
-    },
-    /** 提交按钮 */
-    submitForm() {
-      this.$refs['form'].validate(valid => {
-        if (valid) {
-          if (this.form.id != null) {
-            updateCase(this.form).then(response => {
-              this.$modal.msgSuccess('修改成功')
-              this.open = false
-              this.getList()
-            })
-          } else {
-            addCase(this.form).then(response => {
-              this.$modal.msgSuccess('新增成功')
-              this.open = false
-              this.getList()
-            })
-          }
-        }
-      })
-    },
-    /** 删除按钮操作 */
-    handleDelete(row) {
-      const ids = row.id || this.ids
-      this.$modal.confirm('是否确认删除病例管理编号为"' + ids + '"的数据项？').then(function() {
-        return delCase(ids)
-      }).then(() => {
-        this.getList()
-        this.$modal.msgSuccess('删除成功')
-      }).catch(() => {})
-    },
-    /** 导出按钮操作 */
-    handleExport() {
-      this.download('business/case/export', {
-        ...this.queryParams
-      }, `case_${new Date().getTime()}.xlsx`)
     }
   }
 }