通知公告样式优化，业务单号规则页面

src/api/system/baseCodeRole.ts

@@ -0,0 +1,32 @@
+import request from '@/utils/request'
+
+export const addBaseCodeRule = (data: any) => {
+  return request({
+    url: 'base/codeRule/addBaseCodeRule',
+    method: 'post',
+    data
+  })
+}
+
+export const deleteBaseCodeRule = (code: any) => {
+  return request({
+    url: 'base/codeRule/deleteBaseCodeRule' + '/' + code,
+    method: 'delete'
+  })
+}
+
+export const getBaseCodeRuleList = (params: any) => {
+  return request({
+    url: 'base/codeRule/getBaseCodeRuleList',
+    method: 'get',
+    params
+  })
+}
+
+export const updateBaseCodeRule = (data: any) => {
+  return request({
+    url: 'base/codeRule/updateBaseCodeRule',
+    method: 'put',
+    data
+  })
+}

src/components/Notice/Index.vue

@@ -1,6 +1,6 @@
 <template>
   <div>
-    <el-popover placement="bottom" trigger="hover" width="300px" popper-class="el-popover-pupop-user-news">
+    <el-popover placement="bottom" trigger="hover" width="400px" popper-class="el-popover-pupop-user-news">
       <template #reference>
         <el-badge :is-dot="noticeDot" style="line-height: 18px">
           <el-icon><bell /></el-icon>
@@ -14,42 +14,34 @@
             </template>
             <div class="content-box">
               <template v-if="unreadNoticeList.length > 0">
-                <div class="content-box-item" v-for="(v, k) in unreadNoticeList" :key="k">
+                <div
-                  <el-link :type="v.isRead ? 'primary' : 'danger'" @click="viewNoticeDetail(v.noticeId, v.isRead, v.noticeContent)">{{
+                  class="content-box-item"
-                    v.noticeTitle
+                  v-for="item in unreadNoticeList"
-                  }}</el-link>
+                  @click="viewNoticeDetail({ ...item, noticeType: NoticeType.notice })">
-                  <el-divider />
+                  <el-icon :size="30" color="#409EFF"><bell /></el-icon>
-                  <div class="content-box-time">{{ v.updateTime }}</div>
+                  <div class="content">
+                    <div class="title">{{ item.noticeTitle }}</div>
+                    <div class="content-box-time">{{ formatDate(item.create_time) }}</div>
+                  </div>
                 </div>
               </template>
-              <div class="content-box-empty" v-if="unreadNoticeList.length === 0">
+              <el-empty v-if="unreadNoticeList.length <= 0" :image-size="60" description="暂无通知公告"></el-empty></div
-                <div class="content-box-empty-margin">
+          ></el-tab-pane>
-                  <el-icon><Promotion /></el-icon>
-                  <div class="mt15">全部已读</div>
-                </div>
-              </div>
-            </div></el-tab-pane
-          >
           <el-tab-pane name="aimMsg">
             <template #label>
               <el-badge :value="unreadAimList.length" style="line-height: 18px" :hidden="unreadAimList.length === 0"> 业务信息 </el-badge>
             </template>
             <div class="content-box">
               <template v-if="unreadAimList.length > 0">
-                <div class="content-box-item" v-for="(v, k) in unreadAimList" :key="k">
+                <div class="content-box-item" v-for="item in unreadAimList" @click="viewNoticeDetail({ ...item, noticeType: NoticeType.aimMsg })">
-                  <el-link :type="v.isRead ? 'primary' : 'danger'" @click="viewAimMsgDetail(v.noticeId, v.isRead, v.noticeContent)">{{
+                  <el-icon :size="30" color="#409EFF"><bell /></el-icon>
-                    v.noticeTitle
+                  <div class="content">
-                  }}</el-link>
+                    <div class="title">{{ item.noticeTitle }}</div>
-                  <el-divider />
+                    <div class="content-box-time">{{ formatDate(item.create_time) }}</div>
-                  <div class="content-box-time">{{ v.updateTime }}</div>
+                  </div>
                 </div>
               </template>
-              <div class="content-box-empty" v-if="unreadAimList.length === 0">
+              <el-empty v-if="unreadAimList.length <= 0" :image-size="60" description="暂无业务信息"></el-empty>
-                <div class="content-box-empty-margin">
-                  <el-icon><Promotion /></el-icon>
-                  <div class="mt15">全部已读</div>
-                </div>
-              </div>
             </div>
           </el-tab-pane>
         </el-tabs>
@@ -66,86 +58,102 @@
       </div>
     </el-popover>
 
-    <el-dialog v-model="noticeDialogOpen" title="查看通知详情" draggable :close-on-click-modal="false">
+    <noticeDialog v-model="noticeDialogOpen" :notice-model="info" />
-      <noticeDialog v-model="form.noticeContent" />
-    </el-dialog>
   </div>
 </template>
 
-<script setup name="noticeIndex">
+<script setup name="noticeIndex" lang="ts">
 import useSocketStore from '@/store/modules/socket'
-import signalR from '@/utils/signalR'
+import signalR from '@/signalr'
 import noticeDialog from './noticeDialog/index.vue'
-import useUserStore from '@/store/modules/user'
-
 const router = useRouter()
-const { proxy } = getCurrentInstance()
 const activeTab = ref('notice')
 // 小红点
 const newsDot = ref(false)
 
+enum NoticeType {
+  notice = 1,
+  aimMsg = 2,
+  chat = 3
+}
+interface noticeInfo {
+  noticeId: string
+  noticeTitle: string
+  noticeContent: string
+  noticeType: NoticeType
+  isRead: boolean
+  create_name: string
+  create_time: string
+}
 const noticeDot = computed(() => {
   return useSocketStore().noticeDot
 })
 const readNoticeList = computed(() => {
   return useSocketStore().readNoticeList
 })
-const unreadNoticeList = computed(() => {
+const unreadNoticeList = computed<any[]>(() => {
   return useSocketStore().unreadNoticeList
 })
-const noticeList = computed(() => {
+const noticeList = computed<any[]>(() => {
   return readNoticeList.value
-    .map((item) => ({
+    .map((item: any) => ({
       ...item,
       isRead: true
     }))
     .concat(unreadNoticeList.value.map((item) => ({ ...item, isRead: false })))
 })
-const readAimList = computed(() => {
+const readAimList = computed<any[]>(() => {
   return useSocketStore().readAimList
 })
-const unreadAimList = computed(() => {
+const unreadAimList = computed<any[]>(() => {
   return useSocketStore().unreadAimList
 })
-const aimList = computed(() => {
+const aimList = computed<any[]>(() => {
   return readAimList.value
-    .map((item) => ({
+    .map((item: any) => ({
       ...item,
       isRead: true
     }))
     .concat(unreadAimList.value.map((item) => ({ ...item, isRead: false })))
 })
-// console.log(noticeList.value)
 // 全部已读点击
 function onAllReadClick() {
-  // newsDot.value = false
   if (activeTab.value === 'notice') {
     signalR.AllReadNotice()
   } else {
     signalR.AllReadAimMsg()
   }
 }
-// 前往通知中心点击
+const info = ref<noticeInfo>({
-function onGoToGiteeClick() {
+  noticeId: '',
-  window.open('https://gitee.com/izory/ZrAdminNetCore')
+  noticeTitle: '',
-}
+  noticeContent: '',
-const form = ref({
+  noticeType: NoticeType.notice,
-  noticeContent: ''
+  isRead: false,
+  create_name: '',
+  create_time: ''
 })
 const noticeDialogOpen = ref(false)
-const viewNoticeDetail = (noticeId, isRead, noticeContent) => {
+const viewNoticeDetail = (notice: noticeInfo) => {
-  if (!isRead) signalR.ReadNotice(noticeId)
   noticeDialogOpen.value = true
-  form.value.noticeContent = noticeContent
+  info.value = notice
-}
-const viewAimMsgDetail = (noticeId, isRead, noticeContent) => {
-  if (!isRead) signalR.ReadAimMsg(noticeId)
-  noticeDialogOpen.value = true
-  form.value.noticeContent = noticeContent
 }
+// 前往通知中心点击
 const viewMoreNotice = () => {
   router.push({ path: '/notice/center' })
 }
+const formatDate = (dateTime) => {
+  const dateObj = new Date(dateTime)
+  const options: any = {
+    year: 'numeric',
+    month: 'short',
+    day: 'numeric'
+    // hour: '2-digit',
+    // minute: '2-digit',
+    // second: '2-digit'
+  }
+  return dateObj.toLocaleDateString('zh-CN', options)
+}
 </script>
 
 <style lang="scss">
@@ -169,18 +177,35 @@ const viewMoreNotice = () => {
 }
 .content-box {
   font-size: 13px;
+  min-height: 160px;
+  max-height: 230px;
+  overflow: auto;
+
   .content-box-item {
-    //padding-top: 12px;
+    display: flex;
+    margin-bottom: 20px;
+    cursor: pointer;
+    &:hover {
+      color: var(--el-color-primary);
+    }
+
     &:last-of-type {
       padding-bottom: 12px;
     }
-    .content-box-msg {
+    .content {
-      color: #999999;
+      margin-left: 8px;
-      margin-top: 5px;
+
-      margin-bottom: 5px;
+      .name {
+        color: var(--el-color-primary);
+      }
+    }
+    .icon {
+      width: 30px;
+      height: 30px;
+      margin: 2px 10px 0 0;
     }
     .content-box-time {
-      color: #999999;
+      margin-top: 3px;
     }
   }
   .content-box-empty {

src/components/Notice/noticeDialog/index.vue

@@ -1,28 +1,53 @@
 <template>
-  <div class="app-container">
+  <div>
-    <Editor
+    <el-dialog v-model="noticeDialogOpen" draggable :close-on-click-modal="false" append-to-body>
-      style="height: 600px; overflow-y: hidden"
+      <template #header>
-      v-model="valueHtml"
+        {{ noticeModel.noticeTitle }}
-      :defaultConfig="editorConfig"
+      </template>
-      mode="default"
+      <!-- <Editor
-      @onCreated="handleCreated"
+        style="overflow-y: auto"
-      @onChange="handleChange" />
+        v-model="valueHtml"
+        :defaultConfig="editorConfig"
+        mode="default"
+        @onCreated="handleCreated"
+        @onChange="handleChange" /> -->
+      <div v-html="noticeModel.noticeContent"></div>
+      <div class="n_right">
+        {{ noticeModel.create_name }}
+      </div>
+      <div class="n_right">{{ formatDate(noticeModel.create_time) }}</div>
+    </el-dialog>
   </div>
 </template>
 
 <script setup lang="ts">
 import '@wangeditor/editor/dist/css/style.css' // 引入 css
+import signalR from '@/signalr'
 import { Editor } from '@wangeditor/editor-for-vue'
 interface props {
-  modelValue: string
+  modelValue: boolean
+  noticeModel: noticeInfo
 }
 const props = defineProps<props>()
 const emit = defineEmits()
-const valueHtml = ref(props.modelValue)
+const valueHtml = ref(props.noticeModel.noticeContent)
 const editorRef = shallowRef()
 const editorConfig = {
   readOnly: true
 }
+const noticeDialogOpen = ref(props.modelValue)
+watch(
+  () => noticeDialogOpen.value,
+  (val) => {
+    emit('update:modelValue', val)
+  }
+)
+watch(
+  () => props.modelValue,
+  (val) => {
+    noticeDialogOpen.value = val
+  }
+)
 onBeforeUnmount(() => {
   const editor = editorRef.value
   if (editor == null) return
@@ -32,19 +57,64 @@ const handleCreated = (editor) => {
   editorRef.value = editor
 }
 const handleChange = (editor) => {
-  emit('update:modelValue', editor.getHtml())
+  emit('update:noticeModel.noticeContent', editor.getHtml())
 }
 watch(
-  () => props.modelValue,
+  () => props.noticeModel,
   (value) => {
     const editor = editorRef.value
     if (value == undefined) {
       editor.clear()
       return
     }
-    valueHtml.value = value
+    valueHtml.value = value.noticeContent
+    viewNoticeDetail(value)
   }
 )
+enum NoticeType {
+  notice = 1,
+  aimMsg = 2,
+  chat = 3
+}
+interface noticeInfo {
+  noticeId: string
+  noticeTitle: string
+  noticeContent: string
+  noticeType: NoticeType
+  isRead: boolean
+  create_name: string
+  create_time: string
+}
+const viewNoticeDetail = (notice: noticeInfo) => {
+  if (!notice.isRead) {
+    switch (notice.noticeType) {
+      case NoticeType.notice:
+        signalR.ReadNotice(notice.noticeId)
+        break
+      case NoticeType.aimMsg:
+        signalR.ReadAimMsg(notice.noticeId)
+        break
+    }
+  }
+}
+
+const formatDate = (dateTime) => {
+  const dateObj = new Date(dateTime)
+  const options: any = {
+    year: 'numeric',
+    month: 'short',
+    day: 'numeric'
+    // hour: '2-digit',
+    // minute: '2-digit',
+    // second: '2-digit'
+  }
+  return dateObj.toLocaleDateString('zh-CN', options)
+}
 </script>
 
-<style scoped lang="scss"></style>
+<style scoped lang="scss">
+.n_right {
+  text-align: right;
+  margin: 10px;
+}
+</style>

src/main.ts

@@ -11,7 +11,7 @@ import directive from './directive' // directive
 // 注册指令
 import plugins from './plugins' // plugins
 import { downFile } from '@/utils/request'
-import signalR from '@/utils/signalR'
+import signalR from '@/signalr'
 import vueI18n from './i18n/index'
 import pinia from '@/store/index'
 

src/signalr/analysis.js

@@ -0,0 +1,61 @@
+import { ElNotification, ElMessageBox } from 'element-plus'
+import useSocketStore from '@/store/modules/socket'
+import useUserStore from '@/store/modules/user'
+import { webNotify } from '@/utils/index'
+
+export default {
+  onMessage(connection) {
+    connection.on(MsgType.M001, (data) => {
+      useSocketStore().setOnlineUserNum(data)
+    })
+
+    connection.on(MsgType.M002, (data) => {})
+    // 接受后台手动推送消息
+    connection.on(MsgType.M003, (title, data) => {
+      ElNotification({
+        type: 'info',
+        title: title,
+        message: data,
+        dangerouslyUseHTMLString: true,
+        duration: 0
+      })
+      webNotify({ title: title, body: data })
+    })
+    // 接受系统通知/公告
+    connection.on(MsgType.M004, (data1, data2) => {
+      // if (data.code == 200) {
+      useSocketStore().setUnreadNoticeList(data1)
+      useSocketStore().setReadNoticeList(data2)
+      // }
+    })
+    // 接受聊天数据
+    connection.on(MsgType.M005, (data) => {
+      const { fromUser, message } = data
+
+      useSocketStore().setChat(data)
+
+      if (data.userid != useUserStore().userId) {
+        ElNotification({
+          title: fromUser.nickName,
+          message: message,
+          type: 'success',
+          duration: 3000
+        })
+      }
+      webNotify({ title: fromUser.nickName, body: message })
+    })
+  },
+  AllReadNotice(connection) {
+    connection.invoke('AllReadNotice')
+  },
+  ReadNotice(connection, noticeId) {
+    connection.invoke('ReadNotice', noticeId)
+  }
+}
+const MsgType = {
+  M001: 'onlineNum',
+  M002: 'connId',
+  M003: 'receiveNotice',
+  M004: 'moreNotice',
+  M005: 'receiveChat'
+}

src/signalr/index.js

@@ -0,0 +1,87 @@
+// 官方文档：https://docs.microsoft.com/zh-cn/aspnet/core/signalr/javascript-client?view=aspnetcore-6.0&viewFallbackFrom=aspnetcore-2.2&tabs=visual-studio
+import * as signalR from '@microsoft/signalr'
+import { getToken } from '@/utils/auth'
+import { ElMessage } from 'element-plus'
+import cache from '@/plugins/cache'
+import analysis from '@/signalr/analysis'
+
+export default {
+  // signalR对象
+  SR: {},
+  // 失败连接重试次数
+  failNum: 4,
+  init(url) {
+    var socketUrl = window.location.origin + url + '?clientId=' + cache.local.get('clientId')
+    const connection = new signalR.HubConnectionBuilder()
+      .withUrl(socketUrl, { accessTokenFactory: () => getToken() })
+      .withAutomaticReconnect() //自动重新连接
+      .configureLogging(signalR.LogLevel.Warning)
+      .build()
+    this.SR = connection
+    // 断线重连
+    connection.onclose(async (error) => {
+      console.error('断开连接了' + error)
+      console.assert(connection.state === signalR.HubConnectionState.Disconnected)
+      // 建议用户重新刷新浏览器
+      await this.start()
+    })
+
+    connection.onreconnected((connectionId) => {
+      ElMessage({
+        message: '与服务器通讯已连接成功',
+        type: 'success',
+        duration: 2000
+      })
+      console.log('断线重新连接成功' + connectionId)
+    })
+
+    connection.onreconnecting(async () => {
+      console.log('断线重新连接中... ')
+
+      await this.start()
+    })
+    analysis.onMessage(connection)
+    // 启动
+    // this.start();
+  },
+  /**
+   * 调用 this.signalR.start().then(async () => { await this.SR.invoke("method")})
+   * @returns
+   */
+  async start() {
+    try {
+      console.debug('signalR-1', this.SR.state)
+      //使用async和await 或 promise的then 和catch 处理来自服务端的异常
+      if (this.SR.state === signalR.HubConnectionState.Disconnected) {
+        await this.SR.start()
+      }
+
+      console.debug('signalR-2', this.SR.state)
+      return true
+    } catch (error) {
+      console.error(error)
+      this.failNum--
+      // console.log(`失败重试剩余次数${that.failNum}`, error)
+      if (this.failNum > 0 && this.SR.state.Disconnected) {
+        setTimeout(async () => {
+          await this.start()
+        }, 5000)
+      }
+      return false
+    }
+  },
+  AllReadNotice() {
+    analysis.AllReadNotice(this.SR)
+  },
+  ReadNotice(noticeId) {
+    analysis.ReadNotice(this.SR, noticeId)
+  }
+  // AllReadAimMsg() {
+  //   const connection = this.SR
+  //   connection.invoke('AllReadAimMsg')
+  // },
+  // ReadAimMsg(msgId) {
+  //   const connection = this.SR
+  //   connection.invoke('ReadAimMsg', msgId)
+  // }
+}

src/views/noticecenter/index.vue

@@ -7,14 +7,23 @@
         </template>
         <el-divider />
         <el-empty :image-size="150" description="暂无通知公告" v-if="noticeList.length === 0" />
-        <el-table :data="noticeList" height="600" :show-header="false" v-else>
+        <el-table :data="noticeList" height="600" :show-header="false" :cell-style="{ height: '40px' }" v-else>
           <el-table-column prop="noticeTitle" label="标题">
             <template #default="{ row }">
-              <el-link :type="row.isRead ? 'primary' : 'danger'" @click="viewNoticeDetail(row.noticeId, row.isRead, row.noticeContent)">{{
+              <el-icon :size="20" color="#409EFF"><bell /></el-icon>
-                row.noticeTitle
+              <el-link
-              }}</el-link>
+                :type="row.isRead ? 'primary' : 'danger'"
+                style="margin-left: 8px"
+                @click="viewNoticeDetail({ ...row, noticeType: NoticeType.notice })"
+                >{{ row.noticeTitle }}</el-link
+              >
             </template>
           </el-table-column>
+          <!-- <el-table-column prop="noticeContent" label="内容">
+            <template #default="{ row }">
+              <div v-html="row.noticeContent"></div>
+            </template>
+          </el-table-column> -->
           <el-table-column prop="create_time" label="时间" width="180">
             <template #default="{ row }">
               {{ formatDate(row.create_time) }}
@@ -28,14 +37,23 @@
         </template>
         <el-divider />
         <el-empty :image-size="150" description="暂无业务信息" v-if="aimList.length === 0" />
-        <el-table :data="aimList" height="600" :show-header="false" v-else>
+        <el-table :data="aimList" height="600" :show-header="false" :cell-style="{ height: '40px' }" v-else>
           <el-table-column prop="noticeTitle" label="标题">
             <template #default="{ row }">
-              <el-link :type="row.isRead ? 'primary' : 'danger'" @click="viewAimMsgDetail(row.noticeId, row.isRead, row.noticeContent)">{{
+              <el-icon :size="20" color="#409EFF"><bell /></el-icon>
-                row.noticeTitle
+              <el-link
-              }}</el-link>
+                :type="row.isRead ? 'primary' : 'danger'"
+                style="margin-left: 8px"
+                @click="viewNoticeDetail({ ...row, noticeType: NoticeType.notice })"
+                >{{ row.noticeTitle }}</el-link
+              >
             </template>
           </el-table-column>
+          <!-- <el-table-column prop="noticeContent" label="内容">
+            <template #default="{ row }">
+              <div v-html="row.noticeContent"></div>
+            </template>
+          </el-table-column> -->
           <el-table-column prop="create_time" label="时间" width="180">
             <template #default="{ row }">
               {{ formatDate(row.create_time) }}
@@ -49,18 +67,21 @@
         <el-button type="primary" link class="left-top-button">全部标为已读</el-button>
       </template>
     </el-popconfirm>
-    <el-dialog v-model="noticeDialogOpen" title="查看通知详情" draggable :close-on-click-modal="false">
+    <noticeDialog v-model="noticeDialogOpen" :notice-model="info" />
-      <noticeDialog v-model="form.noticeContent" />
-    </el-dialog>
   </div>
 </template>
 
 <script setup lang="ts">
 import useSocketStore from '@/store/modules/socket'
-import signalR from '@/utils/signalR'
+import signalR from '@/signalr'
 import noticeDialog from '@/components/Notice/noticeDialog/index.vue'
 import { ElTable } from 'element-plus'
 
+enum NoticeType {
+  notice = 1,
+  aimMsg = 2,
+  chat = 3
+}
 const activeTab = ref('notice')
 const readNoticeList = computed(() => {
   return useSocketStore().readNoticeList
@@ -91,20 +112,30 @@ const aimList = computed(() => {
     }))
     .concat(unreadAimList.value.map((item: any) => ({ ...item, isRead: false })))
 })
-const form = ref({
+interface noticeInfo {
-  noticeContent: ''
+  noticeId: string
+  noticeTitle: string
+  noticeContent: string
+  noticeType: NoticeType
+  isRead: boolean
+  create_name: string
+  create_time: string
+}
+const info = ref<noticeInfo>({
+  noticeId: '',
+  noticeTitle: '',
+  noticeContent: '',
+  noticeType: NoticeType.notice,
+  isRead: false,
+  create_name: '',
+  create_time: ''
 })
 const noticeDialogOpen = ref(false)
-const viewNoticeDetail = (noticeId, isRead, noticeContent) => {
+const viewNoticeDetail = (notice: noticeInfo) => {
-  if (!isRead) signalR.ReadNotice(noticeId)
   noticeDialogOpen.value = true
-  form.value.noticeContent = noticeContent
+  info.value = notice
-}
-const viewAimMsgDetail = (noticeId, isRead, noticeContent) => {
-  if (!isRead) signalR.ReadAimMsg(noticeId)
-  noticeDialogOpen.value = true
-  form.value.noticeContent = noticeContent
 }
+
 function onAllReadClick() {
   if (activeTab.value === 'notice') {
     signalR.AllReadNotice()

src/views/system/codeRule/index.vue

@@ -0,0 +1,260 @@
+<template>
+  <div class="app-container">
+    <el-row :gutter="10" class="mb8">
+      <el-col :span="1.5">
+        <el-button type="primary" plain icon="plus" @click="handleAdd(ruleFormRef)">
+          {{ $t('btn.add') }}
+        </el-button>
+      </el-col>
+      <el-col :span="1.5">
+        <el-button type="success" plain icon="edit" :disabled="single" @click="handleEdit(ruleFormRef)">
+          {{ $t('btn.edit') }}
+        </el-button>
+      </el-col>
+      <el-col :span="1.5">
+        <el-button type="danger" plain icon="delete" :disabled="multiple" @click="handleDelete()">
+          {{ $t('btn.delete') }}
+        </el-button>
+      </el-col>
+      <right-toolbar v-model:showSearch="showSearch" @queryTable="getList"></right-toolbar>
+    </el-row>
+
+    <el-table v-loading="loading" :data="codeRoleList" @selection-change="handleSelectionChange">
+      <el-table-column type="selection" width="55" align="center" />
+      <el-table-column label="代码" align="center" prop="code" width="150" :show-overflow-tooltip="true" />
+      <el-table-column label="名称" align="center" prop="name" width="200" :show-overflow-tooltip="true" />
+      <el-table-column label="类型" align="center" prop="type" width="180" :show-overflow-tooltip="true" />
+      <el-table-column label="前缀" align="center" prop="prefix" :show-overflow-tooltip="true" />
+      <el-table-column label="宽度" align="center" prop="width" :show-overflow-tooltip="true" />
+      <el-table-column label="初始值" align="center" prop="initVal" :show-overflow-tooltip="true" />
+      <el-table-column label="增量" align="center" prop="step" width="180" :show-overflow-tooltip="true" />
+      <el-table-column label="终止值" align="center" prop="finishVal" :show-overflow-tooltip="true" />
+      <el-table-column label="循环" align="center" prop="cycle" :show-overflow-tooltip="true" />
+      <el-table-column label="后缀" align="center" prop="sufix" :show-overflow-tooltip="true" />
+      <el-table-column label="分隔符" align="center" prop="joinChar" :show-overflow-tooltip="true" />
+      <el-table-column label="填充符" align="center" prop="fillChar" :show-overflow-tooltip="true" />
+      <el-table-column label="类型值" align="center" prop="typeVal" :show-overflow-tooltip="true" />
+      <el-table-column label="循环号" align="center" prop="cycleVal" :show-overflow-tooltip="true" />
+      <el-table-column label="当前值" align="center" prop="currVal" width="180" :show-overflow-tooltip="true" />
+      <el-table-column label="版本号" align="center" prop="version" width="180" :show-overflow-tooltip="true" />
+    </el-table>
+    <pagination v-model:total="total" v-model:page="queryParams.pageNum" v-model:limit="queryParams.pageSize" @pagination="getList" />
+    <!-- 新增/编辑 -->
+    <el-dialog v-model="dialogVisible" v-if="dialogVisible" :title="dialogTitle" draggable>
+      <el-form ref="ruleFormRef" :model="codeRuleForm" :rules="rules" status-icon label-width="90px">
+        <el-row :gutter="10">
+          <el-col :span="12">
+            <el-form-item label="代码" prop="code">
+              <el-input v-model="codeRuleForm.code" placeholder="请输入" />
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item label="名称" prop="name">
+              <el-input v-model="codeRuleForm.name" placeholder="请输入" />
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item label="类型" prop="type">
+              <el-input v-model="codeRuleForm.type" placeholder="请输入" />
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item label="前缀" prop="prefix">
+              <el-input v-model="codeRuleForm.prefix" placeholder="请输入" />
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item label="宽度" prop="width">
+              <el-input v-model="codeRuleForm.width" placeholder="请输入" />
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item label="初始值" prop="initVal">
+              <el-input v-model="codeRuleForm.initVal" placeholder="请输入" />
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item label="增量" prop="step">
+              <el-input v-model="codeRuleForm.step" placeholder="请输入" />
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item label="终止值" prop="finishVal">
+              <el-input v-model="codeRuleForm.finishVal" placeholder="请输入" />
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item label="循环" prop="cycle">
+              <el-input v-model="codeRuleForm.cycle" placeholder="请输入" />
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item label="后缀" prop="sufix">
+              <el-input v-model="codeRuleForm.sufix" placeholder="请输入" />
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item label="分隔符" prop="joinChar">
+              <el-input v-model="codeRuleForm.joinChar" placeholder="请输入" />
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item label="填充符" prop="fillChar">
+              <el-input v-model="codeRuleForm.fillChar" placeholder="请输入" />
+            </el-form-item>
+          </el-col>
+        </el-row>
+      </el-form>
+      <template #footer>
+        <span>
+          <el-button @click="dialogVisible = false">取消</el-button>
+          <el-button type="primary" @click="submitForm(ruleFormRef)">确认</el-button>
+        </span>
+      </template>
+    </el-dialog>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { addBaseCodeRule, deleteBaseCodeRule, updateBaseCodeRule, getBaseCodeRuleList } from '@/api/system/baseCodeRole'
+import type { FormInstance, FormRules } from 'element-plus'
+import useCurrentInstance from '@/utils/useCurrentInstance'
+const { globalProperties } = useCurrentInstance()
+const dialogVisible = ref(false)
+const dialogTitle = ref('')
+const ruleFormRef = ref<FormInstance>()
+const multipleSelection = ref([])
+let codeRuleForm: any = reactive({
+  code: null,
+  name: null,
+  type: null,
+  prefix: null,
+  width: null,
+  initVal: null,
+  step: null,
+  finishVal: null,
+  cycle: null,
+  sufix: null,
+  joinChar: null,
+  fillChar: null
+})
+let rules = reactive<FormRules>({
+  code: [{ required: true, message: '不可为空', trigger: 'blur' }],
+  name: [{ required: true, message: '不可为空', trigger: 'blur' }]
+})
+// 遮罩层
+const loading = ref(true)
+// 选中数组
+const ids = ref([])
+// 非单个禁用
+const single = ref(true)
+// 非多个禁用
+const multiple = ref(true)
+// 显示搜索条件
+const showSearch = ref(true)
+// 业务维护编码表格数据
+let codeRoleList: any[] = reactive([])
+const queryParams = reactive({
+  pageNum: 1,
+  pageSize: 10
+})
+// 总条数
+const total = ref(0)
+const getList = () => {
+  loading.value = true
+  getBaseCodeRuleList(queryParams).then((res) => {
+    codeRoleList = res.data.result
+    total.value = res.data.totalNum
+    loading.value = false
+  })
+}
+const handleSelectionChange = (selection) => {
+  ids.value = selection.map((item) => item.code)
+  single.value = ids.value.length !== 1
+  multiple.value = !ids.value.length
+  multipleSelection.value = selection
+}
+const resetCodeRuleForm = (isUpdate?: boolean, row?) => {
+  if (isUpdate) {
+    codeRuleForm = reactive({
+      code: row.code,
+      name: row.name,
+      type: row.type,
+      prefix: row.prefix,
+      width: row.width,
+      initVal: row.initVal,
+      step: row.step,
+      finishVal: row.finishVal,
+      cycle: row.cycle,
+      sufix: row.sufix,
+      joinChar: row.joinChar,
+      fillChar: row.fillChar
+    })
+  } else {
+    codeRuleForm = reactive({
+      code: null,
+      name: null,
+      type: null,
+      prefix: null,
+      width: null,
+      initVal: null,
+      step: null,
+      finishVal: null,
+      cycle: null,
+      sufix: null,
+      joinChar: null,
+      fillChar: null
+    })
+  }
+}
+const handleAdd = (formEl: FormInstance | undefined) => {
+  dialogTitle.value = '新增规则'
+  dialogVisible.value = true
+  resetCodeRuleForm(false)
+  formEl && formEl.clearValidate()
+}
+const handleEdit = (formEl: FormInstance | undefined) => {
+  dialogTitle.value = '编辑规则'
+  dialogVisible.value = true
+  resetCodeRuleForm(true, multipleSelection.value[0])
+  formEl && formEl.clearValidate()
+}
+/** 删除按钮操作 */
+const handleDelete = async () => {
+  const Ids = ids.value
+  globalProperties
+    .$confirm('是否确认删除参数编号为"' + Ids + '"的数据项？')
+    .then(async function () {
+      return await deleteBaseCodeRule(Ids)
+    })
+    .then(() => {
+      getList()
+      globalProperties.$modal.msgSuccess('删除成功')
+    })
+    .catch(() => {})
+}
+const submitForm = (formEl: FormInstance | undefined) => {
+  if (!formEl) return
+  formEl.validate((valid) => {
+    if (valid) {
+      // 提交
+      if (dialogTitle.value === '新增规则') {
+        addBaseCodeRule(codeRuleForm).then((res) => {
+          getList()
+          dialogVisible.value = false
+        })
+      } else {
+        updateBaseCodeRule(codeRuleForm).then((res) => {
+          getList()
+          dialogVisible.value = false
+        })
+      }
+    }
+  })
+}
+onMounted(() => {
+  getList()
+})
+</script>
+
+<style scoped></style>