Merge branch 'dev-cy/begin250711'

src/components/DiseaseLabel/index..vue

@@ -0,0 +1,133 @@
+<template>
+  <el-dialog :title="dialog.title" v-model="dialog.visible" width="78%" append-to-body style="height: 750px;">
+    <el-row :gutter="10" class="mb8">
+      <el-col :span="24">
+        <span
+          class="diagnosis-tag"
+          :class="{ 'diagnosisActive': diseaseLabelQuery.category == item.value }"
+          v-for="item in diseaseLabelListDict"
+          :key="item.value"
+          @click="changeTag(item.value)"
+        >{{ item.label }}</span>
+      </el-col>
+    </el-row>
+
+    <el-row :gutter="10" class="mb8">
+      <el-col :span="12">
+        <el-form-item prop="labelCode">
+          <el-input v-model="diseaseLabelQuery.labelCode" placeholder="疾病名称/疾病编码" clearable />
+        </el-form-item>
+      </el-col>
+      <el-col :span="12" align="left">
+        <el-button type="primary" @click="getDiseaseLabelList">查询</el-button>
+        <el-button type="primary" @click="addDiseaseLabelDialog">新增疾病标签</el-button>
+      </el-col>
+    </el-row>
+
+    <el-row :gutter="10" class="mb8">
+      <el-col :span="12">
+        <div style="height: 400px;overflow-y: scroll;">
+          <el-table
+            border
+            stripe
+            :data="diseaseLabelList"
+            @select-all="handleSelectAllChange"
+            @select="handleSelectChange"
+            ref="diseaseLabelRef"
+            @selection-change="handleSelectionChange"
+          >
+            <el-table-column type="selection" width="55" align="center" />
+            <el-table-column label="疾病/部位名称" align="center" prop="labelName" />
+            <el-table-column label="疾病/部位编码" align="center" prop="labelCode" />
+            <el-table-column label="所属分类" align="center" prop="categoryName" />
+          </el-table>
+        </div>
+        <div style="margin-left: 10px;width: 100%;">
+          <pagination
+            v-show="total > -1"
+            :total="total"
+            v-model:page="diseaseLabelQuery.pageNum"
+            layout="total, sizes, prev, pager, next"
+            v-model:limit="diseaseLabelQuery.pageSize"
+            @pagination="getDiseaseLabelList"
+            size="small"
+          />
+        </div>
+      </el-col>
+      <el-col :span="12" align="right">
+        <div style="height: 400px;overflow-y: scroll;">
+          <el-table border :data="selecteddiseaseLabelList">
+            <el-table-column label="疾病/部位名称" align="center" prop="labelName" />
+            <el-table-column label="疾病/部位编码" align="center" prop="labelCode" />
+            <el-table-column label="所属分类" align="center" prop="categoryName" />
+            <el-table-column label="操作" align="center" class-name="small-padding fixed-width" width="150">
+              <template #default="scope">
+                <el-tooltip content="删除" placement="top">
+                  <el-button link type="danger" icon="Delete" @click="handleSelectedDelete(scope.row)">删除</el-button>
+                </el-tooltip>
+              </template>
+            </el-table-column>
+          </el-table>
+        </div>
+        <div style="margin-left: 10px;margin-top:36px;width: 100%;text-align: left;">
+          <span style="color: rgb(118, 180, 244);">已选：{{ selecteddiseaseLabelList.length }}项</span>
+        </div>
+      </el-col>
+    </el-row>
+
+    <el-row :gutter="10" class="mb8">
+      <el-col :span="24" align="center">
+        <el-button type="primary" @click="onConfirm">&nbsp;&nbsp;&nbsp;确定&nbsp;&nbsp;&nbsp;</el-button>
+        <el-button @click="onCancel">&nbsp;&nbsp;&nbsp;取消&nbsp;&nbsp;&nbsp;</el-button>
+      </el-col>
+    </el-row>
+  </el-dialog>
+</template>
+
+<script setup lang="ts">
+import { defineProps, defineEmits } from 'vue';
+
+const props = defineProps({
+  dialog: { type: Object, required: true }, // { visible, title }
+  diseaseLabelQuery: { type: Object, required: true },
+  diseaseLabelListDict: { type: Array as () => any[], required: true },
+  diseaseLabelList: { type: Array as () => any[], required: true },
+  selecteddiseaseLabelList: { type: Array as () => any[], required: true },
+  total: { type: Number, required: true },
+  getDiseaseLabelList: { type: Function as unknown as () => (...args: any[]) => any, required: true },
+  changeTag: { type: Function as unknown as () => (...args: any[]) => any, required: true },
+  handleSelectAllChange: { type: Function as unknown as () => (...args: any[]) => any, required: true },
+  handleSelectChange: { type: Function as unknown as () => (...args: any[]) => any, required: true },
+  handleSelectionChange: { type: Function as unknown as () => (...args: any[]) => any, required: true },
+  handleSelectedDelete: { type: Function as unknown as () => (...args: any[]) => any, required: true },
+  addDiseaseLabelDialog: { type: Function as unknown as () => (...args: any[]) => any, required: true },
+});
+
+const emit = defineEmits(['confirm', 'cancel']);
+
+const onConfirm = () => emit('confirm');
+const onCancel = () => emit('cancel');
+</script>
+
+<style scoped>
+.diagnosis-tag {
+  border-left: 1px solid #409EFF;
+  border-top: 1px solid #409EFF;
+  border-bottom: 1px solid #409EFF;
+  padding: 8px 8px;
+  color: #409EFF;
+  background: #f4f8ff;
+  display: inline-block;
+  width: 33.3%;
+  margin-bottom: 10px;
+  text-align: center;
+  vertical-align: middle;
+}
+.diagnosis-tag:last-child {
+  border-right: 1px solid #409EFF;
+}
+.diagnosisActive {
+  background: #409EFF;
+  color: #fff;
+}
+</style>