学校信息

components.d.ts

@@ -9,11 +9,16 @@ declare module '@vue/runtime-core' {
     ElButton: typeof import('element-plus/es')['ElButton']
     ElCheckbox: typeof import('element-plus/es')['ElCheckbox']
     ElConfigProvider: typeof import('element-plus/es')['ElConfigProvider']
+    ElForm: typeof import('element-plus/es')['ElForm']
+    ElFormItem: typeof import('element-plus/es')['ElFormItem']
+    ElInput: typeof import('element-plus/es')['ElInput']
     ElLink: typeof import('element-plus/es')['ElLink']
     ElMenu: typeof import('element-plus/es')['ElMenu']
     ElMenuItem: typeof import('element-plus/es')['ElMenuItem']
+    ElOption: typeof import('element-plus/es')['ElOption']
     ElPagination: typeof import('element-plus/es')['ElPagination']
     ElScrollbar: typeof import('element-plus/es')['ElScrollbar']
+    ElSelect: typeof import('element-plus/es')['ElSelect']
     ElSubMenu: typeof import('element-plus/es')['ElSubMenu']
     ElTable: typeof import('element-plus/es')['ElTable']
     ElTableColumn: typeof import('element-plus/es')['ElTableColumn']

src/pages/jcxx/xxxx/index.vue

@@ -1,13 +1,185 @@
 <template>
-<div>学校信息（局端）</div>
+  <!-- 学校信息（局端） -->
+  <div class="schoolInfo-jd">
+    <div class="searchDiv flex">
+      <el-form ref="ruleFormRef" :inline="true" :model="ruleForm" class="demo-form-inline">
+        <el-form-item label="学校名称：">
+          <el-input size="default" v-model="ruleForm.user" placeholder="" />
+        </el-form-item>
+        <el-form-item label="级别：">
+          <el-input size="default" v-model="ruleForm.region" placeholder="" />
+        </el-form-item>
+        <el-form-item>
+          <el-button size="default" type="primary" @click="initData">搜索</el-button>
+          <el-button size="default" type="warning" @click="resetForm(ruleFormRef)">清空</el-button>
+        </el-form-item>
+      </el-form>
+    </div>
+    <div class="searchContent">
+      <div class="searchBtn flex">
+        <div>
+          <el-button size="default" type="success" @click="initData">导出</el-button>
+          <el-button size="default" type="primary" @click="initData">批量导入</el-button>
+          <el-button size="default" type="primary" @click="initData">添加</el-button>
+          <el-button size="default" type="danger" @click="initData">删除</el-button>
+        </div>
+        <img src="/images/print.png" alt="" />
+      </div>
+      <div class="tableList">
+        <div class="tableDiv">
+          <el-table ref="multipleTableRef" :data="tableData" style="width: 100%" @selection-change="handleSelectionChange">
+            <el-table-column type="selection" width="55" />
+            <el-table-column prop="name" label="学校名称" show-overflow-tooltip></el-table-column>
+            <el-table-column property="name" label="学校logo" />
+            <el-table-column property="address" label="级别" />
+            <el-table-column property="address" label="学校电话" />
+            <el-table-column property="address" label="学校地址" show-overflow-tooltip />
+            <el-table-column label="学校风采" width="90">
+              <template #default="scope">
+                <el-button text size="default" type="primary" @click="lookDetail(scope.row)">查看</el-button>
+              </template>
+            </el-table-column>
+            <el-table-column label="操作" width="150">
+              <template #default="scope">
+                <el-button text size="default" type="primary" @click="lookDetail(scope.row)">编辑</el-button>
+                <span class="split">|</span>
+                <el-button text size="default" type="primary" @click="lookDetail(scope.row)">删除</el-button>
+              </template>
+            </el-table-column>
+          </el-table>
+        </div>
+        <div class="paginationDiv">
+          <el-pagination background layout="total, prev, pager, next" :total="total" @current-change="handleCurrentChange" :page-size="limit" :currentPage="currentPage"></el-pagination>
+        </div>
+      </div>
+    </div>
+  </div>
 </template>
 
-<script>
-export default {
+<script setup lang="ts">
+import { reactive, ref } from "vue";
+import type { FormInstance } from "element-plus";
+const ruleFormRef = ref<FormInstance>();
+const ruleForm = reactive({
+  user: "",
+  region: "",
+});
 
+const resetForm = (formEl: FormInstance | undefined) => {
+  if (!formEl) return;
+  formEl.resetFields();
+};
+
+interface User {
+  date: string;
+  name: string;
+  address: string;
 }
-</script>
+const tableData: User[] = [
+  {
+    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",
+  },
+  {
+    date: "2016-05-08",
+    name: "Tom",
+    address: "No. 189, Grove St, Los Angeles",
+  },
+  {
+    date: "2016-05-06",
+    name: "Tom",
+    address: "No. 189, Grove St, Los Angeles",
+  },
+  {
+    date: "2016-05-07",
+    name: "Tom",
+    address: "No. 189, Grove St, Los Angeles",
+  },
+];
+
+initData();
+function initData() {}
 
-<style scoped>
+const total = ref(0);
+const limit = ref(10);
+const currentPage = ref(1);
+function handleCurrentChange(val: number) {
+  currentPage.value = val;
+  initData();
+}
+</script>
 
+<style lang="scss" scoped>
+.schoolInfo-jd {
+  height: calc(100vh - 50px - 2rem);
+  .flex {
+    display: flex;
+    align-items: center;
+  }
+  .searchDiv {
+    height: 62px;
+    background: #fff;
+    border-radius: 6px;
+    // box-shadow: 0 0 5px rgba($color: #000000, $alpha: 0.1);
+    padding: 0 20px;
+    .el-form-item::v-deep {
+      margin-bottom: 0;
+      .el-form-item__label {
+        padding: 0;
+      }
+    }
+  }
+  .searchContent {
+    margin-top: 12px;
+    height: calc(100% - 62px - 12px);
+    background: #fff;
+    border-radius: 6px;
+    // box-shadow: 0 0 5px rgba($color: #000000, $alpha: 0.1);
+    padding: 0 20px;
+    .searchBtn {
+      justify-content: space-between;
+      padding: 10px 0;
+      border-bottom: 2px solid #e3e3e3;
+    }
+    .tableList {
+      height: calc(100% - 52px - 10px);
+      position: relative;
+      .tableDiv {
+        // background: #ddd;
+        height: calc(100% - 42px);
+        .el-button {
+          padding: 0;
+        }
+        .split {
+          color: #00a3ff;
+          margin: 0 10px;
+        }
+      }
+      .paginationDiv {
+        position: absolute;
+        bottom: -5px;
+        padding: 3px;
+        width: 100%;
+        display: -webkit-box;
+        -webkit-box-pack: end;
+      }
+    }
+  }
+}
 </style>