diff --git a/src/api/system/codingrules/details.ts b/src/api/system/codingrules/details.ts
new file mode 100644
index 0000000000000000000000000000000000000000..9c23189f37f45960924beb1818d4af3560fa44dc
--- /dev/null
+++ b/src/api/system/codingrules/details.ts
@@ -0,0 +1,45 @@
+import request from '@/config/axios'
+
+export interface CodingRulesDetailsVO {
+                    id: string
+                    ruleId: string
+                    orderNum: number
+                    type: string
+                    value: string
+                    len: number
+                    initial: number
+                    stepSize: number
+                    fillKey: string
+                    remark: string
+                    deletedTime: Date
+}
+
+// 查询编码规则明细列表
+export const getCodingRulesDetailsPage = async (params) => {
+  return await request.get({ url: '/system/coding-rules/getDetails', params })
+}
+
+// 查询编码规则明细详情
+export const getCodingRulesDetails = async (id: number) => {
+  return await request.get({ url: '/system/coding-rules/getDetailInfo?id=' + id })
+}
+
+// 新增编码规则明细
+export const createCodingRulesDetails = async (data: CodingRulesDetailsVO) => {
+  return await request.post({ url: '/system/coding-rules/insertDetails', data })
+}
+
+// 修改编码规则明细
+export const updateCodingRulesDetails = async (data: CodingRulesDetailsVO) => {
+  return await request.put({ url: '/system/coding-rules/updateDetails', data })
+}
+
+// 删除编码规则明细
+export const deleteCodingRulesDetails = async (id: number) => {
+  return await request.delete({ url: '/system/coding-rules/deleteDetails?id=' + id })
+}
+
+// 导出编码规则明细 Excel
+export const exportCodingRulesDetailsApi = async (params) => {
+  return await request.download({ url: '/system/coding-rules-details/export-excel', params })
+}
diff --git a/src/api/system/codingrules/index.ts b/src/api/system/codingrules/index.ts
new file mode 100644
index 0000000000000000000000000000000000000000..fc2cef17be68b2cf02b8543854afda8efa888f9f
--- /dev/null
+++ b/src/api/system/codingrules/index.ts
@@ -0,0 +1,44 @@
+import request from '@/config/axios'
+
+export interface CodingRulesVO {
+                    id: string
+                    code: string
+                    name: string
+                    remark: string
+                    deletedTime: Date
+}
+
+// 查询编号规则表头列表
+export const getCodingRulesPage = async (params) => {
+  return await request.get({ url: '/system/coding-rules/page', params })
+}
+
+// 查询编号规则表头详情
+export const getCodingRules = async (id: number) => {
+  return await request.get({ url: '/system/coding-rules/get?id=' + id })
+}
+
+// 新增编号规则表头
+export const createCodingRules = async (data: CodingRulesVO) => {
+  return await request.post({ url: '/system/coding-rules/create', data })
+}
+
+// 修改编号规则表头
+export const updateCodingRules = async (data: CodingRulesVO) => {
+  return await request.put({ url: '/system/coding-rules/update', data })
+}
+
+// 删除编号规则表头
+export const deleteCodingRules = async (id: number) => {
+  return await request.delete({ url: '/system/coding-rules/delete?id=' + id })
+}
+
+// 导出编号规则表头 Excel
+export const exportCodingRulesApi = async (params) => {
+  return await request.download({ url: '/system/coding-rules/export-excel', params })
+}
+
+// 预览编号规则
+export const previewCodingRulesApi = async (params) => {
+  return await request.get({ url: '/system/coding-rules/genCodingRules', params })
+}
diff --git a/src/views/system/codingrules/CodingRulesForm.vue b/src/views/system/codingrules/CodingRulesForm.vue
new file mode 100644
index 0000000000000000000000000000000000000000..7cdf4aefa562a78614d6565812e7145be7ff7ba0
--- /dev/null
+++ b/src/views/system/codingrules/CodingRulesForm.vue
@@ -0,0 +1,65 @@
+<template>
+  <Dialog :title="dialogTitle" v-model="dialogVisible">
+    <Form ref="formRef" :schema="allSchemas.formSchema" :rules="rules" v-loading="formLoading" />
+    <template #footer>
+      <el-button @click="submitForm" type="primary" :disabled="formLoading">确 定</el-button>
+      <el-button @click="dialogVisible = false">取 消</el-button>
+    </template>
+  </Dialog>
+</template>
+<script setup lang="ts">
+import * as CodingRulesApi from '@/api/system/codingrules'
+import { rules, allSchemas } from './codingRules.data'
+const { t } = useI18n() // 国际化
+const message = useMessage() // 消息弹窗
+
+const dialogVisible = ref(false) // 弹窗的是否展示
+const dialogTitle = ref('') // 弹窗的标题
+const formLoading = ref(false) // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用
+const formType = ref('') // 表单的类型：create - 新增；update - 修改
+const formRef = ref() // 表单 Ref
+
+/** 打开弹窗 */
+const open = async (type: string, id?: number) => {
+  dialogVisible.value = true
+  dialogTitle.value = t('action.' + type)
+  formType.value = type
+  // 修改时，设置数据
+  if (id) {
+    formLoading.value = true
+    try {
+      const data = await CodingRulesApi.getCodingRules(id)
+      formRef.value.setValues(data)
+    } finally {
+      formLoading.value = false
+    }
+  }
+}
+defineExpose({ open }) // 提供 open 方法，用于打开弹窗
+
+/** 提交表单 */
+const emit = defineEmits(['success']) // 定义 success 事件，用于操作成功后的回调
+const submitForm = async () => {
+  // 校验表单
+  if (!formRef) return
+  const valid = await formRef.value.getElFormRef().validate()
+  if (!valid) return
+  // 提交请求
+  formLoading.value = true
+  try {
+    const data = formRef.value.formModel as CodingRulesApi.CodingRulesVO
+    if (formType.value === 'create') {
+      await CodingRulesApi.createCodingRules(data)
+      message.success(t('common.createSuccess'))
+    } else {
+      await CodingRulesApi.updateCodingRules(data)
+      message.success(t('common.updateSuccess'))
+    }
+    dialogVisible.value = false
+    // 发送操作成功的事件
+    emit('success')
+  } finally {
+    formLoading.value = false
+  }
+}
+</script>
diff --git a/src/views/system/codingrules/codingRules.data.ts b/src/views/system/codingrules/codingRules.data.ts
new file mode 100644
index 0000000000000000000000000000000000000000..bf4fc7cc45e075db8812f82605c15ea81dfee8a7
--- /dev/null
+++ b/src/views/system/codingrules/codingRules.data.ts
@@ -0,0 +1,55 @@
+import type { CrudSchema } from '@/hooks/web/useCrudSchemas'
+import { dateFormatter } from '@/utils/formatTime'
+
+// 表单校验
+export const rules = reactive({
+  code: [required],
+  name: [required],
+})
+
+// CrudSchema https://doc.iocoder.cn/vue3/crud-schema/
+const crudSchemas = reactive<CrudSchema[]>([
+  {
+    label: 'id',
+    field: 'id',
+    isForm: false,
+    isTable: false
+  },
+  {
+    label: '规则编码',
+    field: 'code',
+    isSearch: true,
+  },
+  {
+    label: '名称',
+    field: 'name',
+    isSearch: true,
+  },
+  {
+    label: '描述',
+    field: 'remark',
+    isSearch: true,
+  },
+  {
+    label: '创建时间',
+    field: 'createTime',
+    formatter: dateFormatter,
+    isSearch: false,
+    search: {
+      component: 'DatePicker',
+      componentProps: {
+        valueFormat: 'YYYY-MM-DD HH:mm:ss',
+        type: 'daterange',
+        defaultTime: [new Date('1 00:00:00'), new Date('1 23:59:59')]
+      }
+    },
+    isForm: false,
+  },
+  {
+    label: '操作',
+    field: 'action',
+    isForm: false,
+    width: 220
+  }
+])
+export const { allSchemas } = useCrudSchemas(crudSchemas)
diff --git a/src/views/system/codingrules/details/CodingRulesDetailsForm.vue b/src/views/system/codingrules/details/CodingRulesDetailsForm.vue
new file mode 100644
index 0000000000000000000000000000000000000000..7dd16ab9dcb0de16ba0f566c1e871b8ff11abd48
--- /dev/null
+++ b/src/views/system/codingrules/details/CodingRulesDetailsForm.vue
@@ -0,0 +1,130 @@
+<template>
+  <Dialog :title="dialogTitle" v-model="dialogVisible">
+    <Form ref="formRef" :schema="allSchemas.formSchema" :rules="rules" v-loading="formLoading">
+     <template #orderNum="form">
+        <el-input
+          v-model="form.orderNum"
+          type="number"
+          placeholder="请设置序号"
+          clearable
+        />
+      </template>
+      <template #value="form">
+        <el-input v-if="form.type !== '2'" :disabled="['3','4','5'].includes(form.type)" v-model="form.value" placeholder="请输入设置值" />
+         <el-select
+          v-else
+          v-model="form.value"
+          placeholder="请选择日期格式"
+        >
+          <el-option
+            v-for="dict in getDictOptions(DICT_TYPE.CODING_RULES_DATE_FORMAT)"
+            :key="dict.value"
+            :label="dict.label"
+            :value="dict.value"
+          />
+        </el-select>
+      </template>
+      <template #len="form">
+        <el-input
+          v-model="form.len"
+          type="number"
+          placeholder="请设置长度"
+          :disabled="form.type === '1' || form.type === '2'"
+          clearable
+        />
+      </template>
+      <template #initial="form">
+        <el-input
+          v-model="form.initial"
+          type="number"
+          placeholder="请设置起始值"
+          :disabled="form.type === '1' || form.type === '2'"
+          clearable
+        />
+      </template>
+      <template #stepSize="form">
+        <el-input
+          v-model="form.stepSize"
+          type="number"
+          placeholder="请设置步长"
+          :disabled="form.type === '1' || form.type === '2'"
+          clearable
+        />
+      </template>
+      <template #fillKey="form">
+        <el-input
+          v-model="form.fillKey"
+          type="number"
+          placeholder="请设置补位符"
+          :disabled="form.type === '1' || form.type === '2'"
+          clearable
+        />
+      </template>
+    </Form>
+    <template #footer>
+      <el-button @click="submitForm" type="primary" :disabled="formLoading">确 定</el-button>
+      <el-button @click="dialogVisible = false">取 消</el-button>
+    </template>
+  </Dialog>
+</template>
+<script setup lang="ts">
+import * as CodingRulesDetailsApi from '@/api/system/codingrules/details'
+import { rules, allSchemas } from './codingRulesDetails.data'
+import { DICT_TYPE, getDictOptions, getIntDictOptions } from '@/utils/dict'
+const { t } = useI18n() // 国际化
+const message = useMessage() // 消息弹窗
+const route = useRoute()
+
+const dialogVisible = ref(false) // 弹窗的是否展示
+const dialogTitle = ref('') // 弹窗的标题
+const formLoading = ref(false) // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用
+const formType = ref('') // 表单的类型：create - 新增；update - 修改
+const formRef = ref() // 表单 Ref
+
+/** 打开弹窗 */
+const open = async (type: string, id?: number) => {
+  dialogVisible.value = true
+  dialogTitle.value = t('action.' + type)
+  formType.value = type
+  // 修改时，设置数据
+  if (id) {
+    formLoading.value = true
+    try {
+      const data = await CodingRulesDetailsApi.getCodingRulesDetails(id)
+      formRef.value.setValues(data)
+      console.log(formRef.value);
+      
+    } finally {
+      formLoading.value = false
+    }
+  }
+}
+defineExpose({ open }) // 提供 open 方法，用于打开弹窗
+
+/** 提交表单 */
+const emit = defineEmits(['success']) // 定义 success 事件，用于操作成功后的回调
+const submitForm = async () => {
+  // 校验表单
+  if (!formRef) return
+  const valid = await formRef.value.getElFormRef().validate()
+  if (!valid) return
+  // 提交请求
+  formLoading.value = true
+  try {
+    formRef.value.formModel.ruleId = route.query.id
+    const data = formRef.value.formModel as CodingRulesDetailsApi.CodingRulesDetailsVO
+    if (formType.value === 'create') {
+      await CodingRulesDetailsApi.createCodingRulesDetails(data)
+      message.success(t('common.createSuccess'))
+    } else {
+      await CodingRulesDetailsApi.updateCodingRulesDetails(data)
+      message.success(t('common.updateSuccess'))
+    }
+    dialogVisible.value = false
+    // 发送操作成功的事件
+    emit('success')
+  } finally {
+    formLoading.value = false
+  }
+}
+</script>
diff --git a/src/views/system/codingrules/details/codingRulesDetails.data.ts b/src/views/system/codingrules/details/codingRulesDetails.data.ts
new file mode 100644
index 0000000000000000000000000000000000000000..6878d83e242748c3f95ef3c21562456149af3371
--- /dev/null
+++ b/src/views/system/codingrules/details/codingRulesDetails.data.ts
@@ -0,0 +1,136 @@
+import type { CrudSchema } from '@/hooks/web/useCrudSchemas'
+import { dateFormatter } from '@/utils/formatTime'
+
+// 表单校验
+export const rules = reactive({
+  ruleId: [required],
+  orderNum: [required],
+  type: [required],
+})
+
+// CrudSchema https://doc.iocoder.cn/vue3/crud-schema/
+const crudSchemas = reactive<CrudSchema[]>([
+  {
+    label: 'id',
+    field: 'id',
+    isForm: false,
+    isTable: false,
+  },
+  {
+    label: '编码规则头id',
+    field: 'ruleId',
+    isSearch: false,
+    isTable: false,
+    isForm: false
+  },
+  {
+    label: '序号',
+    field: 'orderNum',
+    isSearch: false,
+    form: {
+      component: 'InputNumber',
+      value: 0
+    },
+  },
+  {
+    label: '类型',
+    field: 'type',
+    isSearch: false,
+    dictType: DICT_TYPE.CODING_RULES_TYPE
+  },
+  {
+    label: '设置值',
+    field: 'value',
+    isSearch: false,
+  },
+  {
+    label: '长度',
+    field: 'len',
+    isSearch: false,
+    form: {
+      component: 'InputNumber',
+      value: 0
+    },
+  },
+  {
+    label: '起始值',
+    field: 'initial',
+    isSearch: false,
+    form: {
+      component: 'InputNumber',
+      value: 0
+    },
+  },
+  {
+    label: '步长',
+    field: 'stepSize',
+    isSearch: false,
+    form: {
+      component: 'InputNumber',
+      value: 0
+    },
+  },
+  {
+    label: '补位符',
+    field: 'fillKey',
+    isSearch: false,
+  },
+  {
+    label: '备注',
+    field: 'remark',
+    isSearch: false,
+    form: {
+      component: 'Input',
+      componentProps: {
+        type: 'textarea',
+        rows: 3
+      },
+      colProps: {
+        span: 24
+      }
+    }
+  },
+  {
+    label: '创建时间',
+    field: 'createTime',
+    formatter: dateFormatter,
+    isSearch: false,
+    search: {
+      component: 'DatePicker',
+      componentProps: {
+        valueFormat: 'YYYY-MM-DD HH:mm:ss',
+        type: 'daterange',
+        defaultTime: [new Date('1 00:00:00'), new Date('1 23:59:59')]
+      }
+    },
+    isForm: false,
+  },
+  {
+    label: '删除时间',
+    field: 'deletedTime',
+    formatter: dateFormatter,
+    isSearch: false,
+    isForm: false,
+    search: {
+      component: 'DatePicker',
+      componentProps: {
+        valueFormat: 'YYYY-MM-DD HH:mm:ss',
+        type: 'daterange',
+        defaultTime: [new Date('1 00:00:00'), new Date('1 23:59:59')]
+      }
+    },
+    form: {
+      component: 'DatePicker',
+      componentProps: {
+        type: 'datetime',
+        valueFormat: 'x'
+      }
+    },
+  },
+  {
+    label: '操作',
+    field: 'action',
+    isForm: false
+  }
+])
+export const { allSchemas } = useCrudSchemas(crudSchemas)
diff --git a/src/views/system/codingrules/details/index.vue b/src/views/system/codingrules/details/index.vue
new file mode 100644
index 0000000000000000000000000000000000000000..8ca6287d9782d6ff851ca8a7c52a948cc02db52a
--- /dev/null
+++ b/src/views/system/codingrules/details/index.vue
@@ -0,0 +1,121 @@
+<template>
+  <!-- 搜索工作栏 -->
+  <ContentWrap>
+    <!-- <Search :schema="allSchemas.searchSchema" @search="setSearchParams" @reset="setSearchParams">
+      新增等操作按钮
+      <template #actionMore>
+        <el-button
+          type="primary"
+          plain
+          @click="openForm('create')"
+          v-hasPermi="['system:coding-rules-details:create']"
+        >
+          <Icon icon="ep:plus" class="mr-5px" /> 新增
+        </el-button>
+      </template>
+    </Search> -->
+
+    <el-button
+      type="primary"
+      plain
+      @click="openForm('create')"
+      v-hasPermi="['system:coding-rules-details:create']"
+    >
+      <Icon icon="ep:plus" class="mr-5px" /> 新增
+    </el-button>
+    <el-button
+      type="primary"
+      plain
+      @click="handlePreview()"
+        >
+        <Icon icon="ep:view" class="mr-5px" />预览编码规则
+    </el-button>
+  </ContentWrap>
+
+  <!-- 列表 -->
+  <ContentWrap>
+    <Table
+      :columns="allSchemas.tableColumns"
+      :data="tableObject.tableList"
+      :loading="tableObject.loading"
+    >
+      <template #action="{ row }">
+        <el-button
+          link
+          type="primary"
+          @click="openForm('update', row.id)"
+          v-hasPermi="['system:coding-rules-details:update']"
+        >
+          编辑
+        </el-button>
+        <el-button
+          link
+          type="danger"
+          v-hasPermi="['system:coding-rules-details:delete']"
+          @click="handleDelete(row.id)"
+        >
+          删除
+        </el-button>
+      </template>
+    </Table>
+  </ContentWrap>
+
+  <!-- 表单弹窗：添加/修改 -->
+  <CodingRulesDetailsForm ref="formRef" @success="getList" />
+</template>
+<script setup lang="ts" name="CodingRulesDetails">
+import { allSchemas } from './codingRulesDetails.data'
+import * as CodingRulesDetailsApi from '@/api/system/codingrules/details'
+import CodingRulesDetailsForm from './CodingRulesDetailsForm.vue'
+import * as CodingRulesApi from '@/api/system/codingrules'
+import { ElMessage, ElMessageBox } from 'element-plus'
+const route = useRoute()
+
+// tableObject：表格的属性对象，可获得分页大小、条数等属性
+// tableMethods：表格的操作对象，可进行获得分页、删除记录等操作
+// 详细可见：https://doc.iocoder.cn/vue3/crud-schema/
+const { tableObject, tableMethods } = useTable({
+  getListApi: async () => {
+    tableObject.params.id = route.query.id
+    const data = await CodingRulesDetailsApi.getCodingRulesDetailsPage(tableObject.params)
+    return { list: data }
+  },
+  delListApi: CodingRulesDetailsApi.deleteCodingRulesDetails // 删除接口
+})
+
+
+// 获得表格的各种操作
+const { getList, setSearchParams } = tableMethods
+
+/** 添加/修改操作 */
+const formRef = ref()
+const openForm = (type: string, id?: number) => {
+  formRef.value.open(type, id)
+}
+
+/** 删除按钮操作 */
+const handleDelete = (id: number) => {
+  tableMethods.delList(id, false)
+}
+
+/** 预览编码规则 */
+const handlePreview = async () => {
+  const params = {
+    code: route.query.code,
+    preview: true
+  }
+ const previewData = await CodingRulesApi.previewCodingRulesApi(params)
+ ElMessageBox.alert(
+    `<strong>${previewData}</strong>`,
+    '编码规则预览',
+    {
+      dangerouslyUseHTMLString: true,
+    }
+  )
+}
+
+/** 初始化 **/
+onMounted(() => {
+  getList()
+})
+</script>
diff --git a/src/views/system/codingrules/index.vue b/src/views/system/codingrules/index.vue
new file mode 100644
index 0000000000000000000000000000000000000000..a8b40b31aafb9d8f43ceab72f8d6d5de9e1807b5
--- /dev/null
+++ b/src/views/system/codingrules/index.vue
@@ -0,0 +1,129 @@
+<template>
+  <!-- 搜索工作栏 -->
+  <ContentWrap>
+    <Search :schema="allSchemas.searchSchema" @search="setSearchParams" @reset="setSearchParams">
+      <!-- 新增等操作按钮 -->
+      <template #actionMore>
+        <el-button
+          type="primary"
+          plain
+          @click="openForm('create')"
+          v-hasPermi="['system:coding-rules:create']"
+        >
+          <Icon icon="ep:plus" class="mr-5px" /> 新增
+        </el-button>
+      </template>
+    </Search>
+  </ContentWrap>
+
+  <!-- 列表 -->
+  <ContentWrap>
+    <Table
+      :columns="allSchemas.tableColumns"
+      :data="tableObject.tableList"
+      :loading="tableObject.loading"
+      :pagination="{
+        total: tableObject.total
+      }"
+      v-model:pageSize="tableObject.pageSize"
+      v-model:currentPage="tableObject.currentPage"
+    >
+      <template #action="{ row }">
+        <el-button
+            link
+            type="primary"
+            @click="handlePreview(row.code)"
+            v-hasPermi="['system:coding-rules:update']"
+          >
+            预览
+          </el-button>
+          <el-button
+            link
+            type="primary"
+            @click="handleSetting(row.id, row.code)"
+            v-hasPermi="['system:coding-rules:update']"
+          >
+            规则设置
+          </el-button>
+        <el-button
+          link
+          type="primary"
+          @click="openForm('update', row.id)"
+          v-hasPermi="['system:coding-rules:update']"
+        >
+          编辑
+        </el-button>
+        <el-button
+          link
+          type="danger"
+          v-hasPermi="['system:coding-rules:delete']"
+          @click="handleDelete(row.id)"
+        >
+          删除
+        </el-button>
+      </template>
+    </Table>
+  </ContentWrap>
+
+  <!-- 表单弹窗：添加/修改 -->
+  <CodingRulesForm ref="formRef" @success="getList" />
+</template>
+<script setup lang="ts" name="CodingRules">
+import { allSchemas } from './codingRules.data'
+import * as CodingRulesApi from '@/api/system/codingrules'
+import CodingRulesForm from './CodingRulesForm.vue'
+import { ElMessage, ElMessageBox } from 'element-plus'
+import type { Action } from 'element-plus'
+const router = useRouter()
+
+
+// tableObject：表格的属性对象，可获得分页大小、条数等属性
+// tableMethods：表格的操作对象，可进行获得分页、删除记录等操作
+// 详细可见：https://doc.iocoder.cn/vue3/crud-schema/
+const { tableObject, tableMethods } = useTable({
+  getListApi: CodingRulesApi.getCodingRulesPage, // 分页接口
+  delListApi: CodingRulesApi.deleteCodingRules // 删除接口
+})
+// 获得表格的各种操作
+const { getList, setSearchParams } = tableMethods
+
+/** 添加/修改操作 */
+const formRef = ref()
+const openForm = (type: string, id?: number) => {
+  formRef.value.open(type, id)
+}
+
+/** 删除按钮操作 */
+const handleDelete = (id: number) => {
+  tableMethods.delList(id, false)
+}
+
+// 预览编码规则
+const handlePreview = async (code: string) => {
+  const params = {
+    code,
+    preview: true
+  }
+ const previewData = await CodingRulesApi.previewCodingRulesApi(params)
+ ElMessageBox.alert(
+    `<strong>${previewData}</strong>`,
+    '编码规则预览',
+    {
+      dangerouslyUseHTMLString: true,
+    }
+  )
+}
+
+// 设置编码规则
+const handleSetting = (id?: number, code?: string) => {
+  router.push({
+    name: 'CodingRulesDetails',
+    query: { id, code }
+  })
+}
+
+/** 初始化 **/
+onMounted(() => {
+  getList()
+})
+</script>