feat: 指标库

src/router/modules/index.ts

@@ -21,8 +21,20 @@ export default {
           component: () => import("@/views/indexDefine/children/define.vue"),
           meta: {
             title: "指标定义",
+            // 是否继承父菜单显示，默认false
             showParent: true
           }
+          // children: [
+          //   {
+          //     path: "/IndexDefine/children/import/index",
+          //     name: "IndexDefineImport",
+          //     component: () =>
+          //       import("@/views/indexDefine/children/import/index.vue"),
+          //     meta: {
+          //       title: "指标定义"
+          //     }
+          //   }
+          // ]
         }
       ]
     }

src/views/indexDefine/children/components/DetailsDrawer.vue

@@ -0,0 +1,107 @@
+<script setup lang="ts">
+import { ref, reactive } from "vue";
+import { ElMessageBox } from "element-plus";
+import type { DrawerProps, FormItemProps, FormProps } from "element-plus";
+// const itemLabelPosition = ref<FormItemProps["labelPosition"]>("");
+const drawer = ref(false);
+const direction = ref<DrawerProps["direction"]>("rtl");
+const formLabelAlign = reactive({
+  name: "",
+  region: "",
+  type: ""
+});
+const handleClose = (done: () => void) => {
+  ElMessageBox.confirm("配置项未保存，确认关闭", {
+    type: "warning"
+  }).then(() => {
+    drawer.value = false;
+  });
+};
+function cancelClick() {
+  drawer.value = false;
+}
+function confirmClick() {
+  console.log(1111);
+}
+const open = row => {
+  drawer.value = true;
+};
+defineExpose({
+  open
+});
+const timer = ref("");
+</script>
+
+<template>
+  <div>
+    <el-drawer
+      v-model="drawer"
+      :direction="direction"
+      :before-close="handleClose"
+    >
+      <template #header>
+        <h4>指标详情</h4>
+      </template>
+      <template #default>
+        <div>
+          <el-form
+            label-position="top"
+            label-width="auto"
+            :model="formLabelAlign"
+          >
+            <el-form-item label="指标编号" label-position="top">
+              <el-input />
+            </el-form-item>
+            <el-form-item label="指标名称" label-position="top">
+              <el-input />
+            </el-form-item>
+            <el-form-item label="门诊收住院率" label-position="top">
+              <el-input />
+            </el-form-item>
+            <el-form-item label="指标分类" label-position="top">
+              <el-input />
+            </el-form-item>
+            <el-form-item label="指标定义" label-position="top">
+              <el-input />
+            </el-form-item>
+            <el-form-item label="指标口径" label-position="top">
+              <el-input />
+            </el-form-item>
+            <el-form-item label="SQL语句" label-position="top">
+              <el-input />
+            </el-form-item>
+            <el-form-item label="指标状态" label-position="top">
+              <el-input />
+            </el-form-item>
+            <el-form-item label="来源" label-position="top">
+              <el-input />
+            </el-form-item>
+            <el-form-item label="操作用户" label-position="top">
+              <el-input />
+            </el-form-item>
+            <el-form-item label="创建时间" label-position="top">
+              <el-date-picker
+                v-model="timer"
+                type="datetime"
+                placeholder="Select date and time"
+              />
+            </el-form-item>
+            <el-form-item label="更新时间" label-position="top">
+              <el-date-picker
+                v-model="timer"
+                type="datetime"
+                placeholder="Select date and time"
+              />
+            </el-form-item>
+          </el-form>
+        </div>
+      </template>
+      <template #footer>
+        <div>
+          <el-button @click="cancelClick">取消</el-button>
+          <el-button type="primary" @click="confirmClick">确认</el-button>
+        </div>
+      </template>
+    </el-drawer>
+  </div>
+</template>

src/views/indexDefine/children/components/drawer.vue → src/views/indexDefine/children/components/editDrawer.vue

@@ -48,9 +48,6 @@ defineExpose({
             label-width="auto"
             :model="formLabelAlign"
           >
-            <el-form-item label="指标编号" label-position="top">
-              <el-input />
-            </el-form-item>
             <el-form-item label="指标名称" label-position="top">
               <el-input />
             </el-form-item>
@@ -66,6 +63,9 @@ defineExpose({
             <el-form-item label="来源" label-position="top">
               <el-input />
             </el-form-item>
+            <el-form-item label="SQL语句" label-position="top">
+              <el-input />
+            </el-form-item>
             <el-form-item label="状态" label-position="top">
               <el-input />
             </el-form-item>

src/views/indexDefine/children/define.vue

@@ -4,12 +4,17 @@ defineOptions({
 });
 import { ref } from "vue";
 import dialogVue from "./components/dialog.vue";
-import drawerVue from "./components/drawer.vue";
+import editDrawer from "./components/editDrawer.vue";
+import DetailsDrawer from "./components/DetailsDrawer.vue";
+import IndexDefineImport from "./import/index.vue";
 import { Edit, More } from "@element-plus/icons-vue";
+import { ElMessage, ElMessageBox } from "element-plus";
 const value = ref("");
 const dialogShow = ref();
-const drawerShow = ref();
-const showDrawer = ref(false);
+const EditdrawerShow = ref();
+const DetailsdrawerShow = ref();
+const EditshowDrawer = ref(false);
+const DetailsshowDrawer = ref(false);
 const options = [
   {
     value: "Option1",
@@ -74,129 +79,168 @@ const newAddIndex = () => {
 const close = () => {
   showDialog.value = false;
 };
-const edit = row => {
-  showDrawer.value = true;
-  drawerShow.value.open();
+// 编辑
+const setEdit = row => {
+  EditshowDrawer.value = true;
+  EditdrawerShow.value.open();
   console.log(row);
 };
+// 删除
 const setDelete = row => {
   console.log(row);
-  console.log(11111);
+  ElMessageBox.confirm("指标删除后无法恢复", "确定要删除这项指标吗", {
+    confirmButtonText: "确认",
+    cancelButtonText: "取消",
+    type: "warning"
+  })
+    .then(() => {
+      ElMessage({
+        type: "success",
+        message: "删除成功"
+      });
+    })
+    .catch(() => {
+      ElMessage({
+        type: "info",
+        message: "已取消"
+      });
+    });
+};
+// 详情
+const setDetails = row => {
+  DetailsshowDrawer.value = true;
+  DetailsdrawerShow.value.open();
+  console.log(row);
+};
+// 批量导入
+const sizeImport = ref(false);
+const GoSizeImport = () => {
+  sizeImport.value = !sizeImport.value;
 };
 </script>
 
 <template>
   <div>
-    <drawerVue ref="drawerShow" v-model:drawerValue="showDrawer" />
-    <dialogVue
-      ref="dialogShow"
-      v-model:modelValue="showDialog"
-      @closeDialog="close"
-    />
-    <div class="w-[100%]">
-      <div class="mb-2 flex gap-2 justify-between flex-wrap">
-        <div class="flex mt-2">
-          <div class="flex mr-2">
-            <div class="text-sm leading-8 mr-3">指标分类</div>
-            <el-select
-              v-model="value"
-              clearable
-              placeholder="请选择"
-              style="width: 150px"
-            >
-              <el-option
-                v-for="item in options"
-                :key="item.value"
-                :label="item.label"
-                :value="item.value"
+    <IndexDefineImport v-if="sizeImport" @handleImport="GoSizeImport" />
+    <div v-else>
+      <editDrawer ref="EditdrawerShow" v-model:drawerValue="EditshowDrawer" />
+      <DetailsDrawer
+        ref="DetailsdrawerShow"
+        v-model:drawerValue="DetailsshowDrawer"
+      />
+      <dialogVue
+        ref="dialogShow"
+        v-model:modelValue="showDialog"
+        @closeDialog="close"
+      />
+      <div class="w-[100%]">
+        <div class="mb-2 flex gap-2 justify-between flex-wrap">
+          <div class="flex mt-2">
+            <div class="flex mr-2">
+              <div class="text-sm leading-8 mr-3">指标分类</div>
+              <el-select
+                v-model="value"
+                clearable
+                placeholder="请选择"
+                style="width: 150px"
+              >
+                <el-option
+                  v-for="item in options"
+                  :key="item.value"
+                  :label="item.label"
+                  :value="item.value"
+                />
+              </el-select>
+            </div>
+            <div class="flex mr-2">
+              <div class="text-sm leading-8 mr-3">状态</div>
+              <el-select
+                v-model="value"
+                clearable
+                placeholder="请选择"
+                style="width: 150px"
+              >
+                <el-option
+                  v-for="item in options"
+                  :key="item.value"
+                  :label="item.label"
+                  :value="item.value"
+                />
+              </el-select>
+            </div>
+            <div class="flex mr-2">
+              <el-input
+                style="width: 300px"
+                placeholder="搜索指标名称、编码、口径、定义"
               />
-            </el-select>
+            </div>
           </div>
-          <div class="flex mr-2">
-            <div class="text-sm leading-8 mr-3">状态</div>
-            <el-select
-              v-model="value"
-              clearable
-              placeholder="请选择"
-              style="width: 150px"
+          <div class="flex pt-2 mr-6">
+            <el-button class="mr-2" @click="GoSizeImport">批量导入</el-button>
+            <el-button type="primary" class="mr-2" @click="newAddIndex"
+              >创建指标</el-button
             >
-              <el-option
-                v-for="item in options"
-                :key="item.value"
-                :label="item.label"
-                :value="item.value"
-              />
-            </el-select>
           </div>
-          <div class="flex mr-2">
-            <el-input
-              style="width: 300px"
-              placeholder="搜索指标名称、编码、口径、定义"
-            />
-          </div>
-        </div>
-        <div class="flex pt-2 mr-6">
-          <el-button class="mr-2">批量导入</el-button>
-          <el-button type="primary" class="mr-2" @click="newAddIndex"
-            >创建指标</el-button
-          >
         </div>
       </div>
-    </div>
-    <div class="mt-8">
-      <el-table :data="tableData" style="width: 100%">
-        <el-table-column prop="date" label="指标编号" width="100" />
-        <el-table-column prop="name" label="指标名称" />
-        <el-table-column prop="address" label="指标分类" />
-        <el-table-column prop="address" label="状态">
-          <template #default="{ row }">
-            <el-tag type="primary" effect="dark">
-              {{ row.name }}
-            </el-tag>
-          </template>
-        </el-table-column>
-        <el-table-column prop="address" label="指标定义" />
-        <el-table-column prop="address" label="指标口径" />
-        <el-table-column prop="address" label="数据来源" />
-        <el-table-column prop="address" label="更新时间" />
-        <el-table-column label="操作">
-          <template #default="{ row }">
-            <!-- <el-button link :icon="Edit" /> -->
-            <el-dropdown trigger="click">
-              <span class="el-dropdown-link navbar-bg-hover select-none">
-                <el-icon @click="edit(row)"><Edit /></el-icon>
-              </span>
-            </el-dropdown>
-            <el-dropdown class="ml-2" trigger="click">
-              <span class="el-dropdown-link navbar-bg-hover select-none">
-                <el-icon><More /></el-icon>
-              </span>
-              <template #dropdown>
-                <el-dropdown-menu class="setting">
-                  <el-dropdown-item @click="setDelete(row)">
-                    删除
-                  </el-dropdown-item>
-                  <el-dropdown-item> 发布 </el-dropdown-item>
-                  <el-dropdown-item> 下架 </el-dropdown-item>
-                  <el-dropdown-item> 日志 </el-dropdown-item>
-                  <el-dropdown-item> 数据 </el-dropdown-item>
-                </el-dropdown-menu>
-              </template>
-            </el-dropdown>
-          </template>
-        </el-table-column>
-      </el-table>
-    </div>
-    <div class="float-right mt-8">
-      <el-pagination
-        v-model:current-page="currentPage4"
-        v-model:page-size="pageSize4"
-        :page-sizes="[100, 200, 300, 400]"
-        layout="total, sizes, prev, pager, next, jumper"
-        :total="400"
-        @size-change="handleSizeChange"
-        @current-change="handleCurrentChange"
-      />
+      <div class="mt-8">
+        <el-table :data="tableData" style="width: 100%">
+          <el-table-column prop="date" label="指标编号" width="100" />
+          <el-table-column prop="name" label="指标名称" />
+          <el-table-column prop="address" label="指标分类" />
+          <el-table-column prop="address" label="状态">
+            <template #default="{ row }">
+              <el-tag type="primary" effect="dark">
+                {{ row.name }}
+              </el-tag>
+            </template>
+          </el-table-column>
+          <el-table-column prop="address" label="指标定义" />
+          <el-table-column prop="address" label="指标口径" />
+          <el-table-column prop="address" label="数据来源" />
+          <el-table-column prop="address" label="更新时间" />
+          <el-table-column label="操作">
+            <template #default="{ row }">
+              <!-- <el-button link :icon="Edit" /> -->
+              <el-dropdown trigger="click">
+                <span class="el-dropdown-link navbar-bg-hover select-none">
+                  <el-icon @click="setEdit(row)"><Edit /></el-icon>
+                </span>
+              </el-dropdown>
+              <el-dropdown class="ml-2" trigger="click">
+                <span class="el-dropdown-link navbar-bg-hover select-none">
+                  <el-icon><More /></el-icon>
+                </span>
+                <template #dropdown>
+                  <el-dropdown-menu class="setting">
+                    <el-dropdown-item @click="setDelete(row)">
+                      删除
+                    </el-dropdown-item>
+                    <el-dropdown-item> 发布 </el-dropdown-item>
+                    <el-dropdown-item> 下架 </el-dropdown-item>
+                    <el-dropdown-item> 日志 </el-dropdown-item>
+                    <el-dropdown-item> 数据 </el-dropdown-item>
+                    <el-dropdown-item @click="setDetails(row)">
+                      详情
+                    </el-dropdown-item>
+                  </el-dropdown-menu>
+                </template>
+              </el-dropdown>
+            </template>
+          </el-table-column>
+        </el-table>
+      </div>
+      <div class="float-right mt-8">
+        <el-pagination
+          v-model:current-page="currentPage4"
+          v-model:page-size="pageSize4"
+          :page-sizes="[100, 200, 300, 400]"
+          layout="total, sizes, prev, pager, next, jumper"
+          :total="400"
+          @size-change="handleSizeChange"
+          @current-change="handleCurrentChange"
+        />
+      </div>
     </div>
   </div>
 </template>

src/views/indexDefine/children/import/index.vue

@@ -0,0 +1,109 @@
+<script setup lang="ts">
+import { ref } from "vue";
+defineOptions({
+  name: "IndexDefineImport"
+});
+const emit = defineEmits(["handleImport"]);
+const uploadShow = ref(true);
+const uploadFile = () => {
+  uploadShow.value = !uploadShow.value;
+};
+const tableData = [
+  {
+    date: "2016-05-03",
+    name: "Tom",
+    address: "No. 189, Grove St, Los Angeles"
+  },
+  {
+    date: "2016-05-02",
+    name: "Tom",
+    address: "No. 189, Grove St, Los Angeles"
+  },
+  {
+    date: "2016-05-04",
+    name: "Tom",
+    address: "No. 189, Grove St, Los Angeles"
+  },
+  {
+    date: "2016-05-01",
+    name: "Tom",
+    address: "No. 189, Grove St, Los Angeles"
+  }
+];
+const backDefine = () => {
+  emit("handleImport");
+};
+</script>
+
+<template>
+  <div>
+    <div class="w-3/4 m-auto mt-4">
+      <div class="w-full bg p-3">
+        <el-button class="float-right" @click="backDefine">返回</el-button>
+        <h5>1.下载导入模板</h5>
+
+        <p class="text-xs mt-2 text">根据提升信息完善表格内容</p>
+        <el-button class="mt-2"
+          ><el-icon><Download /></el-icon>下载空的模板表格</el-button
+        >
+      </div>
+      <div class="w-full mt-4 bg p-3">
+        <h5>2.上传完善后的模板</h5>
+        <p class="text-xs mt-2 text mb-2">
+          更新信息的模板中，如有空的数据列，则相应字段信息会被清空，请谨慎填写
+        </p>
+        <div v-if="uploadShow">
+          <el-upload
+            class="upload-demo"
+            drag
+            action="https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15"
+            multiple
+          >
+            <el-icon class="el-icon--upload"><upload-filled /></el-icon>
+            <div class="el-upload__text">
+              点击<em>图标选择上传</em>或者将文件拖拽到此区域
+            </div>
+          </el-upload>
+        </div>
+        <div v-else class="mb-2">
+          <el-table
+            :data="tableData"
+            border
+            style="width: 100%"
+            max-height="250"
+          >
+            <el-table-column prop="date" label="指标编号" width="180" />
+            <el-table-column prop="name" label="指标名称" width="180" />
+            <el-table-column prop="address" label="指标分类" />
+            <el-table-column prop="address" label="指标定义" />
+            <el-table-column prop="address" label="指标口径" />
+          </el-table>
+        </div>
+        <div class="float-right">
+          <el-button>取消</el-button>
+          <el-button type="primary" @click="uploadFile">确认</el-button>
+        </div>
+        <p class="h-11 no-select">.</p>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.bg {
+  background-color: #f8f9fa;
+}
+
+.text {
+  color: #999;
+}
+
+.upoload {
+  float: right;
+}
+
+.no-select {
+  color: rgb(255 255 255 / 0%);
+  user-select: none;
+}
+</style>