字典界面优化

src/views/dictionary/personnel/DeptDict.vue

@@ -1,83 +1,89 @@
 <template>
-    <page-layer>
-        <template #header>
-            <el-input v-model="text" class="w-50 m-2" style="width: 160px" placeholder="请输入关键字" clearable />
-            <el-button type="primary" icon="Search" @click="qeryDeptDict" style="margin-left: 5px">查询</el-button>
-            <el-button type="primary" icon="Plus" @click="addDeptInfo" style="margin-left: 5px">新增科室</el-button>
-            <el-button type="primary" icon="Download" @click="exportData" style="margin-left: 5px">导出</el-button>
-        </template>
-        <template #main>
-            <el-table :data="tableData.slice(pageSize * (currentPage - 1), pageSize * currentPage)" border
-                style="width: 100%" :height="tableHeight" stripe highlight-current-row>
-                <el-table-column type="index" label="序号" width="50" fixed />
-                <el-table-column prop="delFlag" label="停用" width="50" fixed>
-                    <template #default="scope">
-                        <span v-if="scope.row.delFlag === '1'" style="color:#d12020;">停用</span>
-                        <span v-else></span>
-                    </template>
-                </el-table-column>
-                <el-table-column prop="code" label="科室编码" width="120" fixed />
-                <el-table-column prop="name" label="名称" width="180" fixed />
-                <el-table-column prop="className" label="分类" />
-                <el-table-column prop="pyCode" label="拼音码" width="120" />
-                <el-table-column prop="dcode" label="五笔码" width="120" />
-                <el-table-column prop="ncode" label="院内码" />
-                <el-table-column prop="mzFlag" label="门诊开放">
-                    <template #default="scope">
-                        <span v-if="scope.row.mzFlag === '1'" style="color:#007175;">是</span>
-                        <span v-else style="color:#d12020;">否</span>
-                    </template>
-                </el-table-column>
-                <el-table-column prop="yjFlag" label="医技上线">
-                    <template #default="scope">
-                        <span v-if="scope.row.yjFlag === '1'" style="color:#007175;">是</span>
-                        <span v-else style="color:#d12020;">否</span>
-                    </template>
-                </el-table-column>
-                <el-table-column prop="xnhDeptCode" label="新农合科室编码" width="100" />
-                <el-table-column prop="xnhDeptName" label="新农合科室名称" width="180" />
-                <el-table-column prop="parentName" label="父科室" width="180" />
-                <el-table-column prop="ghChargeFlag" label="收取挂号费">
-                    <template #default="scope">
-                        <span v-if="scope.row.ghChargeFlag === '1'" style="color:#007175;">是</span>
-                        <span v-else style="color:#d12020;">否</span>
-                    </template>
-                </el-table-column>
-                <el-table-column prop="supplyFlag" label="用药方式执行科室" width="120">
-                    <template #default="scope">
-                        <span v-if="scope.row.supplyFlag === '1'" style="color:#007175;">是</span>
-                        <span v-else style="color:#d12020;">否</span>
-                    </template>
-                </el-table-column>
-                <el-table-column prop="ghjzFlag" label="门诊挂号就诊" width="100">
-                    <template #default="scope">
-                        <span v-if="scope.row.ghjzFlag === '1'" style="color:#007175;">是</span>
-                        <span v-else style="color:#d12020;">否</span>
-                    </template>
-                </el-table-column>
-                <el-table-column prop="officePos" label="就诊地点" width="280" />
-                <el-table-column label="操作" fixed="right" width="200" align="center" header-align="center">
-                    <template #default="scope">
-                        <el-button type="primary" size="small" @click="handleEdit(scope.row)">编辑</el-button>
-                        <el-button :type="scope.row.delFlag === '1' ? 'primary' : 'warning'" size="small"
-                            @click="handleStop(scope.row)">
-                            <span v-if="scope.row.delFlag === '1'">启用</span>
-                            <span v-else>停用</span>
-                        </el-button>
-                        <el-button type="danger" size="small" @click="handleDelete(scope.row)">删除</el-button>
-                    </template>
-                </el-table-column>
-            </el-table>
-            <el-pagination :current-page="currentPage" :page-size="pageSize" :page-sizes="[15, 30, 45, 60]"
-                :total="tableData.length" layout="total, sizes, prev, pager, next, jumper" style="margin-top: 5px"
-                @size-change="handleSizeChange" @current-change="handleCurrentChange">
-            </el-pagination>
-        </template>
-    </page-layer>
+  <div class="layout_container">
+    <header>
+      <el-input v-model="text" class="w-50 m-2" style="width: 160px" placeholder="请输入关键字" clearable />
+      <el-button type="primary" icon="Search" @click="qeryDeptDict" style="margin-left: 5px">查询</el-button>
+      <el-button type="primary" icon="Plus" @click="addDeptInfo" style="margin-left: 5px">新增科室</el-button>
+      <el-button type="primary" icon="Download" @click="exportData" style="margin-left: 5px">导出</el-button>
+    </header>
+    <div class="layout_main">
+      <div class="layout_container">
+        <div class="layout_main layout_el-table">
+          <el-table :data="tableData.slice(pageSize * (currentPage - 1), pageSize * currentPage)" border
+              style="width: 100%" :height="tableHeight" stripe highlight-current-row>
+              <el-table-column type="index" label="序号" width="50" fixed />
+              <el-table-column prop="delFlag" label="停用" width="50" fixed>
+                  <template #default="scope">
+                      <span v-if="scope.row.delFlag === '1'" style="color:#d12020;">停用</span>
+                      <span v-else></span>
+                  </template>
+              </el-table-column>
+              <el-table-column prop="code" label="科室编码" width="120" fixed />
+              <el-table-column prop="name" label="名称" width="180" fixed />
+              <el-table-column prop="className" label="分类" />
+              <el-table-column prop="pyCode" label="拼音码" width="120" />
+              <el-table-column prop="dcode" label="五笔码" width="120" />
+              <el-table-column prop="ncode" label="院内码" />
+              <el-table-column prop="mzFlag" label="门诊开放">
+                  <template #default="scope">
+                      <span v-if="scope.row.mzFlag === '1'" style="color:#007175;">是</span>
+                      <span v-else style="color:#d12020;">否</span>
+                  </template>
+              </el-table-column>
+              <el-table-column prop="yjFlag" label="医技上线">
+                  <template #default="scope">
+                      <span v-if="scope.row.yjFlag === '1'" style="color:#007175;">是</span>
+                      <span v-else style="color:#d12020;">否</span>
+                  </template>
+              </el-table-column>
+              <el-table-column prop="xnhDeptCode" label="新农合科室编码" width="100" />
+              <el-table-column prop="xnhDeptName" label="新农合科室名称" width="180" />
+              <el-table-column prop="parentName" label="父科室" width="180" />
+              <el-table-column prop="ghChargeFlag" label="收取挂号费">
+                  <template #default="scope">
+                      <span v-if="scope.row.ghChargeFlag === '1'" style="color:#007175;">是</span>
+                      <span v-else style="color:#d12020;">否</span>
+                  </template>
+              </el-table-column>
+              <el-table-column prop="supplyFlag" label="用药方式执行科室" width="120">
+                  <template #default="scope">
+                      <span v-if="scope.row.supplyFlag === '1'" style="color:#007175;">是</span>
+                      <span v-else style="color:#d12020;">否</span>
+                  </template>
+              </el-table-column>
+              <el-table-column prop="ghjzFlag" label="门诊挂号就诊" width="100">
+                  <template #default="scope">
+                      <span v-if="scope.row.ghjzFlag === '1'" style="color:#007175;">是</span>
+                      <span v-else style="color:#d12020;">否</span>
+                  </template>
+              </el-table-column>
+              <el-table-column prop="officePos" label="就诊地点" width="280" />
+              <el-table-column label="操作" fixed="right" width="200" align="center" header-align="center">
+                  <template #default="scope">
+                      <el-button type="primary" size="small" @click="handleEdit(scope.row)">编辑</el-button>
+                      <el-button :type="scope.row.delFlag === '1' ? 'primary' : 'warning'" size="small"
+                          @click="handleStop(scope.row)">
+                          <span v-if="scope.row.delFlag === '1'">启用</span>
+                          <span v-else>停用</span>
+                      </el-button>
+                      <el-button type="danger" size="small" @click="handleDelete(scope.row)">删除</el-button>
+                  </template>
+              </el-table-column>
+          </el-table>
+        </div>
+        <div>
+          <el-pagination :current-page="currentPage" :page-size="pageSize" :page-sizes="[15, 30, 45, 60]"
+              :total="tableData.length" layout="total, sizes, prev, pager, next, jumper" style="margin-top: 5px"
+              @size-change="handleSizeChange" @current-change="handleCurrentChange">
+          </el-pagination>
+        </div>
+      </div>
+    </div>
     <el-dialog v-model="showDeptEdit" :close-on-click-modal="false" :close-on-press-escape="false" :title="deptTitle"
         width="70%" destroy-on-close>
         <DeptInformation :deptDetail="deptDetail" @closeDeptEditFor="closeDeptEditAdd" />
     </el-dialog>
+  </div>
 </template>
 <script setup name="DeptDict">
 import { ref, onMounted, nextTick } from 'vue'

src/views/dictionary/personnel/EmployeeMi.vue

@@ -1,83 +1,89 @@
 <template>
-    <page-layer>
-        <template #header>
-            <el-input v-model="text" class="w-50 m-2" style="width: 400px" placeholder="请输入系统编码/人事工号/姓名/拼音码/五笔码/院内码"
-                clearable>
-                <template #prepend>关键词 </template>
-            </el-input>
-            <el-button type="primary" icon="Search" @click="queryEmployeeMi" style="margin-left: 5px">查询</el-button>
-            <el-button type="primary" icon="Download" @click="exportData" style="margin-left: 5px">导出</el-button>
-        </template>
-        <template #main>
-            <el-table :data="tableData.slice(pageSize * (currentPage - 1), pageSize * currentPage)" border
-                style="width: 100%" :height="tableHeight" stripe highlight-current-row>
-                <el-table-column type="index" label="序号" width="50" fixed />
-                <el-table-column prop="delFlag" label="停用" width="50" fixed>
-                    <template #default="scope">
-                        <span v-if="scope.row.delFlag === '1'" style="color:#d12020;">停用</span>
-                        <span v-else></span>
-                    </template>
-                </el-table-column>
-                <el-table-column prop="code" label="系统编码" width="80" fixed />
-                <el-table-column prop="codeRs" label="人事工号" width="80" fixed />
-                <el-table-column prop="name" label="姓名" width="80" fixed />
-                <el-table-column prop="deptName" label="所属科室" width="140" />
-                <el-table-column prop="empPoName" label="职务" width="120" />
-                <el-table-column prop="empTitName" label="技术职称" width="120" />
-                <el-table-column prop="markName" label="在院标志" />
-                <el-table-column prop="ifcadreName" label="干工标志" />
-                <el-table-column prop="pyCode" label="拼音码" width="90" />
-                <el-table-column prop="dcode" label="五笔码" width="90" />
-                <el-table-column prop="ncode" label="院内码" />
-                <el-table-column prop="orderYn" label="医生处方权" width="100">
-                    <template #default="scope">
-                        <span v-if="scope.row.orderYn === '1'">普通处方权</span>
-                        <span v-else-if="scope.row.orderYn === '2'">毒麻药处方权</span>
-                        <span v-else></span>
-                    </template>
-                </el-table-column>
-                <el-table-column prop="ysjbName" label="病历级别" />
-                <el-table-column prop="ghChargeName" label="挂号级别" width="100" />
-                <el-table-column prop="doctorXzYp" label="限制药品级别" width="130">
-                    <template #default="scope">
-                        <span v-if="scope.row.doctorXzYp === '1'">限制使用药品</span>
-                        <span v-else-if="scope.row.doctorXzYp === '2'">特殊使用药品</span>
-                        <span v-else>非限制使用药品</span>
-                    </template>
-                </el-table-column>
-                <el-table-column prop="loginFlag" label="病区允许就诊" width="120">
-                    <template #default="scope">
-                        <span v-if="scope.row.loginFlag === '1'" style="color:#007175;">允许</span>
-                        <span v-else-if="scope.row.loginFlag === '2'" style="color:#d12020;">不允许</span>
-                        <span v-else></span>
-                    </template>
-                </el-table-column>
-                <el-table-column prop="delFlagB" label="停用">
-                    <template #default="scope">
-                        <span v-if="scope.row.delFlagB === '1'" style="color:#d12020;">是</span>
-                        <span v-else style="color:#007175;">否</span>
-                    </template>
-                </el-table-column>
-                <el-table-column prop="socialNo" label="身份证号" width="180" />
-                <el-table-column prop="phoneNo" label="电话号码" width="180" />
-                <el-table-column prop="ybCode" label="医保代码" width="180" />
-                <el-table-column label="操作" fixed="right" width="140" align="center" header-align="center">
-                    <template #default="scope">
-                        <el-button :type="scope.row.delFlag === '1' ? 'primary' : 'warning'" size="small"
-                            @click="handleStop(scope.row)">
-                            <span v-if="scope.row.delFlag === '1'">启用</span>
-                            <span v-else>停用</span>
-                        </el-button>
-                        <el-button type="danger" size="small" @click="handleDelete(scope.row)">删除</el-button>
-                    </template>
-                </el-table-column>
-            </el-table>
-            <el-pagination :current-page="currentPage" :page-size="pageSize" :page-sizes="[15, 30, 45, 60]"
-                :total="tableData.length" layout="total, sizes, prev, pager, next, jumper" style="margin-top: 5px"
-                @size-change="handleSizeChange" @current-change="handleCurrentChange">
-            </el-pagination>
-        </template>
-    </page-layer>
+  <div class="layout_container">
+    <header>
+      <el-input v-model="text" class="w-50 m-2" style="width: 400px" placeholder="请输入系统编码/人事工号/姓名/拼音码/五笔码/院内码"
+          clearable>
+          <template #prepend>关键词 </template>
+      </el-input>
+      <el-button type="primary" icon="Search" @click="queryEmployeeMi" style="margin-left: 5px">查询</el-button>
+      <el-button type="primary" icon="Download" @click="exportData" style="margin-left: 5px">导出</el-button>
+    </header>
+    <div class="layout_main">
+      <div class="layout_container">
+        <div class="layout_main layout_el-table">
+          <el-table :data="tableData.slice(pageSize * (currentPage - 1), pageSize * currentPage)" border
+              style="width: 100%" :height="tableHeight" stripe highlight-current-row>
+              <el-table-column type="index" label="序号" width="50" fixed />
+              <el-table-column prop="delFlag" label="停用" width="50" fixed>
+                  <template #default="scope">
+                      <span v-if="scope.row.delFlag === '1'" style="color:#d12020;">停用</span>
+                      <span v-else></span>
+                  </template>
+              </el-table-column>
+              <el-table-column prop="code" label="系统编码" width="80" fixed />
+              <el-table-column prop="codeRs" label="人事工号" width="80" fixed />
+              <el-table-column prop="name" label="姓名" width="80" fixed />
+              <el-table-column prop="deptName" label="所属科室" width="140" />
+              <el-table-column prop="empPoName" label="职务" width="120" />
+              <el-table-column prop="empTitName" label="技术职称" width="120" />
+              <el-table-column prop="markName" label="在院标志" />
+              <el-table-column prop="ifcadreName" label="干工标志" />
+              <el-table-column prop="pyCode" label="拼音码" width="90" />
+              <el-table-column prop="dcode" label="五笔码" width="90" />
+              <el-table-column prop="ncode" label="院内码" />
+              <el-table-column prop="orderYn" label="医生处方权" width="100">
+                  <template #default="scope">
+                      <span v-if="scope.row.orderYn === '1'">普通处方权</span>
+                      <span v-else-if="scope.row.orderYn === '2'">毒麻药处方权</span>
+                      <span v-else></span>
+                  </template>
+              </el-table-column>
+              <el-table-column prop="ysjbName" label="病历级别" />
+              <el-table-column prop="ghChargeName" label="挂号级别" width="100" />
+              <el-table-column prop="doctorXzYp" label="限制药品级别" width="130">
+                  <template #default="scope">
+                      <span v-if="scope.row.doctorXzYp === '1'">限制使用药品</span>
+                      <span v-else-if="scope.row.doctorXzYp === '2'">特殊使用药品</span>
+                      <span v-else>非限制使用药品</span>
+                  </template>
+              </el-table-column>
+              <el-table-column prop="loginFlag" label="病区允许就诊" width="120">
+                  <template #default="scope">
+                      <span v-if="scope.row.loginFlag === '1'" style="color:#007175;">允许</span>
+                      <span v-else-if="scope.row.loginFlag === '2'" style="color:#d12020;">不允许</span>
+                      <span v-else></span>
+                  </template>
+              </el-table-column>
+              <el-table-column prop="delFlagB" label="停用">
+                  <template #default="scope">
+                      <span v-if="scope.row.delFlagB === '1'" style="color:#d12020;">是</span>
+                      <span v-else style="color:#007175;">否</span>
+                  </template>
+              </el-table-column>
+              <el-table-column prop="socialNo" label="身份证号" width="180" />
+              <el-table-column prop="phoneNo" label="电话号码" width="180" />
+              <el-table-column prop="ybCode" label="医保代码" width="180" />
+              <el-table-column label="操作" fixed="right" width="140" align="center" header-align="center">
+                  <template #default="scope">
+                      <el-button :type="scope.row.delFlag === '1' ? 'primary' : 'warning'" size="small"
+                          @click="handleStop(scope.row)">
+                          <span v-if="scope.row.delFlag === '1'">启用</span>
+                          <span v-else>停用</span>
+                      </el-button>
+                      <el-button type="danger" size="small" @click="handleDelete(scope.row)">删除</el-button>
+                  </template>
+              </el-table-column>
+          </el-table>
+        </div>
+        <div>
+          <el-pagination :current-page="currentPage" :page-size="pageSize" :page-sizes="[15, 30, 45, 60]"
+              :total="tableData.length" layout="total, sizes, prev, pager, next, jumper" style="margin-top: 5px"
+              @size-change="handleSizeChange" @current-change="handleCurrentChange">
+          </el-pagination>
+        </div>
+      </div>
+    </div>
+  </div>
 </template>
 <script setup name="EmployeeMi">
 import { ref, onMounted, nextTick } from 'vue'