1

src/assets/css/index.css

@@ -5,4 +5,5 @@
   --el-button-hover-border-color: #458FFF;
   --el-color-primary-light-3: #458FFF;
   --el-border-radius-base: 2px;
+  --el-color-danger: #CF171D;
 }

src/dts/components.d.ts

@@ -18,11 +18,14 @@ declare module 'vue' {
     ElCheckbox: typeof import('element-plus/es')['ElCheckbox']
     ElCheckboxGroup: typeof import('element-plus/es')['ElCheckboxGroup']
     ElCollapse: typeof import('element-plus/es')['ElCollapse']
+    ElCollapseItem: typeof import('element-plus/es')['ElCollapseItem']
     ElConfigProvider: typeof import('element-plus/es')['ElConfigProvider']
     ElContainer: typeof import('element-plus/es')['ElContainer']
     ElDialog: typeof import('element-plus/es')['ElDialog']
     ElDivider: typeof import('element-plus/es')['ElDivider']
     ElDropdown: typeof import('element-plus/es')['ElDropdown']
+    ElDropdownItem: typeof import('element-plus/es')['ElDropdownItem']
+    ElDropdownMenu: typeof import('element-plus/es')['ElDropdownMenu']
     ElEmpty: typeof import('element-plus/es')['ElEmpty']
     ElForm: typeof import('element-plus/es')['ElForm']
     ElFormItem: typeof import('element-plus/es')['ElFormItem']
@@ -65,11 +68,14 @@ declare global {
   const ElCheckbox: typeof import('element-plus/es')['ElCheckbox']
   const ElCheckboxGroup: typeof import('element-plus/es')['ElCheckboxGroup']
   const ElCollapse: typeof import('element-plus/es')['ElCollapse']
+  const ElCollapseItem: typeof import('element-plus/es')['ElCollapseItem']
   const ElConfigProvider: typeof import('element-plus/es')['ElConfigProvider']
   const ElContainer: typeof import('element-plus/es')['ElContainer']
   const ElDialog: typeof import('element-plus/es')['ElDialog']
   const ElDivider: typeof import('element-plus/es')['ElDivider']
   const ElDropdown: typeof import('element-plus/es')['ElDropdown']
+  const ElDropdownItem: typeof import('element-plus/es')['ElDropdownItem']
+  const ElDropdownMenu: typeof import('element-plus/es')['ElDropdownMenu']
   const ElEmpty: typeof import('element-plus/es')['ElEmpty']
   const ElForm: typeof import('element-plus/es')['ElForm']
   const ElFormItem: typeof import('element-plus/es')['ElFormItem']

src/pages/sys/dict/DictCategory.vue

@@ -30,7 +30,7 @@
       <ElTableColumn label="操作" width="180">
         <template #default="scope">
           <div class="action-btn">
-            <el-popconfirm
+            <ElPopconfirm
               cancel-button-text="否"
               cancel-button-type="primary"
               confirm-button-text="是"
@@ -42,7 +42,7 @@
               <template #reference>
                 <ElButton :loading="deling" text type="danger">删除</ElButton>
               </template>
-            </el-popconfirm>
+            </ElPopconfirm>
             <ElButton text type="primary" @click="modifyHandler(scope)">修改</ElButton>
             <ElButton text type="primary" @click="selectDictHandle(scope)">字典项</ElButton>
           </div>
@@ -51,7 +51,6 @@
     </ElTable>
     <ElPagination
       :page-size="pagination.size"
-      :pager-count="pagination.pages"
       :total="pagination.total"
       class="pagination"
       layout="prev, pager, next"

src/pages/sys/dict/DictItem.vue

@@ -42,7 +42,7 @@
       <ElTableColumn label="操作" width="180">
         <template #default="scope">
           <div class="action-btn">
-            <el-popconfirm
+            <ElPopconfirm
               cancel-button-text="否"
               cancel-button-type="primary"
               confirm-button-text="是"
@@ -54,7 +54,7 @@
               <template #reference>
                 <ElButton :loading="deling" text type="danger">删除</ElButton>
               </template>
-            </el-popconfirm>
+            </ElPopconfirm>
             <ElButton text type="primary" @click="modifyHandler(scope)">修改</ElButton>
           </div>
         </template>

src/pages/sys/menus/MenuForm.vue

@@ -87,7 +87,6 @@
               </ElTable>
               <ElPagination
                 :page-size="pagination.size"
-                :pager-count="pagination.pages"
                 :total="pagination.total"
                 layout="prev, pager, next"
                 @change="pageChangeHandler"/>

src/pages/sys/menus/Menus.vue

@@ -53,7 +53,7 @@
       <!-- <ElTableColumn label="排序" prop="sort" width="60"/> -->
       <ElTableColumn label="操作" width="180">
         <template #default="scope">
-          <el-popconfirm
+          <ElPopconfirm
             cancel-button-text="否"
             cancel-button-type="primary"
             confirm-button-text="是"
@@ -65,7 +65,7 @@
             <template #reference>
               <ElButton :loading="deling" text type="danger">删除</ElButton>
             </template>
-          </el-popconfirm>
+          </ElPopconfirm>
           <ElButton text type="primary" @click="modifyHandler(scope)">修改</ElButton>
         </template>
       </ElTableColumn>

src/pages/sys/role/Role.vue

@@ -40,7 +40,7 @@
       <ElTableColumn label="操作" width="180">
         <template #default="scope">
           <div class="action-btn">
-            <el-popconfirm
+            <ElPopconfirm
               v-if="scope.row.id != '1'"
               cancel-button-text="否"
               cancel-button-type="primary"
@@ -53,7 +53,7 @@
               <template #reference>
                 <ElButton :loading="deling" text type="danger">删除</ElButton>
               </template>
-            </el-popconfirm>
+            </ElPopconfirm>
             <ElButton text type="primary" @click="bindResHandler(scope)">资源</ElButton>
             <ElButton v-if="scope.row.id != '1'" text type="primary" @cl--ick="modifyHandler(scope)">修改</ElButton>
           </div>

src/pages/sys/sn-config/SnConfig.vue

@@ -42,9 +42,9 @@ function searchHandler() {
   searching.value = true
   SnConfigApi.paging(searchForm, {...pagination})
     .then((res) => {
-      pagination.current = res.data.current
       pagination.size = res.data.size
       pagination.total = res.data.total
+      pagination.pages = res.data.pages
       datasource.value = res.data.records.map((it) => ({
         key: it.id,
         ...it,
@@ -116,7 +116,7 @@ onMounted(() => {
 
       <ElTableColumn label="操作" width="180">
         <template #default="scope">
-          <el-popconfirm
+          <ElPopconfirm
             cancel-button-text="否"
             cancel-button-type="primary"
             confirm-button-text="是"
@@ -128,7 +128,7 @@ onMounted(() => {
             <template #reference>
               <ElButton text type="danger">删除</ElButton>
             </template>
-          </el-popconfirm>
+          </ElPopconfirm>
           <ElButton text type="primary" @click="modify(scope)">修改</ElButton>
         </template>
       </ElTableColumn>
@@ -136,7 +136,6 @@ onMounted(() => {
     </ElTable>
     <ElPagination
       :page-size="pagination.size"
-      :pager-count="pagination.pages"
       :total="pagination.total"
       class="pagination"
       layout="prev, pager, next"

src/pages/sys/sn-config/SnConfigForm.vue

@@ -11,6 +11,7 @@ import {
   TimeUnit,
 } from '@/pages/sys/sn-config/contant.ts'
 import Colls from '@/common/utils/colls.ts'
+import { elIcons } from '@/common/element/element.ts'
 
 defineOptions({name: 'SnConfigForm'})
 const emits = defineEmits([ 'close' ])
@@ -187,7 +188,7 @@ function moveDown(index: number) {
   }
 }
 
-const expandedKeys = computed(() => snConfig.config.map((_, i) => i))
+const expandedKeys = computed(() => snConfig.config.map((_, i) => i + ''))
 
 const arrowDropdownVisible = ref(false)
 
@@ -206,7 +207,7 @@ defineExpose({
 </script>
 
 <template>
-  <ElDialog v-model="visible" :title="Strings.isBlank(snConfig.id) ? '新增编码配置' : '修改编码配置'" width="950px"
+  <ElDialog v-model="visible" :title="Strings.isBlank(snConfig.id) ? '新增编码配置' : '修改编码配置'" class="config-dialog" footer-class="panel-footer" width="950px"
     @close="onCloseHandler">
     <div class="config-panel">
       <div class="config-title">
@@ -221,25 +222,20 @@ defineExpose({
         </div>
       </div>
       <div class="config-detail">
-        <ElCollapse v-if="!Colls.isEmpty(snConfig.config)" :expandedKeys="expandedKeys">
+        <template v-if="!Colls.isEmpty(snConfig.config)">
-          <ElCollapse v-for="(section, i) in snConfig.config" :key="i">
+          <div v-for="(section, i) in snConfig.config" :key="i">
-            <template #header=" ">
+            <div class="config-tool">
-              <ElHeader :title="(i + 1 )+'、'+SnConfigUtil.descSection(section)">
+              <div> {{ (i + 1) + '、' + SnConfigUtil.descSection(section) }}</div>
-                <template #suffix>
+              <div>
-                  <ElButtonGroup gap="20px" mode="text" @click.stop>
+                <ElButton :icon="elIcons.Delete" text type="danger" @click.stop="delSection(i)"/>
-                    <ElPopconfirm :title="'是否删除配置？'" placement="top" @ok.stop="delSection(i)">
+                <ElTooltip v-if="i > 0" content="上移" placement="top">
-                      <ElButton danger icon="delete"/>
+                  <ElButton :icon="elIcons.ArrowUp" text type="primary" @click.stop="moveUp(i)"/>
-                    </ElPopconfirm>
+                </ElTooltip>
-                    <ElTooltip v-if="i > 0" placement="top" title="上移">
+                <ElTooltip v-if="i < snConfig.config.length - 1" content="下移" placement="top">
-                      <ElButton icon="up" @click.stop="moveUp(i)"/>
+                  <ElButton :icon="elIcons.ArrowDown" text type="primary" @click.stop="moveDown(i)"/>
-                    </ElTooltip>
+                </ElTooltip>
-                    <ElTooltip v-if="i < snConfig.config.length - 1" placement="top" title="下移">
+              </div>
-                      <ElButton icon="down" @click.stop="moveDown(i)"/>
+            </div>
-                    </ElTooltip>
-                  </ElButtonGroup>
-                </template>
-              </ElHeader>
-            </template>
             <template v-if="section.sectionName === 'GuDing'">
               <div class="config-item">
                 <div>
@@ -326,38 +322,35 @@ defineExpose({
                 </div>
               </div>
             </template>
-          </ElCollapse>
+          </div>
-        </ElCollapse>
+        </template>
-        <ElEmpty v-else/>
+        <ElEmpty v-else description="请添加配置项"/>
       </div>
     </div>
     <template #footer>
-      <ElButton mode="default" @click="onCloseHandler">关闭</ElButton>
+      <ElButton type="default" @click="onCloseHandler">关闭</ElButton>
       <ElPopconfirm v-if="snConfig.sncode === 'CS' && showPici" placement="top" title="填写批次" @ok="testSn">
-        <ElButton danger mode="default">测试</ElButton>
+        <ElButton type="danger">测试</ElButton>
         <template #content>
           <ElFormItem compact label="批次" required>
             <ElInput v-model="pici"/>
           </ElFormItem>
         </template>
       </ElPopconfirm>
-      <ElButton v-if="snConfig.sncode === 'CS' && !showPici" danger mode="default" @click="testSn">测试</ElButton>
+      <ElButton v-if="snConfig.sncode === 'CS' && !showPici" type="danger" @click="testSn">测试</ElButton>
-      <ElButton v-if="snConfig.sncode === 'CS'" danger mode="default" @click="reset">重置</ElButton>
+      <ElButton v-if="snConfig.sncode === 'CS'" type="danger" @click="reset">重置</ElButton>
       <ElPopconfirm :title="'是否清空配置？'" placement="top" @ok.stop="clearConfig">
-        <ElButton danger mode="default">清空配置</ElButton>
+        <ElButton type="danger">清空配置</ElButton>
       </ElPopconfirm>
-      <ElButton mode="primary" @click="onSaveHandler">保存</ElButton>
+      <ElButton type="primary" @click="onSaveHandler">保存</ElButton>
-      <ElDropdown v-modelvisible="arrowDropdownVisible">
+      <ElDropdown :hide-on-click="false" @command="addSection">
-        <ElButton mode="primary">
+        <ElButton type="primary">
-          <div class="flex-center">
+          添加配置
-            添加配置
-            <ElIcon :rotate="arrowDropdownVisible ? -180 : 0" name="down" size="16px" style="margin-left: 4px"></ElIcon>
-          </div>
         </ElButton>
         <template #dropdown>
-          <div class="dropdown-panel">
+          <ElDropdownMenu>
-            <ElButton v-for="(val, key) in SectionName" :key="'SectionName' + key" class="dropdown-item" mode="text" @click="addSection(key)">{{ val }}</ElButton>
+            <ElDropdownItem v-for="(val, key) in SectionName" :key="'SectionName' + key" :command="key">{{ val }}</ElDropdownItem>
-          </div>
+          </ElDropdownMenu>
         </template>
       </ElDropdown>
     </template>
@@ -365,11 +358,18 @@ defineExpose({
 </template>
 
 <style lang="stylus" scoped>
+div {
+  box-sizing border-box
+}
+
 .config-panel {
   width 100%
   height 500px
   display flex
   justify-content space-between
+  box-sizing: border-box;
+  padding-bottom: 10px;
+  gap: 12px;
 
   .config-title {
     width: 200px;
@@ -378,11 +378,12 @@ defineExpose({
     flex-direction: column;
     justify-content: space-between;
     gap: 1rem;
+    padding 6px
 
     & > div:nth-child(3) {
       flex 1
 
-      :deep(.ix-textarea) {
+      :deep(.el-textarea) {
         height 100%
 
         textarea {
@@ -393,17 +394,44 @@ defineExpose({
   }
 
   .config-detail {
-    flex 1
+    flex: 1;
-    height 100%
+    height: 100%;
-    padding .5rem
+    display: flex;
-    display: flex
+    overflow: auto;
-    justify-content: center;
     align-items: center;
+    flex-direction: column;
+    gap 20px
+    padding: 6px;
+
+    & > div {
+      width 100%;
+      display: flex;
+      flex-direction: column;
+      gap: 10px;
+      justify-content: center;
+      border: 1px solid #E1E5EB;
+      border-radius 2px
+    }
+
+    & > :deep(.el-empty) {
+      height 100%
+    }
+
+    .config-tool {
+      display flex
+      justify-content space-between
+      align-content center
+      gap 10px
+      padding: 10px 16px;
+    }
 
     .config-item {
       display: flex
       flex-direction: column;
       gap: 1rem;
+      border-top: 1px solid #E5E7EB;
+      background-color: #F7F9FC;
+      padding: 16px;
 
       & > div {
         display flex
@@ -444,4 +472,21 @@ defineExpose({
   }
 
 }
+
+.config-dialog {
+
+}
+
+</style>
+<style lang="stylus">
+.panel-footer {
+  display: flex;
+  justify-content: end;
+  align-items: center;
+  gap: 10px;
+
+  & > button:nth-child(2) {
+    margin 0
+  }
+}
 </style>