first commit

src/views/attendance/attendanceRecord/index.vue

@@ -0,0 +1,468 @@
+<template>
+  <div class="app-container">
+    <el-form :model="queryParams" ref="queryRef" :inline="true" v-show="showSearch" label-width="68px">
+      <el-form-item label="用户姓名" prop="userName">
+        <el-input
+          v-model="queryParams.userName"
+          placeholder="请输入用户姓名"
+          clearable
+          @keyup.enter="handleQuery"
+        />
+      </el-form-item>
+      <el-form-item label="班组名称" prop="teamName">
+        <el-input
+          v-model="queryParams.teamName"
+          placeholder="请输入班组名称"
+          clearable
+          @keyup.enter="handleQuery"
+        />
+      </el-form-item>
+      <el-form-item label="科室名称" prop="departmentName">
+        <el-input
+          v-model="queryParams.departmentName"
+          placeholder="请输入科室名称"
+          clearable
+          @keyup.enter="handleQuery"
+        />
+      </el-form-item>
+      <el-form-item label="考勤日期" prop="attendanceDate">
+        <el-date-picker clearable
+          v-model="queryParams.attendanceDateRange"
+          type="daterange"
+          value-format="YYYY-MM-DD"
+          start-placeholder="开始日期"
+          end-placeholder="结束日期">
+        </el-date-picker>
+      </el-form-item>
+      <el-form-item>
+        <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
+        <el-button icon="Refresh" @click="resetQuery">重置</el-button>
+      </el-form-item>
+    </el-form>
+
+    <el-row :gutter="10" class="mb8">
+      <el-col :span="1.5">
+        <el-button
+          type="primary"
+          plain
+          icon="Plus"
+          @click="handleAdd"
+          v-hasPermi="['attendance:attendanceRecord:add']"
+        >新增</el-button>
+      </el-col>
+      <!-- <el-col :span="1.5">
+        <el-button
+          type="success"
+          plain
+          icon="Edit"
+          :disabled="single"
+          @click="handleUpdate"
+          v-hasPermi="['attendance:attendanceRecord:edit']"
+        >修改</el-button>
+      </el-col> -->
+      <el-col :span="1.5">
+        <el-button
+          type="danger"
+          plain
+          icon="Delete"
+          :disabled="multiple"
+          @click="handleDelete"
+          v-hasPermi="['attendance:attendanceRecord:remove']"
+        >删除</el-button>
+      </el-col>
+      <el-col :span="1.5">
+        <el-button
+          type="warning"
+          plain
+          icon="Download"
+          @click="handleExport"
+          v-hasPermi="['attendance:attendanceRecord:export']"
+        >导出</el-button>
+      </el-col>
+      <el-col :span="1.5">
+        <el-button type="info" plain icon="Upload" @click="handleImport" v-hasPermi="['attendance:attendanceRecord:import']">导入</el-button>
+      </el-col>
+      <right-toolbar v-model:showSearch="showSearch" @queryTable="getList"></right-toolbar>
+    </el-row>
+
+    <el-table v-loading="loading" :data="attendanceRecordList" @selection-change="handleSelectionChange">
+      <el-table-column type="selection" width="55" align="center" />
+      <el-table-column label="用户名称" align="center" prop="userName" />
+      <el-table-column label="科室名称" align="center" prop="departmentName" />
+      <el-table-column label="班组名称" align="center" prop="teamName" />
+      <el-table-column label="考勤日期" align="center" prop="attendanceDate" width="180" />
+      <el-table-column label="签到时间" align="center" prop="checkInTime" width="180" />
+      <el-table-column label="签退时间" align="center" prop="checkOutTime" width="180" />
+      <el-table-column label="工作时长(分钟)" align="center" prop="workDuration" />
+      <el-table-column label="备注" align="center" prop="remark" />
+      <el-table-column label="操作" align="center" class-name="small-padding fixed-width" width="140">
+        <template #default="scope">
+          <el-button link type="primary" icon="Edit" @click="handleUpdate(scope.row)" v-hasPermi="['attendance:attendanceRecord:edit']">修改</el-button>
+          <el-button link type="primary" icon="Delete" @click="handleDelete(scope.row)" v-hasPermi="['attendance:attendanceRecord:remove']">删除</el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+    
+    <pagination
+      v-show="total>0"
+      :total="total"
+      v-model:page="queryParams.pageNum"
+      v-model:limit="queryParams.pageSize"
+      @pagination="getList"
+    />
+
+    <!-- 添加或修改考勤记录对话框 -->
+    <el-dialog :title="title" v-model="open" width="400px" append-to-body>
+      <el-form ref="attendanceRecordRef" :model="form" :rules="rules" label-width="80px">
+        <el-form-item label="用户" prop="userId">
+          <template v-if="disabledUserSelect">
+            <el-input v-model="form.userName" :disabled="disabledUserSelect" />
+          </template>
+          <template v-else>
+            <UserSelect ref="userSelect" v-model="form.userId" :disabled="disabledUserSelect"  width="288px" />
+          </template>
+        </el-form-item>
+        <el-form-item label="签到时间" prop="checkInTime">
+          <el-date-picker clearable
+            style="width:288px"
+            v-model="form.checkInTime"
+            type="datetime"
+            format="YYYY-MM-DD HH:mm:ss"
+            value-format="YYYY-MM-DD HH:mm:ss"
+            placeholder="请选择签到时间">
+          </el-date-picker>
+        </el-form-item>
+        <el-form-item label="签退时间" prop="checkOutTime">
+          <el-date-picker clearable
+            style="width:288px"
+            v-model="form.checkOutTime"
+            type="datetime"
+            format="YYYY-MM-DD HH:mm:ss"
+            value-format="YYYY-MM-DD HH:mm:ss"
+            placeholder="请选择签退时间">
+          </el-date-picker>
+        </el-form-item>
+        <el-form-item label="备注" prop="remark">
+          <el-input v-model="form.remark" type="textarea" placeholder="请输入内容" />
+        </el-form-item>
+      </el-form>
+      <template #footer>
+        <div class="dialog-footer">
+          <el-button type="primary" @click="submitForm">确 定</el-button>
+          <el-button @click="cancel">取 消</el-button>
+        </div>
+      </template>
+    </el-dialog>
+
+    <!-- 考勤记录导入对话框 -->
+    <el-dialog :title="upload.title" v-model="upload.open" width="400px" append-to-body>
+      <el-upload ref="uploadRef" 
+      :limit="1" accept=".xlsx, .xls" 
+      :headers="upload.headers" 
+      :action="upload.url + '?updateSupport=' + upload.updateSupport" 
+      :disabled="upload.isUploading" 
+      :on-progress="handleFileUploadProgress" 
+      :on-success="handleFileSuccess" 
+      :auto-upload="false" drag>
+        <el-icon class="el-icon--upload"><upload-filled /></el-icon>
+        <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
+        <template #tip>
+          <div class="el-upload__tip text-center">
+            <!-- <div class="el-upload__tip">
+              <el-checkbox v-model="upload.updateSupport" />是否更新已经存在的用户数据
+            </div> -->
+            <span>仅允许导入xls、xlsx格式文件。</span>
+            <el-link type="primary" :underline="false" style="font-size: 12px; vertical-align: baseline" @click="importTemplate">下载模板</el-link>
+          </div>
+        </template>
+      </el-upload>
+      <template #footer>
+        <div class="dialog-footer">
+          <el-button type="primary" @click="submitFileForm">确 定</el-button>
+          <el-button @click="upload.open = false">取 消</el-button>
+        </div>
+      </template>
+    </el-dialog>
+  </div>
+</template>
+
+<script setup name="AttendanceRecord">
+import { listAttendanceRecord, getAttendanceRecord, delAttendanceRecord, addAttendanceRecord, updateAttendanceRecord } from "@/api/attendance/attendanceRecord"
+import UserSelect from "@/components/UserSelect"
+
+const { proxy } = getCurrentInstance()
+
+const attendanceRecordList = ref([])
+const open = ref(false)
+const loading = ref(true)
+const showSearch = ref(true)
+const ids = ref([])
+const single = ref(true)
+const multiple = ref(true)
+const total = ref(0)
+const title = ref("")
+// 控制 UserSelect 组件是否可编辑
+const disabledUserSelect = ref(false)
+
+import { getToken } from "@/utils/auth"
+
+const data = reactive({
+  form: {},
+  queryParams: {
+    pageNum: 1,
+    pageSize: 10,
+    tenantId: null,
+    revision: null,
+    userId: null,
+    checkInTime: null,
+    checkOutTime: null,
+    workDuration: null,
+    status: null,
+    teamCode: null,
+    teamName: null,
+    departmentCode: null,
+    departmentName: null,
+    stationCode: null,
+    stationName: null,
+    userName: null,
+    remark: null,
+    attendanceDate: null,
+    overDuration: null,
+    statusDesc: null,
+    attendanceDateRange: [],
+    attendanceDateStart: null,
+    attendanceDateEnd: null,
+  },
+  rules: {
+    userId: [
+      { required: !disabledUserSelect, message: "用户不能为空", trigger: "blur" }
+    ],
+    checkInTime: [
+      { required: true, message: "签到时间不能为空", trigger: "blur" }
+    ],
+    checkOutTime: [
+      { required: true, message: "签退时间不能为空", trigger: "blur" }
+    ],
+    workDuration: [
+      { required: true, message: "工作时长(分钟)不能为空", trigger: "blur" }
+    ],
+    status: [
+      { required: true, message: "考勤状态不能为空", trigger: "change" }
+    ],
+    teamCode: [
+      { required: true, message: "班组编码不能为空", trigger: "blur" }
+    ],
+    teamName: [
+      { required: true, message: "班组名称不能为空", trigger: "blur" }
+    ],
+    departmentCode: [
+      { required: true, message: "科室编码不能为空", trigger: "blur" }
+    ],
+    departmentName: [
+      { required: true, message: "科室名称不能为空", trigger: "blur" }
+    ],
+    stationCode: [
+      { required: true, message: "机构站编码不能为空", trigger: "blur" }
+    ],
+    stationName: [
+      { required: true, message: "机构站名称不能为空", trigger: "blur" }
+    ],
+    userName: [
+      { required: true, message: "用户名称不能为空", trigger: "blur" }
+    ],
+    attendanceDate: [
+      { required: true, message: "考勤日期不能为空", trigger: "blur" }
+    ],
+    overDuration: [
+      { required: true, message: "加班时长(分钟)不能为空", trigger: "blur" }
+    ],
+    statusDesc: [
+      { required: true, message: "考勤状态名称不能为空", trigger: "blur" }
+    ]
+  }
+})
+
+const upload = reactive({
+  // 是否显示弹出层
+  open: false,
+  // 弹出层标题
+  title: "",
+  // 是否禁用上传
+  isUploading: false,
+  // 是否更新已经存在的用户数据
+  updateSupport: 0,
+  // 设置上传的请求头部
+  headers: { Authorization: "Bearer " + getToken() },
+  // 上传的地址
+  url: import.meta.env.VITE_APP_BASE_API + "/attendance/attendanceRecord/importData"
+})
+
+const { queryParams, form, rules } = toRefs(data)
+
+/** 查询考勤记录列表 */
+function getList() {
+  loading.value = true
+  const searchValue = queryParams.value
+  queryParams.value.attendanceDateStart = searchValue.attendanceDateRange[0];
+  queryParams.value.attendanceDateEnd = searchValue.attendanceDateRange[1];
+  console.log('attendanceDateRange', queryParams.value)
+  listAttendanceRecord(queryParams.value).then(response => {
+    attendanceRecordList.value = response.rows
+    total.value = response.total
+    loading.value = false
+  })
+}
+
+// 取消按钮
+function cancel() {
+  open.value = false
+  reset()
+}
+
+// 表单重置
+function reset() {
+  form.value = {
+    tenantId: null,
+    revision: null,
+    createBy: null,
+    createTime: null,
+    updateBy: null,
+    updateTime: null,
+    id: null,
+    userId: null,
+    checkInTime: null,
+    checkOutTime: null,
+    workDuration: null,
+    status: null,
+    teamCode: null,
+    teamName: null,
+    departmentCode: null,
+    departmentName: null,
+    stationCode: null,
+    stationName: null,
+    userName: null,
+    remark: null,
+    attendanceDate: null,
+    overDuration: null,
+    statusDesc: null,
+    attendanceDateRange: [],
+    attendanceDateStart: null,
+    attendanceDateEnd: null,
+  }
+  proxy.resetForm("attendanceRecordRef")
+}
+
+/** 搜索按钮操作 */
+function handleQuery() {
+  queryParams.value.pageNum = 1
+  getList()
+}
+
+/** 重置按钮操作 */
+function resetQuery() {
+  queryParams.value.attendanceDateRange = [] 
+  proxy.resetForm("queryRef")
+  handleQuery()
+}
+
+// 多选框选中数据
+function handleSelectionChange(selection) {
+  ids.value = selection.map(item => item.id)
+  single.value = selection.length != 1
+  multiple.value = !selection.length
+}
+
+/** 新增按钮操作 */
+function handleAdd() {
+  reset()
+  open.value = true
+  title.value = "添加考勤记录"
+  // 新增时允许编辑
+  disabledUserSelect.value = false
+}
+
+/** 修改按钮操作 */
+function handleUpdate(row) {
+  reset()
+  const _id = row.id || ids.value
+  getAttendanceRecord(_id).then(response => {
+    form.value = response.data
+    open.value = true
+    title.value = "修改考勤记录"
+    // 修改时禁止编辑
+    disabledUserSelect.value = true
+  })
+}
+
+/** 提交按钮 */
+function submitForm() {
+  proxy.$refs["attendanceRecordRef"].validate(valid => {
+    if (valid) {
+      if (form.value.id != null) {
+        updateAttendanceRecord(form.value).then(response => {
+          proxy.$modal.msgSuccess("修改成功")
+          open.value = false
+          getList()
+        })
+      } else {
+        addAttendanceRecord(form.value).then(response => {
+          proxy.$modal.msgSuccess("新增成功")
+          open.value = false
+          getList()
+        })
+      }
+    }
+  })
+}
+
+/** 删除按钮操作 */
+function handleDelete(row) {
+  const _ids = row.id || ids.value
+  proxy.$modal.confirm('是否确认删除数据项？').then(function() {
+    return delAttendanceRecord(_ids)
+  }).then(() => {
+    getList()
+    proxy.$modal.msgSuccess("删除成功")
+  }).catch(() => {})
+}
+
+/** 导出按钮操作 */
+function handleExport() {
+  proxy.download('attendance/attendanceRecord/export', {
+    ...queryParams.value
+  }, `attendanceRecord_${new Date().getTime()}.xlsx`)
+}
+
+getList()
+
+/** 导入按钮操作 */
+function handleImport() {
+  upload.title = "考勤记录导入"
+  upload.open = true
+}
+
+/** 下载模板操作 */
+function importTemplate() {
+  proxy.download("attendance/attendanceRecord/importTemplate", {
+  }, `attendance_template_${new Date().getTime()}.xlsx`)
+}
+
+/**文件上传中处理 */
+const handleFileUploadProgress = (event, file, fileList) => {
+  upload.isUploading = true
+}
+
+/** 文件上传成功处理 */
+const handleFileSuccess = (response, file, fileList) => {
+  upload.open = false
+  upload.isUploading = false
+  proxy.$refs["uploadRef"].handleRemove(file)
+  proxy.$alert("<div style='overflow: auto;overflow-x: hidden;max-height: 70vh;padding: 10px 20px 0;'>" + response.msg + "</div>", "导入结果", { dangerouslyUseHTMLString: true })
+  getList()
+}
+
+/** 提交上传文件 */
+function submitFileForm() {
+  proxy.$refs["uploadRef"].submit()
+}
+</script>

src/views/attendance/checkRecord/index.vue

@@ -0,0 +1,278 @@
+<template>
+  <div class="app-container">
+    <el-form :model="queryParams" ref="queryRef" :inline="true" v-show="showSearch" label-width="100px">
+      <el-form-item label="打卡人姓名" prop="userName">
+        <el-input
+          v-model="queryParams.userName"
+          placeholder="请输入打卡人姓名"
+          clearable
+          @keyup.enter="handleQuery"
+        />
+      </el-form-item>
+      <el-form-item label="打卡日期">
+        <el-date-picker
+          clearable
+          v-model="dateRange"
+          value-format="YYYY-MM-DD"
+          type="daterange"
+          range-separator="-"
+          start-placeholder="开始日期"
+          end-placeholder="结束日期">
+        </el-date-picker>
+      </el-form-item>
+      <el-form-item label="打卡类型" prop="checkInType">
+        <el-select
+               v-model="queryParams.checkInType"
+               placeholder="打卡类型"
+               clearable
+               style="width: 240px"
+            >
+               <el-option
+                  v-for="dict in attendance_check_in_type"
+                  :key="dict.value"
+                  :label="dict.label"
+                  :value="dict.value"
+               />
+            </el-select>
+      </el-form-item>
+      <el-form-item>
+        <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
+        <el-button icon="Refresh" @click="resetQuery">重置</el-button>
+      </el-form-item>
+    </el-form>
+
+    <el-row :gutter="10" class="mb8">
+      <el-col :span="1.5">
+        <el-button
+          type="warning"
+          plain
+          icon="Download"
+          @click="handleExport"
+          v-hasPermi="['attendance:checkRecord:export']"
+        >导出</el-button>
+      </el-col>
+      <right-toolbar v-model:showSearch="showSearch" @queryTable="getList"></right-toolbar>
+    </el-row>
+
+    <el-table v-loading="loading" :data="checkRecordList" @selection-change="handleSelectionChange">
+      <el-table-column label="打卡人姓名" align="center" prop="userName" />
+      <el-table-column label="打卡类型" align="center" prop="checkInTypeDesc" />
+      <el-table-column label="打卡时间" align="center" prop="checkInTime" />
+      <el-table-column label="备注" align="center" prop="remark" />
+    </el-table>
+    
+    <pagination
+      v-show="total>0"
+      :total="total"
+      v-model:page="queryParams.pageNum"
+      v-model:limit="queryParams.pageSize"
+      @pagination="getList"
+    />
+
+    <!-- 添加或修改打卡记录对话框 -->
+    <el-dialog :title="title" v-model="open" width="500px" append-to-body>
+      <el-form ref="checkRecordRef" :model="form" :rules="rules" label-width="80px">
+        <el-form-item label="租户号" prop="tenantId">
+          <el-input v-model="form.tenantId" placeholder="请输入租户号" />
+        </el-form-item>
+        <el-form-item label="乐观锁" prop="revision">
+          <el-input v-model="form.revision" placeholder="请输入乐观锁" />
+        </el-form-item>
+        <el-form-item label="打卡人ID" prop="userId">
+          <el-input v-model="form.userId" placeholder="请输入打卡人ID" />
+        </el-form-item>
+        <el-form-item label="打卡时间" prop="checkInTime">
+          <el-date-picker clearable
+            v-model="form.checkInTime"
+            type="date"
+            value-format="YYYY-MM-DD"
+            placeholder="请选择打卡时间">
+          </el-date-picker>
+        </el-form-item>
+        <el-form-item label="打卡人名称" prop="userName">
+          <el-input v-model="form.userName" placeholder="请输入打卡人名称" />
+        </el-form-item>
+        <el-form-item label="备注" prop="remark">
+          <el-input v-model="form.remark" type="textarea" placeholder="请输入内容" />
+        </el-form-item>
+        <el-form-item label="打卡类型名称" prop="checkInTypeDesc">
+          <el-input v-model="form.checkInTypeDesc" placeholder="请输入打卡类型名称" />
+        </el-form-item>
+      </el-form>
+      <template #footer>
+        <div class="dialog-footer">
+          <el-button type="primary" @click="submitForm">确 定</el-button>
+          <el-button @click="cancel">取 消</el-button>
+        </div>
+      </template>
+    </el-dialog>
+  </div>
+</template>
+
+<script setup name="CheckRecord">
+import { listCheckRecord, getCheckRecord, delCheckRecord, addCheckRecord, updateCheckRecord } from "@/api/attendance/checkRecord"
+
+const { proxy } = getCurrentInstance()
+
+const checkRecordList = ref([])
+const open = ref(false)
+const loading = ref(true)
+const showSearch = ref(true)
+const ids = ref([])
+const single = ref(true)
+const multiple = ref(true)
+const total = ref(0)
+const title = ref("")
+const dateRange = ref([])
+const { attendance_check_in_type } = proxy.useDict("attendance_check_in_type")
+
+const data = reactive({
+  form: {},
+  queryParams: {
+    pageNum: 1,
+    pageSize: 10,
+    tenantId: null,
+    revision: null,
+    userId: null,
+    checkInType: null,
+    checkInTime: null,
+    userName: null,
+    remark: null,
+    checkInTypeDesc: null
+  },
+  rules: {
+    userId: [
+      { required: true, message: "打卡人ID不能为空", trigger: "blur" }
+    ],
+    checkInType: [
+      { required: true, message: "打卡类型不能为空", trigger: "change" }
+    ],
+    checkInTime: [
+      { required: true, message: "打卡时间不能为空", trigger: "blur" }
+    ],
+    userName: [
+      { required: true, message: "打卡人名称不能为空", trigger: "blur" }
+    ],
+    checkInTypeDesc: [
+      { required: true, message: "打卡类型名称不能为空", trigger: "blur" }
+    ]
+  }
+})
+
+const { queryParams, form, rules } = toRefs(data)
+
+/** 查询打卡记录列表 */
+function getList() {
+  loading.value = true
+  listCheckRecord(proxy.addDateRange(queryParams.value, dateRange.value)).then(response => {
+    checkRecordList.value = response.rows
+    total.value = response.total
+    loading.value = false
+  })
+}
+
+// 取消按钮
+function cancel() {
+  open.value = false
+  reset()
+}
+
+// 表单重置
+function reset() {
+  form.value = {
+    tenantId: null,
+    revision: null,
+    createBy: null,
+    createTime: null,
+    updateBy: null,
+    updateTime: null,
+    id: null,
+    userId: null,
+    checkInType: null,
+    checkInTime: null,
+    userName: null,
+    remark: null,
+    checkInTypeDesc: null
+  }
+  proxy.resetForm("checkRecordRef")
+}
+
+/** 搜索按钮操作 */
+function handleQuery() {
+  queryParams.value.pageNum = 1
+  getList()
+}
+
+/** 重置按钮操作 */
+function resetQuery() {
+  dateRange.value = []
+  proxy.resetForm("queryRef")
+  handleQuery()
+}
+
+// 多选框选中数据
+function handleSelectionChange(selection) {
+  ids.value = selection.map(item => item.id)
+  single.value = selection.length != 1
+  multiple.value = !selection.length
+}
+
+/** 新增按钮操作 */
+function handleAdd() {
+  reset()
+  open.value = true
+  title.value = "添加打卡记录"
+}
+
+/** 修改按钮操作 */
+function handleUpdate(row) {
+  reset()
+  const _id = row.id || ids.value
+  getCheckRecord(_id).then(response => {
+    form.value = response.data
+    open.value = true
+    title.value = "修改打卡记录"
+  })
+}
+
+/** 提交按钮 */
+function submitForm() {
+  proxy.$refs["checkRecordRef"].validate(valid => {
+    if (valid) {
+      if (form.value.id != null) {
+        updateCheckRecord(form.value).then(response => {
+          proxy.$modal.msgSuccess("修改成功")
+          open.value = false
+          getList()
+        })
+      } else {
+        addCheckRecord(form.value).then(response => {
+          proxy.$modal.msgSuccess("新增成功")
+          open.value = false
+          getList()
+        })
+      }
+    }
+  })
+}
+
+/** 删除按钮操作 */
+function handleDelete(row) {
+  const _ids = row.id || ids.value
+  proxy.$modal.confirm('是否确认删除数据项？').then(function() {
+    return delCheckRecord(_ids)
+  }).then(() => {
+    getList()
+    proxy.$modal.msgSuccess("删除成功")
+  }).catch(() => {})
+}
+
+/** 导出按钮操作 */
+function handleExport() {
+  proxy.download('attendance/checkRecord/export', {
+    ...queryParams.value
+  }, `checkRecord_${new Date().getTime()}.xlsx`)
+}
+
+getList()
+</script>

src/views/attendance/postRecord/index.vue

@@ -0,0 +1,603 @@
+<template>
+  <div class="app-container">
+    <el-form :model="queryParams" ref="queryRef" :inline="true" v-show="showSearch">
+      <el-form-item label="用户名称" prop="userName">
+        <el-input
+          v-model="queryParams.userName"
+          placeholder="请输入用户名称"
+          clearable
+          @keyup.enter="handleQuery"
+        />
+      </el-form-item>
+      <el-form-item label="班组名称" prop="attendanceTeamName">
+        <el-input
+          v-model="queryParams.attendanceTeamName"
+          placeholder="请输入班组名称"
+          clearable
+          @keyup.enter="handleQuery"
+        />
+      </el-form-item>
+      <el-form-item label="科室名称" prop="attendanceDepartmentName">
+        <el-input
+          v-model="queryParams.attendanceDepartmentName"
+          placeholder="请输入科室名称"
+          clearable
+          @keyup.enter="handleQuery"
+        />
+      </el-form-item>
+      <el-form-item label="考勤日期" prop="attendanceDate">
+        <el-date-picker
+          clearable
+          v-model="dateRange"
+          value-format="YYYY-MM-DD"
+          type="daterange"
+          range-separator="-"
+          start-placeholder="开始日期"
+          end-placeholder="结束日期">
+        </el-date-picker>
+      </el-form-item>
+      <el-form-item label="航站楼名称" prop="terminlName">
+        <el-input
+          v-model="queryParams.terminlName"
+          placeholder="请输入航站楼名称"
+          clearable
+          @keyup.enter="handleQuery"
+        />
+      </el-form-item>
+      <el-form-item label="区域名称" prop="regionalName">
+        <el-input
+          v-model="queryParams.regionalName"
+          placeholder="请输入区域名称"
+          clearable
+          @keyup.enter="handleQuery"
+        />
+      </el-form-item>
+      <el-form-item label="通道名称" prop="channelName">
+        <el-input
+          v-model="queryParams.channelName"
+          placeholder="请输入通道名称"
+          clearable
+          @keyup.enter="handleQuery"
+        />
+      </el-form-item>
+      <el-form-item label="岗位名称" prop="positionName">
+        <el-input
+          v-model="queryParams.positionName"
+          placeholder="请输入岗位名称"
+          clearable
+          @keyup.enter="handleQuery"
+        />
+      </el-form-item>
+      <el-form-item>
+        <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
+        <el-button icon="Refresh" @click="resetQuery">重置</el-button>
+      </el-form-item>
+    </el-form>
+
+    <el-row :gutter="10" class="mb8">
+      <el-col :span="1.5">
+        <el-button
+          type="primary"
+          plain
+          icon="Plus"
+          @click="handleAdd"
+          v-hasPermi="['attendance:postRecord:add']"
+        >新增</el-button>
+      </el-col>
+      <el-col :span="1.5">
+        <el-button
+          type="danger"
+          plain
+          icon="Delete"
+          :disabled="multiple"
+          @click="handleDelete"
+          v-hasPermi="['attendance:postRecord:remove']"
+        >删除</el-button>
+      </el-col>
+      <el-col :span="1.5">
+        <el-button
+          type="warning"
+          plain
+          icon="Download"
+          @click="handleExport"
+          v-hasPermi="['attendance:postRecord:export']"
+        >导出</el-button>
+      </el-col>
+      <el-col :span="1.5">
+        <el-button type="info" plain icon="Upload" @click="handleImport" v-hasPermi="['attendance:postRecord:import']">导入</el-button>
+      </el-col>
+      <right-toolbar v-model:showSearch="showSearch" @queryTable="getList"></right-toolbar>
+    </el-row>
+
+    <el-table v-loading="loading" :data="postRecordList" @selection-change="handleSelectionChange">
+      <el-table-column type="selection" width="55" align="center" />
+      <el-table-column label="用户姓名" align="center" prop="userName" width="80" />
+      <el-table-column label="班组名称" align="center" prop="attendanceTeamName" width="80" />
+      <el-table-column label="科室名称" align="center" prop="attendanceDepartmentName" width="80" />
+      <el-table-column label="考勤日期" align="center" prop="attendanceDate" width="100" />
+      <el-table-column label="上岗时间" align="center" prop="checkInTime" width="155" />
+      <el-table-column label="离岗时间" align="center" prop="checkOutTime" width="155" />
+      <el-table-column label="工作时长(分钟)" align="center" prop="workDuration" width="115" />
+      <el-table-column label="航站楼名称" align="center" prop="terminlName" width="110" />
+      <el-table-column label="区域名称" align="center" prop="regionalName" width="110" />
+      <el-table-column label="通道名称" align="center" prop="channelName" width="110" />
+      <el-table-column label="岗位名称" align="center" prop="positionName" width="110" />
+      <el-table-column label="备注" align="center" prop="remark" />
+      <el-table-column label="操作" align="center" class-name="small-padding fixed-width" width="140">
+        <template #default="scope">
+          <el-button link type="primary" icon="Edit" @click="handleUpdate(scope.row)" v-hasPermi="['attendance:postRecord:edit']">修改</el-button>
+          <el-button link type="primary" icon="Delete" @click="handleDelete(scope.row)" v-hasPermi="['attendance:postRecord:remove']">删除</el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+    
+    <pagination
+      v-show="total>0"
+      :total="total"
+      v-model:page="queryParams.pageNum"
+      v-model:limit="queryParams.pageSize"
+      @pagination="getList"
+    />
+
+    <!-- 添加或修改上岗记录对话框 -->
+    <el-dialog :title="title" v-model="open" width="400px" append-to-body>
+      <el-form ref="postRecordRef" :model="form" :rules="rules" label-width="80px">
+        <el-form-item label="用户" prop="userId">
+          <template v-if="disabledUserSelect">
+            <el-input v-model="form.userName" :disabled="disabledUserSelect" />
+          </template>
+          <template v-else>
+            <UserSelect ref="userSelect" v-model="form.userId" :disabled="disabledUserSelect" width="288px" />
+          </template>
+        </el-form-item>
+        <el-form-item label="上岗时间" prop="checkInTime">
+          <el-date-picker clearable
+            style="width:288px"
+            v-model="form.checkInTime"
+            type="datetime"
+            format="YYYY-MM-DD HH:mm:ss"
+            value-format="YYYY-MM-DD HH:mm:ss"
+            placeholder="请选择上岗时间">
+          </el-date-picker>
+        </el-form-item>
+        <el-form-item label="离岗时间" prop="checkOutTime">
+          <el-date-picker clearable
+            style="width:288px"
+            v-model="form.checkOutTime"
+            type="datetime"
+            format="YYYY-MM-DD HH:mm:ss"
+            value-format="YYYY-MM-DD HH:mm:ss"
+            placeholder="请选择离岗时间">
+          </el-date-picker>
+        </el-form-item>
+        <el-form-item label="班组" prop="attendanceTeamId" clearable>
+          <el-select v-model="form.attendanceTeamId" filterable placeholder="请选择班组" style="width: 288px">
+            <el-option
+              v-for="item in teamOptions"
+              :key="item.value"
+              :label="item.label"
+              :value="item.value"
+            />
+          </el-select>
+        </el-form-item>
+        <el-form-item label="通道" prop="terminlCode" clearable>
+          <el-cascader
+            v-model="form.positionValue"
+            :options="positonOptions"
+            @change="handlePositionChange"
+            placeholder="请选择航站楼、区域、通道"
+            style="width: 288px"
+          />
+        </el-form-item>
+        <el-form-item label="岗位" prop="positionCode">
+          <el-select v-model="form.positionCode" placeholder="请选择岗位" clearable style="width: 288px">
+            <el-option
+              v-for="dict in item_check_method"
+              :key="dict.value"
+              :label="dict.label"
+              :value="dict.value"
+            />
+          </el-select>
+        </el-form-item>
+        <el-form-item label="备注" prop="remark">
+          <el-input v-model="form.remark" type="textarea" placeholder="请输入内容" />
+        </el-form-item>
+      </el-form>
+      <template #footer>
+        <div class="dialog-footer">
+          <el-button type="primary" @click="submitForm">确 定</el-button>
+          <el-button @click="cancel">取 消</el-button>
+        </div>
+      </template>
+    </el-dialog>
+
+    
+    <!-- 上岗记录导入对话框 -->
+    <el-dialog :title="upload.title" v-model="upload.open" width="400px" append-to-body>
+      <el-upload ref="uploadRef" 
+      :limit="1" accept=".xlsx, .xls" 
+      :headers="upload.headers" 
+      :action="upload.url + '?updateSupport=' + upload.updateSupport" 
+      :disabled="upload.isUploading" 
+      :on-progress="handleFileUploadProgress" 
+      :on-success="handleFileSuccess" 
+      :auto-upload="false" drag>
+        <el-icon class="el-icon--upload"><upload-filled /></el-icon>
+        <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
+        <template #tip>
+          <div class="el-upload__tip text-center">
+            <!-- <div class="el-upload__tip">
+              <el-checkbox v-model="upload.updateSupport" />是否更新已经存在的用户数据
+            </div> -->
+            <span>仅允许导入xls、xlsx格式文件。</span>
+            <el-link type="primary" :underline="false" style="font-size: 12px; vertical-align: baseline" @click="importTemplate">下载模板</el-link>
+          </div>
+        </template>
+      </el-upload>
+      <template #footer>
+        <div class="dialog-footer">
+          <el-button type="primary" @click="submitFileForm">确 定</el-button>
+          <el-button @click="upload.open = false">取 消</el-button>
+        </div>
+      </template>
+    </el-dialog>
+  </div>
+</template>
+
+<script setup name="PostRecord">
+import { listPostRecord, getPostRecord, delPostRecord, addPostRecord, updatePostRecord, positionList, teamList } from "@/api/attendance/postRecord"
+import UserSelect from "@/components/UserSelect"
+
+const { proxy } = getCurrentInstance()
+
+const { item_check_method } = proxy.useDict('item_check_method')
+
+const postRecordList = ref([])
+const open = ref(false)
+const loading = ref(true)
+const showSearch = ref(true)
+const ids = ref([])
+const single = ref(true)
+const multiple = ref(true)
+const total = ref(0)
+const title = ref("")
+const dateRange = ref([])
+// 控制 UserSelect 组件是否可编辑
+const disabledUserSelect = ref(false)
+const positonOptions = ref([])
+
+const teamOptions = ref([])
+
+import { getToken } from "@/utils/auth"
+
+const data = reactive({
+  form: {},
+  queryParams: {
+    pageNum: 1,
+    pageSize: 10,
+    tenantId: null,
+    revision: null,
+    userId: null,
+    channelCode: null,
+    shiftCode: null,
+    checkInTime: null,
+    checkOutTime: null,
+    workDuration: null,
+    status: null,
+    attendanceDate: null,
+    attendanceTeamId: null,
+    overDuration: null,
+    attendanceTeamName: null,
+    attendanceDepartmentId: null,
+    attendanceDepartmentName: null,
+    attendanceStationId: null,
+    attendanceStationName: null,
+    channelName: null,
+    regionalCode: null,
+    regionalName: null,
+    terminlCode: null,
+    terminlName: null,
+    userName: null,
+    shiftName: null,
+    remark: null,
+    statusDesc: null
+  },
+  rules: {
+    userId: [
+      { required: !disabledUserSelect, message: "用户ID不能为空", trigger: "blur" }
+    ],
+    channelCode: [
+      { required: true, message: "通道编码不能为空", trigger: "blur" }
+    ],
+    positionCode: [
+      { required: true, message: "岗位编码不能为空", trigger: "blur" }
+    ],
+    checkInTime: [
+      { required: true, message: "上岗时间不能为空", trigger: "blur" }
+    ],
+    checkOutTime: [
+      { required: true, message: "离岗时间不能为空", trigger: "blur" }
+    ],
+    workDuration: [
+      { required: true, message: "工作时长(分钟)不能为空", trigger: "blur" }
+    ],
+    status: [
+      { required: true, message: "考勤状态不能为空", trigger: "change" }
+    ],
+    attendanceDate: [
+      { required: true, message: "考勤日期不能为空", trigger: "blur" }
+    ],
+    overDuration: [
+      { required: true, message: "加班时长(分钟)不能为空", trigger: "blur" }
+    ],
+    attendanceTeamName: [
+      { required: true, message: "考勤班组名称不能为空", trigger: "blur" }
+    ],
+    attendanceDepartmentId: [
+      { required: true, message: "考勤科室ID不能为空", trigger: "blur" }
+    ],
+    attendanceDepartmentName: [
+      { required: true, message: "考勤科室名称不能为空", trigger: "blur" }
+    ],
+    attendanceStationId: [
+      { required: true, message: "考勤机构站ID不能为空", trigger: "blur" }
+    ],
+    attendanceStationName: [
+      { required: true, message: "考勤机构站名称不能为空", trigger: "blur" }
+    ],
+    channelName: [
+      { required: true, message: "通道名称不能为空", trigger: "blur" }
+    ],
+    regionalCode: [
+      { required: true, message: "区域编码不能为空", trigger: "blur" }
+    ],
+    regionalName: [
+      { required: true, message: "区域名称不能为空", trigger: "blur" }
+    ],
+    terminlCode: [
+      { required: true, message: "航站楼编码不能为空", trigger: "blur" }
+    ],
+    terminlName: [
+      { required: true, message: "航站楼名称不能为空", trigger: "blur" }
+    ],
+    userName: [
+      { required: true, message: "用户名称不能为空", trigger: "blur" }
+    ],
+    shiftName: [
+      { required: true, message: "班次名称不能为空", trigger: "blur" }
+    ],
+    statusDesc: [
+      { required: true, message: "考勤状态名称不能为空", trigger: "blur" }
+    ]
+  }
+})
+
+const upload = reactive({
+  // 是否显示弹出层
+  open: false,
+  // 弹出层标题
+  title: "",
+  // 是否禁用上传
+  isUploading: false,
+  // 是否更新已经存在的用户数据
+  updateSupport: 0,
+  // 设置上传的请求头部
+  headers: { Authorization: "Bearer " + getToken() },
+  // 上传的地址
+  url: import.meta.env.VITE_APP_BASE_API + "/attendance/postRecord/importData"
+})
+
+const { queryParams, form, rules } = toRefs(data)
+
+/** 查询上岗记录列表 */
+function getList() {
+  loading.value = true
+  listPostRecord(proxy.addDateRange(queryParams.value, dateRange.value)).then(response => {
+    postRecordList.value = response.rows
+    total.value = response.total
+    loading.value = false
+  })
+}
+
+// 获取级联数据
+const fetchPositionData = async () => {
+  try {
+    const response = await positionList({})
+    positonOptions.value = response.data
+  } catch (error) {
+    console.error('获取通道级联数据失败:', error)
+  }
+}
+const fetchTeamData = async () => {
+  try {
+    const response = await teamList({})
+    const d = response.data
+    for (const key in d) {
+      if (d.hasOwnProperty(key)) {
+        const option = { "value": Number(key), "label": d[key] }
+        teamOptions.value.push(option)
+      }
+    }
+  } catch (error) {
+    console.error('获取班组数据失败:', error)
+  }
+}
+
+// 级联选择变化时的处理函数
+const handlePositionChange = (value) => {
+  if (value.length === 3) {
+    form.value.terminlCode = value[0]
+    form.value.regionalCode = value[1]
+    form.value.channelCode = value[2]
+  }
+}
+
+// 取消按钮
+function cancel() {
+  open.value = false
+  reset()
+}
+
+// 表单重置
+function reset() {
+  form.value = {
+    tenantId: null,
+    revision: null,
+    createBy: null,
+    createTime: null,
+    updateBy: null,
+    updateTime: null,
+    userId: null,
+    channelCode: null,
+    shiftCode: null,
+    checkInTime: null,
+    checkOutTime: null,
+    workDuration: null,
+    status: null,
+    attendanceDate: null,
+    attendanceTeamId: null,
+    overDuration: null,
+    id: null,
+    attendanceTeamName: null,
+    attendanceDepartmentId: null,
+    attendanceDepartmentName: null,
+    attendanceStationId: null,
+    attendanceStationName: null,
+    channelName: null,
+    regionalCode: null,
+    regionalName: null,
+    terminlCode: null,
+    terminlName: null,
+    userName: null,
+    shiftName: null,
+    remark: null,
+    statusDesc: null
+  }
+  proxy.resetForm("postRecordRef")
+}
+
+/** 搜索按钮操作 */
+function handleQuery() {
+  queryParams.value.pageNum = 1
+  getList()
+}
+
+/** 重置按钮操作 */
+function resetQuery() {
+  dateRange.value = []
+  proxy.resetForm("queryRef")
+  handleQuery()
+}
+
+// 多选框选中数据
+function handleSelectionChange(selection) {
+  ids.value = selection.map(item => item.id)
+  single.value = selection.length != 1
+  multiple.value = !selection.length
+}
+
+/** 新增按钮操作 */
+function handleAdd() {
+  reset()
+  open.value = true
+  title.value = "添加上岗记录"
+  // 新增时允许编辑
+  disabledUserSelect.value = false
+}
+
+/** 修改按钮操作 */
+function handleUpdate(row) {
+  reset()
+  const _id = row.id || ids.value
+  getPostRecord(_id).then(response => {
+    form.value = response.data
+    // 根据实际数据结构设置默认值
+    form.value.positionValue = [
+      form.value.terminlCode,
+      form.value.regionalCode,
+      form.value.channelCode
+    ]
+    open.value = true
+    title.value = "修改上岗记录"
+    // 修改时禁止编辑
+    disabledUserSelect.value = true
+  })
+}
+
+/** 提交按钮 */
+function submitForm() {
+  proxy.$refs["postRecordRef"].validate(valid => {
+    if (valid) {
+      if (form.value.id != null) {
+        updatePostRecord(form.value).then(response => {
+          proxy.$modal.msgSuccess("修改成功")
+          open.value = false
+          getList()
+        })
+      } else {
+        addPostRecord(form.value).then(response => {
+          proxy.$modal.msgSuccess("新增成功")
+          open.value = false
+          getList()
+        })
+      }
+    }
+  })
+}
+
+/** 删除按钮操作 */
+function handleDelete(row) {
+  const _ids = row.id || ids.value
+  proxy.$modal.confirm('是否确认删除数据项？').then(function() {
+    return delPostRecord(_ids)
+  }).then(() => {
+    getList()
+    proxy.$modal.msgSuccess("删除成功")
+  }).catch(() => {})
+}
+
+/** 导出按钮操作 */
+function handleExport() {
+  proxy.download('attendance/postRecord/export', {
+    ...queryParams.value
+  }, `postRecord_${new Date().getTime()}.xlsx`)
+}
+
+onMounted(() => {
+  fetchPositionData()
+  fetchTeamData()
+  getList()
+})
+
+
+/** 导入按钮操作 */
+function handleImport() {
+  upload.title = "上岗记录导入"
+  upload.open = true
+}
+
+/** 下载模板操作 */
+function importTemplate() {
+  proxy.download("attendance/postRecord/importTemplate", {
+  }, `record_template_${new Date().getTime()}.xlsx`)
+}
+
+/**文件上传中处理 */
+const handleFileUploadProgress = (event, file, fileList) => {
+  upload.isUploading = true
+}
+
+/** 文件上传成功处理 */
+const handleFileSuccess = (response, file, fileList) => {
+  upload.open = false
+  upload.isUploading = false
+  proxy.$refs["uploadRef"].handleRemove(file)
+  proxy.$alert("<div style='overflow: auto;overflow-x: hidden;max-height: 70vh;padding: 10px 20px 0;'>" + response.msg + "</div>", "导入结果", { dangerouslyUseHTMLString: true })
+  getList()
+}
+
+/** 提交上传文件 */
+function submitFileForm() {
+  proxy.$refs["uploadRef"].submit()
+}
+</script>

src/views/attendance/record/index.vue

@@ -0,0 +1,299 @@
+<template>
+  <div class="app-container">
+    <el-form :model="queryParams" ref="queryRef" :inline="true" v-show="showSearch" label-width="68px">
+
+      <el-form-item label="用户姓名" prop="userName">
+        <el-input v-model="queryParams.userName" placeholder="请输入用户姓名" clearable @keyup.enter="handleQuery" />
+      </el-form-item>
+      <el-form-item label="班组名称" prop="attendanceTeamName">
+        <el-input v-model="queryParams.attendanceTeamName" placeholder="请输入班组名称" clearable @keyup.enter="handleQuery" />
+      </el-form-item>
+     
+      
+      <el-form-item label="工作区域" prop="terminlName">
+        <el-input v-model="queryParams.terminlName" placeholder="请输入工作区域" clearable @keyup.enter="handleQuery" />
+      </el-form-item>
+      <el-form-item label="维护时间" prop="attendanceDateRange">
+        <el-date-picker clearable v-model="queryParams.attendanceDateRange" type="daterange" range-separator="至"
+          start-placeholder="开始日期" end-placeholder="结束日期" value-format="YYYY-MM-DD" placeholder="请选择维护时间区间">
+        </el-date-picker>
+      </el-form-item>
+
+
+      <el-form-item>
+        <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
+        <el-button icon="Refresh" @click="resetQuery">重置</el-button>
+      </el-form-item>
+    </el-form>
+
+    <el-row :gutter="10" class="mb8">
+      <!-- <el-col :span="1.5">
+        <el-button type="primary" plain icon="Plus" @click="handleAdd"
+          v-hasPermi="['attendance:record:add']">新增</el-button>
+      </el-col>
+      <el-col :span="1.5">
+        <el-button type="success" plain icon="Edit" :disabled="single" @click="handleUpdate"
+          v-hasPermi="['attendance:record:edit']">修改</el-button>
+      </el-col> -->
+      <el-col :span="1.5">
+        <el-button type="danger" plain icon="Delete" :disabled="multiple" @click="handleDelete"
+          v-hasPermi="['attendance:record:remove']">删除</el-button>
+      </el-col>
+      <el-col :span="1.5">
+        <el-button type="warning" plain icon="Download" @click="handleExport"
+          v-hasPermi="['attendance:record:export']">导出</el-button>
+      </el-col>
+      <right-toolbar v-model:showSearch="showSearch" @queryTable="getList"></right-toolbar>
+    </el-row>
+
+    <el-table v-loading="loading" :data="recordList" @selection-change="handleSelectionChange">
+      <el-table-column type="selection" width="55" align="center" />
+      <!-- <el-table-column label="用户ID" align="center" prop="userId" />
+      <el-table-column label="用户code" align="center" prop="userCode" /> -->
+      <el-table-column label="用户姓名" align="center" prop="userName" />
+      <el-table-column label="班组名称" align="center" prop="attendanceTeamName" />
+      <!-- <el-table-column label="航站楼编码" align="center" prop="terminlCode" /> -->
+      <el-table-column label="工作区域" align="center" prop="terminlName" />
+
+      <!-- <el-table-column label="考勤班组ID" align="center" prop="attendanceTeamId" /> -->
+
+      <el-table-column label="维护时间" align="center" prop="attendanceDate" width="180">
+        <template #default="scope">
+          <span>{{ parseTime(scope.row.attendanceDate, '{y}-{m}-{d}') }}</span>
+        </template>
+      </el-table-column>
+      <!-- <el-table-column label="备注" align="center" prop="remark" /> -->
+      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
+        <template #default="scope">
+          <!-- <el-button link type="primary" icon="Edit" @click="handleUpdate(scope.row)"
+            v-hasPermi="['attendance:record:edit']">修改</el-button> -->
+          <el-button link type="primary" icon="Delete" @click="handleDelete(scope.row)"
+            v-hasPermi="['attendance:record:remove']">删除</el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+
+    <pagination v-show="total > 0" :total="total" v-model:page="queryParams.pageNum"
+      v-model:limit="queryParams.pageSize" @pagination="getList" />
+
+    <!-- 添加或修改考勤班组成员对话框 -->
+    <el-dialog :title="title" v-model="open" width="500px" append-to-body>
+      <el-form ref="recordRef" :model="form" :rules="rules" label-width="80px">
+        <el-form-item label="用户ID" prop="userId">
+          <el-input v-model="form.userId" placeholder="请输入用户ID" />
+        </el-form-item>
+        <el-form-item label="用户code" prop="userCode">
+          <el-input v-model="form.userCode" placeholder="请输入用户code" />
+        </el-form-item>
+        <el-form-item label="用户姓名" prop="userName">
+          <el-input v-model="form.userName" placeholder="请输入用户姓名" />
+        </el-form-item>
+        <el-form-item label="航站楼编码" prop="terminlCode">
+          <el-input v-model="form.terminlCode" placeholder="请输入航站楼编码" />
+        </el-form-item>
+        <el-form-item label="航站楼名称" prop="terminlName">
+          <el-input v-model="form.terminlName" placeholder="请输入航站楼名称" />
+        </el-form-item>
+        <el-form-item label="维护时间" prop="attendanceDate">
+          <el-date-picker clearable v-model="form.attendanceDate" type="date" value-format="YYYY-MM-DD"
+            placeholder="请选择维护时间">
+          </el-date-picker>
+        </el-form-item>
+        <el-form-item label="考勤班组ID" prop="attendanceTeamId">
+          <el-input v-model="form.attendanceTeamId" placeholder="请输入考勤班组ID" />
+        </el-form-item>
+        <el-form-item label="班组名称" prop="attendanceTeamName">
+          <el-input v-model="form.attendanceTeamName" placeholder="请输入班组名称" />
+        </el-form-item>
+        <el-form-item label="备注" prop="remark">
+          <el-input v-model="form.remark" type="textarea" placeholder="请输入内容" />
+        </el-form-item>
+      </el-form>
+      <template #footer>
+        <div class="dialog-footer">
+          <el-button type="primary" @click="submitForm">确 定</el-button>
+          <el-button @click="cancel">取 消</el-button>
+        </div>
+      </template>
+    </el-dialog>
+  </div>
+</template>
+
+<script setup name="Record">
+import { listRecord, getRecord, delRecord, addRecord, updateRecord } from "@/api/attendance/record"
+
+const { proxy } = getCurrentInstance()
+
+const recordList = ref([])
+const open = ref(false)
+const loading = ref(true)
+const showSearch = ref(true)
+const ids = ref([])
+const single = ref(true)
+const multiple = ref(true)
+const total = ref(0)
+const title = ref("")
+
+const data = reactive({
+  form: {},
+  queryParams: {
+    pageNum: 1,
+    pageSize: 10,
+    // userId: null,
+    userCode: null,
+    userName: null,
+  
+    terminlName: null,
+    attendanceDate: null,
+    attendanceDateRange: [],
+    attendanceTeamId: null,
+    attendanceTeamName: null,
+  },
+  rules: {
+    // userId: [
+    //   { required: true, message: "用户ID不能为空", trigger: "blur" }
+    // ],
+    userCode: [
+      { required: true, message: "用户code不能为空", trigger: "blur" }
+    ],
+    userName: [
+      { required: true, message: "用户姓名不能为空", trigger: "blur" }
+    ],
+    attendanceDate: [
+      { required: true, message: "维护时间不能为空", trigger: "blur" }
+    ],
+  }
+})
+
+const { queryParams, form, rules } = toRefs(data)
+
+/** 查询考勤班组成员列表 */
+function getList() {
+  loading.value = true
+
+  // 处理时间区间查询参数
+  const params = {
+    ...queryParams.value
+  }
+
+  // 如果有时间区间，设置开始日期和结束日期
+  if (params.attendanceDateRange && params.attendanceDateRange.length === 2) {
+    params.attendanceDateStart = params.attendanceDateRange[0]
+    params.attendanceDateEnd = params.attendanceDateRange[1]
+    // 移除时间区间参数，避免传递给后端
+    delete params.attendanceDateRange
+  }
+
+  listRecord(params).then(response => {
+    recordList.value = response.rows
+    total.value = response.total
+    loading.value = false
+  })
+}
+
+// 取消按钮
+function cancel() {
+  open.value = false
+  reset()
+}
+
+// 表单重置
+function reset() {
+  form.value = {
+    // userId: null,
+    userCode: null,
+    userName: null,
+    terminlCode: null,
+    terminlName: null,
+    attendanceDate: null,
+    attendanceTeamId: null,
+    attendanceTeamName: null,
+    createBy: null,
+    createTime: null,
+    updateBy: null,
+    updateTime: null,
+    remark: null
+  }
+  proxy.resetForm("recordRef")
+}
+
+/** 搜索按钮操作 */
+function handleQuery() {
+  queryParams.value.pageNum = 1
+  getList()
+}
+
+/** 重置按钮操作 */
+function resetQuery() {
+  proxy.resetForm("queryRef")
+  // 手动重置时间区间参数
+  queryParams.value.attendanceDateRange = []
+  handleQuery()
+}
+
+// 多选框选中数据
+function handleSelectionChange(selection) {
+  ids.value = selection.map(item => item.userId)
+  single.value = selection.length != 1
+  multiple.value = !selection.length
+}
+
+/** 新增按钮操作 */
+function handleAdd() {
+  reset()
+  open.value = true
+  title.value = "添加考勤班组成员"
+}
+
+/** 修改按钮操作 */
+function handleUpdate(row) {
+  reset()
+  const _userId = row.userId || ids.value
+  getRecord(_userId).then(response => {
+    form.value = response.data
+    open.value = true
+    title.value = "修改考勤班组成员"
+  })
+}
+
+/** 提交按钮 */
+function submitForm() {
+  proxy.$refs["recordRef"].validate(valid => {
+    if (valid) {
+      if (form.value.userId != null) {
+        updateRecord(form.value).then(response => {
+          proxy.$modal.msgSuccess("修改成功")
+          open.value = false
+          getList()
+        })
+      } else {
+        addRecord(form.value).then(response => {
+          proxy.$modal.msgSuccess("新增成功")
+          open.value = false
+          getList()
+        })
+      }
+    }
+  })
+}
+
+/** 删除按钮操作 */
+function handleDelete(row) {
+  const _userIds = row.userId || ids.value
+  proxy.$modal.confirm('是否确认删除考勤班组成员编号为"' + _userIds + '"的数据项？').then(function () {
+    return delRecord(_userIds)
+  }).then(() => {
+    getList()
+    proxy.$modal.msgSuccess("删除成功")
+  }).catch(() => { })
+}
+
+/** 导出按钮操作 */
+function handleExport() {
+  proxy.download('attendance/record/export', {
+    ...queryParams.value
+  }, `record_${new Date().getTime()}.xlsx`)
+}
+
+getList()
+</script>

src/views/check/checkCorrection/components/Deatils.vue

@@ -0,0 +1,334 @@
+<template>
+  <el-dialog :title="title" v-model="open" width="1100px" append-to-body>
+    <div class="contentWrap" v-loading="loading">
+      <el-form ref="checkFormRef" :model="form" :rules="rules" scroll-to-error :scroll-into-view-options="{block: 'center'}" label-width="9em">
+        <el-card header="基本信息" style="margin-bottom: 10px;"  v-card-expand="{ isExpanded: true }">
+          <el-row :gutter="16">
+            <el-col :span="12">
+              <el-form-item label="任务编号" prop="taskCode">
+                <el-input :disabled="disabled" v-model="form.taskCode" :placeholder="disabled ? '-' : '请输入任务编号'" maxlength="30" />
+              </el-form-item>
+            </el-col>
+            <el-col :span="12">
+              <el-form-item label="检查人" prop="checkerName">
+                <el-input :disabled="disabled" v-model="form.checkerName" :placeholder="disabled ? '-' : '请输入检查人'" />
+              </el-form-item>
+            </el-col>
+            <el-col :span="12">
+              <el-form-item label="被检查人/科/班组" prop="checkedDepartmentName">
+                <el-input
+                  v-if=" form.checkedLevel === 'DEPARTMENT_LEVEL' "
+                  :disabled="disabled"
+                  :value="form.checkedDepartmentName"
+                  :placeholder="disabled ? '-' : '请输入被检查人/科/班组'" />
+                <el-input
+                  v-else-if=" form.checkedLevel === 'TEAM_LEVEL' "
+                  :disabled="disabled"
+                  :value="form.checkedTeamName"
+                  :placeholder="disabled ? '-' : '请输入被检查人/科/班组'" />
+                <el-input
+                  v-else-if=" form.checkedLevel === 'PERSONNEL_LEVEL' "
+                  :disabled="disabled"
+                  :value="form.checkedPersonnelName"
+                  :placeholder="disabled ? '-' : '请输入被检查人/科/班组'" />
+                <el-input :disabled="disabled" v-else />
+              </el-form-item>
+            </el-col>
+            <el-col :span="12">
+              <el-form-item label="检查地点" prop="nickName">
+                <el-input
+                  :disabled="disabled"
+                  :value="viewText( form.terminlName, form.regionalName, form.channelName )"
+                  :placeholder="disabled ? '-' : '请输入检查地点'" />
+              </el-form-item>
+            </el-col>
+            <el-col :span="12">
+              <el-form-item label="检查时间" prop="checkTime">
+                <el-input :disabled="disabled" v-model="form.checkTime" :placeholder="disabled ? '-' : '请输入检查时间'" />
+              </el-form-item>
+            </el-col>
+          </el-row>
+        </el-card>
+
+        <el-card header="待整改任务" style="margin-bottom: 10px;" v-card-expand="{ isExpanded: true }">
+          <div>
+            <el-row :gutter="16">
+              <el-col :span="24" v-for=" item of groupHandler( form.checkProjectItemList ) " :key="item.id"
+                style="margin-bottom: 15px;">
+                <div class="title">{{ item.title }}</div>
+                <div v-for=" attr in item.list " :key="attr.index" style="padding: 0 30px; box-sizing: border-box;">
+                  <el-form-item :label="attr.projectName" label-width="auto"
+                    :prop="`checkProjectItemList.${attr.index}.scoreLevel`">
+                    <el-switch
+                      :disabled="disabled"
+                      v-model="attr.scoreLevel"
+                      active-value="QUALIFIED"
+                      inactive-value="UNQUALIFIED"
+                      inline-prompt
+                      active-text="符合"
+                      inactive-text="不符合"
+                      style="--el-switch-on-color: rgb(98, 111, 240); --el-switch-off-color: #ff4949" />
+                  </el-form-item>
+                  <div v-if=" attr.scoreLevel === 'UNQUALIFIED' " style="padding: 0 30px; box-sizing: border-box;">
+                    <el-form-item v-if="attr.checkUserList && attr.checkUserList.length" label="不合格人员" label-width="6em" prop="checkedPersonnelName">
+                      <el-input
+                        :disabled="disabled"
+                        :value="getUserName( attr.checkUserList )" />
+                    </el-form-item>
+                    <el-form-item v-if="attr.problemDescription" label="问题描述" label-width="6em"
+                      :prop="`checkProjectItemList.${attr.index}.problemDescription`">
+                      <el-input type="textarea" :disabled="disabled" v-model="attr.problemDescription" />
+                    </el-form-item>
+                  </div>
+                </div>
+              </el-col>
+              <el-col :span="24" v-if=" form.checkRecordBaseAttachmentList && form.checkRecordBaseAttachmentList.length ">
+                <div class="title">不合格照片</div>
+                <div class="imgList">
+                  <ImageUpload :modelValue="transformImglistData(form.checkRecordBaseAttachmentList)" :disabled="disabled"  />
+                </div>
+              </el-col>
+            </el-row>
+          </div>
+        </el-card>
+
+        <el-card header="整改要求" style="margin-bottom: 10px;"  v-card-expand="{ isExpanded: true }">
+          <el-row :gutter="16">
+            <el-col :span="12">
+              <el-form-item label="负责人" prop="responsibleUserName">
+                <el-input v-model="form.responsibleUserName" :disabled="disabled" :placeholder="disabled ? '-' : '请输入负责人'" />
+              </el-form-item>
+            </el-col>
+
+            <el-col :span="12">
+              <el-form-item label="整改期限" prop="rectificationDeadline">
+                <el-input v-model="form.rectificationDeadline" :disabled="disabled" :placeholder="disabled ? '-' : '请输入整改期限'" />
+              </el-form-item>
+            </el-col>
+            <el-col :span="24">
+              <el-form-item label="整改要求" prop="rectificationSuggestions">
+                <el-input type="textarea" v-model="form.rectificationSuggestions" :disabled="disabled" :placeholder="disabled ? '-' : '请输入整改要求'" />
+              </el-form-item>
+            </el-col>
+          </el-row>
+        </el-card>
+        <el-card header="整改详情" style="margin-bottom: 10px;"  v-card-expand="{ isExpanded: true }">
+          <el-row :gutter="16">
+            <el-col :span="24">
+              <el-form-item label="整改详情" label-width="6em" prop="rectificationDetails">
+                <el-input type="textarea" v-model="form.rectificationDetails" :disabled="disabled" :placeholder="'请输入整改要求'" />
+              </el-form-item>
+            </el-col>
+            <el-col :span="24" v-if="baseAttachmentList.length">
+              <div class="title">整改图片</div>
+              <div class="imgList">
+                <ImageUpload v-model="baseAttachmentList" :disabled="disabled"  />
+              </div>
+            </el-col>
+          </el-row>
+        </el-card>
+        <el-card header="审批历史" style="margin-bottom: 10px;"  v-card-expand="{ isExpanded: true }">
+          <el-table :data="historyInstanceList">
+            <el-table-column label="审批人" align="center" prop="operatorName" width="180" />
+            <el-table-column label="审批时间" align="center" prop="operationTime" />
+            <el-table-column label="审批状态" align="center" prop="comment" />
+          </el-table>
+        </el-card>
+      </el-form>
+    </div>
+    <template #footer>
+      <div class="dialog-footer">
+        <el-button @click="cancel">关闭</el-button>
+      </div>
+    </template>
+  </el-dialog>
+</template>
+
+<script setup>
+import { watch, ref, onMounted, reactive, onUnmounted, computed } from 'vue'
+import { getCheckCorrection, historyInstance} from "@/api/check/checkCorrection"
+import { listUser } from "@/api/system/user"
+const props = defineProps({
+  id: {
+    type: Number
+  }
+})
+
+const disabled = ref(true)
+const open = defineModel('show', ref(false))
+const title = ref('整改单详情')
+const form = ref({
+  checkRecordBaseAttachmentList: [],
+  baseAttachmentList: []
+})
+const loading = ref(false)
+const historyInstanceList = ref([])
+const listUserOption = ref([])
+const checkFormRef = ref(null)
+const getDetailInfo = () => {
+  loading.value = true
+  getCheckCorrection(props.id).then(res => {
+    checkFormRef.value.resetFields()
+    form.value = res.data
+    if (res.data.instanceId) {
+      return historyInstance(res.data.instanceId).then(res => {
+        historyInstanceList.value = res.rows
+        return
+      })
+    } else {
+      return historyInstanceList.value = []
+    }
+    
+  }).finally(() => {
+    loading.value = false
+  })
+}
+
+const viewText = (...rest) => {
+  if (Array.isArray(rest) && rest.length) {
+    return rest.reduce((cur, acc) => {
+      if (acc) {
+        cur += cur ? `/${acc}` : acc
+      }
+      return cur
+    }, '')
+  }
+  return '-'
+}
+
+const transformImglistData = (imgList) => {
+  if (Array.isArray(imgList) && imgList.length) {
+    return imgList.map(item => {
+      return {
+        ...item,
+        name: item.attachmentName,
+        url: item.attachmentUrl,
+      }
+    })
+  }
+  return []
+}
+
+const baseAttachmentList = computed({
+  get () {
+    return transformImglistData(form.value.baseAttachmentList)
+  },
+  set (newValue) {
+    form.value.baseAttachmentList = newValue.map(item => {
+      return {
+        attachmentName: item.name,
+        attachmentUrl: item.url
+      }
+    })
+  }
+})
+
+const groupHandler = (list) => {
+  if (Array.isArray(list) && list.length) {
+    return list.reduce((cur, acc, index) => {
+      const findIndex = cur.findIndex(item => item.categoryCodeOne === acc.categoryCodeOne && item.categoryCodeTwo === acc.categoryCodeTwo)
+      if (findIndex >= 0) {
+        cur[ findIndex ].list.push({ index, ...acc })
+      } else {
+        cur.push({
+          title: `${acc.categoryNameOne}/${acc.categoryNameTwo}`,
+          categoryCodeOne: acc.categoryCodeOne,
+          categoryCodeTwo: acc.categoryCodeTwo,
+          list: [ { index, ...acc } ]
+        })
+      }
+      return cur
+    }, [])
+  }
+  return []
+}
+const getUserInfo = () => {
+  listUser().then(res => {
+    listUserOption.value = res.rows.map((item) => ({
+      value: item.userId,
+      label: item.nickName
+    }))
+  })
+}
+
+const getUserName = (list) => {
+  if (Array.isArray(list) && list.length) {
+    return list.map(attr => {
+      return (listUserOption.value.find(item => item.value === attr.userId) || {}).label
+    }).filter(Boolean).join('、')
+  }
+  return '-'
+}
+
+const cancel = () => {
+  checkFormRef.value && checkFormRef.value.resetFields()
+  form.value = {}
+  open.value = false
+}
+
+watch(() => open.value, () => {
+  if (open.value) {
+    getDetailInfo()
+  } else {
+    form.value = {}
+  }
+})
+
+const rules = reactive({
+  rectificationDetails: [{ required: true, message: "请输入整改详情", trigger: "blur" }]
+})
+
+onMounted(() => {
+  getUserInfo()
+})
+onUnmounted(() => {
+  cancel()
+})
+</script>
+
+<style lang="less" scoped>
+.contentWrap {
+  height: 75vh;
+  overflow-y: auto;
+  overflow-x: hidden;
+  padding: 0 10px;
+}
+
+:deep(.el-card) {
+  .el-card__header {
+    font-weight: 600;
+    font-size: 16px;
+    color: #000;
+  }
+}
+
+.title {
+  font-weight: 600;
+  color: #000;
+  margin-bottom: 10px;
+}
+
+.imgList {
+  display: flex;
+  flex-wrap: wrap;
+  row-gap: 15px;
+  column-gap: 15px;
+
+  .img-item {
+    width: 220px;
+    height: 120px;
+    border: 1px dashed #d9d9d9;
+    border-radius: 6px;
+    padding: 2px;
+    box-sizing: border-box;
+
+    img {
+      width: 100%;
+      height: 100%;
+      object-fit: contain;
+      border: none;
+      outline: none;
+    }
+  }
+}
+</style>

src/views/check/checkCorrection/index.vue

@@ -0,0 +1,137 @@
+<template>
+  <div class="app-container">
+    <el-form :model="queryParams" ref="queryRef" :inline="true" label-width="100px">
+      <el-row :gutter="16">
+        <el-col :span="8">
+          <el-form-item label="任务标题" prop="taskName">
+            <el-input v-model="queryParams.taskName" placeholder="请输入任务标题" clearable style="width: 200px;" />
+          </el-form-item>
+        </el-col>
+        <el-col :span="8">
+          <el-form-item label="检查人" prop="checkerName">
+            <el-input v-model="queryParams.checkerName" placeholder="请输入检查人" clearable style="width: 200px;" />
+          </el-form-item>
+        </el-col>
+        <el-col :span="8">
+          <el-form-item label="检查时间" prop="checkTime">
+            <el-date-picker v-model="queryParams.checkTime" type="date" value-format="YYYY-MM-DD" placeholder="请选择检查时间"
+              style="width: 200px;" clearable />
+          </el-form-item>
+        </el-col>
+        <el-col :span="24">
+          <el-form-item>
+            <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
+            <el-button icon="Refresh" @click="resetQuery">重置</el-button>
+          </el-form-item>
+        </el-col>
+      </el-row>
+    </el-form>
+
+    <el-table v-loading="loading" :data="checkRecordList">
+      <el-table-column label="任务编号" align="center" prop="taskCode" width="180" />
+      <el-table-column label="任务标题" align="center" prop="taskName" />
+      <el-table-column label="检查人" align="center" prop="checkerName" width="100" />
+      <el-table-column label="检查时间" align="center" prop="checkTime" width="180">
+        <template #default=" scope ">
+          <span>{{ parseTime( scope.row.checkTime, '{y}-{m}-{d}' ) }}</span>
+        </template>
+      </el-table-column>
+      <el-table-column label="被检查级别" align="center" prop="checkedLevel" width="100">
+        <template #default=" scope ">
+          <dict-tag :options="check_checked_level" :value="scope.row.checkedLevel" />
+        </template>
+      </el-table-column>
+      <el-table-column label="被检查人/班组/科" align="center" prop="checkedLevel">
+        <template #default=" scope ">
+          <div v-if=" scope.row.checkedLevel === 'DEPARTMENT_LEVEL' ">{{ scope.row.checkedDepartmentName }}</div>
+          <div v-if=" scope.row.checkedLevel === 'TEAM_LEVEL' ">{{ scope.row.checkedTeamName }}</div>
+          <div v-if=" scope.row.checkedLevel === 'PERSONNEL_LEVEL' ">{{ scope.row.checkedPersonnelName }}</div>
+        </template>
+      </el-table-column>
+      <el-table-column label="整改状态" align="center" prop="statusDesc" width="100" />
+      <el-table-column label="操作" align="center" class-name="small-padding fixed-width" width="100">
+        <template #default=" scope ">
+          <el-button link type="info" icon="View" @click="handleDetail( scope.row )"
+            v-hasPermi="[ 'check:checkRecord:query' ]">详情</el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+    <pagination v-show="total > 0" :total="total" v-model:page="queryParams.pageNum"
+      v-model:limit="queryParams.pageSize"
+      @pagination="getList" />
+    <Details v-model:show="show" :id="cellRecord.id"/>
+  </div>
+</template>
+
+<script setup name="CheckRecord">
+import { checkCorrection } from "@/api/check/checkCorrection"
+import Details from "./components/Deatils.vue"
+import { useDict } from '@/utils/dict'
+import { onMounted } from 'vue'
+const { check_checked_level } = useDict('check_checked_level')
+
+const checkRecordList = ref([])
+const loading = ref(false)
+const total = ref(0)
+const queryParams = ref({
+  taskName: undefined,
+  checkerName: undefined,
+  checkTime: undefined,
+  pageNum: 1,
+  pageSize: 10
+})
+
+/** 查询检查记录列表 */
+function getList () {
+  loading.value = true
+  checkCorrection(queryParams.value).then(response => {
+    checkRecordList.value = response.rows
+    total.value = response.total
+  }).finally(() => {
+    loading.value = false
+  })
+}
+const cellRecord = ref({})
+const show = ref(false)
+const handleDetail = (record) => {
+  cellRecord.value = record
+  show.value = true
+}
+
+const handleQuery = () => {
+  getList()
+}
+
+onMounted(() => {
+  getList()
+})
+</script>
+
+<style>
+.record-card {
+  margin-bottom: 12px;
+  padding: 8px 12px;
+  /* border-left: 4px solid #52c41a;    */
+  /* background: #f6ffed; */
+  border-radius: 4px;
+}
+
+.record-line {
+  display: flex;
+  margin-bottom: 4px;
+  font-size: 14px;
+  line-height: 1.5;
+}
+
+.label {
+  color: #666;
+  margin-right: 6px;
+  flex-shrink: 0;
+  width: 70px;
+}
+
+.value {
+  color: #333;
+  flex: 1;
+}
+</style>

src/views/check/checkRecord/components/Details.vue

@@ -0,0 +1,234 @@
+<template>
+  <div class="contentWrap">
+    <el-form ref="checkRecordRef" :model="form" :rules="rules" label-width="9em" :disabled="disabled">
+      <el-card header="基本信息" style="margin-bottom: 10px;">
+        <el-row :gutter="16">
+          <el-col :span="12">
+            <el-form-item label="任务编号" prop="taskCode">
+              <el-input v-model="form.taskCode" :placeholder="disabled ? '-' : '请输入任务编号'" maxlength="30" />
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item label="检查人" prop="checkerName">
+              <el-input v-model="form.checkerName" :placeholder="disabled ? '-' : '请输入检查人'" />
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item label="被检查人/科/班组" prop="checkedDepartmentName">
+              <el-input
+                v-if=" form.checkedLevel === 'DEPARTMENT_LEVEL' "
+                :value="form.checkedDepartmentName"
+                :placeholder="disabled ? '-' : '请输入被检查人/科/班组'" />
+              <el-input
+                v-else-if=" form.checkedLevel === 'TEAM_LEVEL' "
+                :value="form.checkedTeamName"
+                :placeholder="disabled ? '-' : '请输入被检查人/科/班组'" />
+              <el-input
+                v-else-if=" form.checkedLevel === 'PERSONNEL_LEVEL' "
+                :value="form.checkedPersonnelName"
+                :placeholder="disabled ? '-' : '请输入被检查人/科/班组'" />
+              <el-input v-else />
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item label="检查地点" prop="nickName">
+              <el-input
+                :value="viewText( form.terminlName, form.regionalName, form.channelName )"
+                :placeholder="disabled ? '-' : '请输入检查地点'" />
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item label="检查时间" prop="checkTime">
+              <el-input v-model="form.checkTime" :placeholder="disabled ? '-' : '请输入检查时间'" />
+            </el-form-item>
+          </el-col>
+        </el-row>
+      </el-card>
+
+      <el-card header="巡检项目" style="margin-bottom: 10px;">
+        <div>
+          <el-row :gutter="16">
+            <el-col :span="24" v-for=" item of groupHandler( form.checkProjectItemList ) " :key="item.id"
+              style="margin-bottom: 15px;">
+              <div class="title">{{ item.title }}</div>
+              <div v-for=" attr in item.list " :key="attr.index" style="padding: 0 30px; box-sizing: border-box;">
+                <el-form-item :label="attr.projectName" label-width="auto"
+                  :prop="`checkProjectItemList.${attr.index}.scoreLevel`">
+                  <el-switch
+                    v-model="attr.scoreLevel"
+                    active-value="QUALIFIED"
+                    inactive-value="UNQUALIFIED"
+                    inline-prompt
+                    active-text="符合"
+                    inactive-text="不符合"
+                    style="--el-switch-on-color: rgb(98, 111, 240); --el-switch-off-color: #ff4949" />
+                </el-form-item>
+                <div v-if=" attr.scoreLevel === 'UNQUALIFIED' " style="padding: 0 30px; box-sizing: border-box;">
+                  <el-form-item v-if=" attr.checkUserList && attr.checkUserList.length " label="不合格人员" label-width="6em" prop="checkedPersonnelName">
+                    <el-input
+                      :value="getUserName( attr.checkUserList )" 
+                    />
+                  </el-form-item>
+                  <el-form-item v-if="attr.problemDescription" label="问题描述" label-width="6em"
+                    :prop="`checkProjectItemList.${attr.index}.problemDescription`">
+                    <el-input type="textarea" v-model="attr.problemDescription" />
+                  </el-form-item>
+                </div>
+              </div>
+            </el-col>
+            <el-col :span="24" v-if=" form.baseAttachmentList && form.baseAttachmentList.length ">
+              <div class="title">不合格照片</div>
+              <div class="imgList">
+                <ImageUpload :modelValue="transformImglistData( form.baseAttachmentList )" disabled />
+              </div>
+            </el-col>
+          </el-row>
+        </div>
+      </el-card>
+
+      <el-card header="整改要求" style="margin-bottom: 10px;">
+        <el-row :gutter="16">
+          <el-col :span="12">
+            <el-form-item label="负责人" prop="responsibleUserName">
+              <el-input v-model="form.responsibleUserName" :placeholder="disabled ? '-' : '请输入负责人'" />
+            </el-form-item>
+          </el-col>
+
+          <el-col :span="12">
+            <el-form-item label="整改期限" prop="rectificationDeadline">
+              <el-input v-model="form.rectificationDeadline" :placeholder="disabled ? '-' : '请输入整改期限'" />
+            </el-form-item>
+          </el-col>
+          <el-col :span="24">
+            <el-form-item label="整改要求" prop="rectificationSuggestions">
+              <el-input v-model="form.rectificationSuggestions" :placeholder="disabled ? '-' : '请输入整改要求'" />
+            </el-form-item>
+          </el-col>
+        </el-row>
+      </el-card>
+    </el-form>
+  </div>
+</template>
+
+<script setup>
+import { onMounted, reactive } from 'vue';
+import { listUser } from "@/api/system/user"
+const form = defineModel('form', reactive({}))
+const disabled = ref(true)
+
+const viewText = (...rest) => {
+  if (Array.isArray(rest) && rest.length) {
+    return rest.reduce((cur, acc) => {
+      if (acc) {
+        cur += cur ? `/${acc}` : acc
+      }
+      return cur
+    }, '')
+  }
+  return '-'
+}
+const listUserOption = ref([])
+const getUserInfo = () => {
+  listUser().then(res => {
+    listUserOption.value = res.rows.map((item) => ({
+      value: item.userId,
+      label: item.nickName
+    }))
+  })
+}
+
+const getUserName = (list) => {
+  if (Array.isArray(list) && list.length) {
+    return list.map(attr => {
+      return (listUserOption.value.find(item => item.value === attr.userId) || {}).label
+    }).filter(Boolean).join('、')
+  }
+  return '-'
+}
+
+const transformImglistData = (imgList) => {
+  if (Array.isArray(imgList) && imgList.length) {
+    return imgList.map(item => {
+      return {
+        ...item,
+        name: item.attachmentName,
+        url: item.attachmentUrl,
+      }
+    })
+  }
+  return []
+}
+
+onMounted(() => {
+  getUserInfo()
+})
+
+const groupHandler = (list) => {
+  if (Array.isArray(list) && list.length) {
+    return list.reduce((cur, acc, index) => {
+      const findIndex = cur.findIndex(item => item.categoryCodeOne === acc.categoryCodeOne && item.categoryCodeTwo === acc.categoryCodeTwo)
+      if (findIndex >= 0) {
+        cur[ findIndex ].list.push({ index, ...acc })
+      } else {
+        cur.push({
+          title: `${acc.categoryNameOne}/${acc.categoryNameTwo}`,
+          categoryCodeOne: acc.categoryCodeOne,
+          categoryCodeTwo: acc.categoryCodeTwo,
+          list: [ { index, ...acc } ]
+        })
+      }
+      return cur
+    }, [])
+  }
+  return []
+}
+
+const rules = reactive({})
+</script>
+
+<style lang="less" scoped>
+.contentWrap {
+  height: 75vh;
+  overflow-y: auto;
+  overflow-x: hidden;
+  padding: 0 10px;
+}
+
+:deep(.el-card) {
+  .el-card__header {
+    font-weight: 600;
+    font-size: 16px;
+    color: #000;
+  }
+}
+
+.title {
+  font-weight: 600;
+  color: #000;
+  margin-bottom: 10px;
+}
+
+.imgList {
+  display: flex;
+  flex-wrap: wrap;
+  row-gap: 15px;
+  column-gap: 15px;
+
+  .img-item {
+    width: 220px;
+    height: 120px;
+    border: 1px dashed #d9d9d9;
+    border-radius: 6px;
+    padding: 2px;
+    box-sizing: border-box;
+
+    img {
+      width: 100%;
+      height: 100%;
+      object-fit: contain;
+      border: none;
+      outline: none;
+    }
+  }
+}
+</style>

src/views/check/checkRecord/index.vue

@@ -0,0 +1,390 @@
+<template>
+  <div class="app-container">
+    <el-form :model="queryParams" ref="queryRef" :inline="true" v-show="showSearch" label-width="100px">
+      <!-- <el-form-item label="检查单号" prop="documentCode">
+        <el-input
+          v-model="queryParams.documentCode"
+          placeholder="请输入检查单号"
+          clearable
+          @keyup.enter="handleQuery"
+        />
+      </el-form-item> -->
+
+      <!-- <el-form-item label="任务标题" prop="documentName">
+        <el-input v-model="queryParams.documentName" placeholder="请输入任务标题" clearable @keyup.enter="handleQuery" />
+      </el-form-item>
+
+      <el-form-item label="检查人" prop="checkerName">
+        <el-input v-model="queryParams.checkerName" placeholder="请输入检查人" clearable @keyup.enter="handleQuery" />
+      </el-form-item>
+
+      <el-form-item label="检查时间" prop="checkTime">
+        <el-date-picker clearable v-model="queryParams.checkTime" type="date" value-format="YYYY-MM-DD"
+          placeholder="请选择检查时间">
+        </el-date-picker>
+      </el-form-item> -->
+
+      <el-form-item label="任务标题" prop="taskName">
+        <el-input v-model="queryParams.taskName" placeholder="请输入任务标题" clearable style="width: 200px;" />
+      </el-form-item>
+
+      <el-form-item label="检查人" prop="checkerName">
+        <el-input v-model="queryParams.checkerName" placeholder="请输入检查人" clearable style="width: 200px;" />
+      </el-form-item>
+
+      <el-form-item label="检查时间" prop="checkTime">
+        <el-date-picker v-model="queryParams.checkTime" type="date" value-format="YYYY-MM-DD" placeholder="请选择检查时间"
+          style="width: 200px;" clearable />
+      </el-form-item>
+      <!-- <el-form-item label="检查结果" prop="checkResult">
+         <el-select v-model="queryParams.checkResult" placeholder="请选择检查结果" clearable style="width: 120px">
+          <el-option
+            v-for="dict in check_result"
+            :key="dict.value"
+            :label="dict.label"
+            :value="dict.value"
+          />
+        </el-select>
+      </el-form-item> -->
+
+
+      <!-- <el-form-item label="严重程度" prop="severity">
+        <el-select v-model="queryParams.severity" placeholder="请选择严重程度" clearable style="width: 120px">
+          <el-option
+            v-for="dict in check_severity"
+            :key="dict.value"
+            :label="dict.label"
+            :value="dict.value"
+          />
+        </el-select>
+      </el-form-item>
+      <el-form-item label="整改状态" prop="correctionStatus">
+        <el-select v-model="queryParams.correctionStatus" placeholder="请选择整改状态" clearable style="width: 120px">
+          <el-option
+            v-for="dict in check_problem_corrections_status"
+            :key="dict.value"
+            :label="dict.label"
+            :value="dict.value"
+          />
+        </el-select>
+      </el-form-item> -->
+      <el-form-item>
+        <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
+        <el-button icon="Refresh" @click="resetQuery">重置</el-button>
+      </el-form-item>
+    </el-form>
+
+    <el-row :gutter="10" class="mb8">
+      <!-- <el-col :span="1.5">
+        <el-button type="primary" plain icon="Plus" @click="handleAdd"
+          v-hasPermi="['check:checkRecord:add']">新增</el-button>
+      </el-col>
+      <el-col :span="1.5">
+        <el-button type="success" plain icon="Edit" :disabled="single" @click="handleUpdate"
+          v-hasPermi="['check:checkRecord:edit']">修改</el-button>
+      </el-col>
+      <el-col :span="1.5">
+        <el-button type="danger" plain icon="Delete" :disabled="multiple" @click="handleDelete"
+          v-hasPermi="['check:checkRecord:remove']">删除</el-button>
+      </el-col> -->
+      <el-col :span="1.5">
+        <el-button type="warning" plain icon="Download" @click="handleExport"
+          v-hasPermi="['check:checkRecord:export']">导出</el-button>
+      </el-col>
+      <right-toolbar v-model:showSearch="showSearch" @queryTable="getList"></right-toolbar>
+    </el-row>
+
+    <el-table v-loading="loading" :data="checkRecordList" @selection-change="handleSelectionChange">
+      <el-table-column type="selection" width="55" align="center" />
+      <el-table-column label="任务编号" align="center" prop="taskCode" width="180"/>
+      <el-table-column label="任务标题" align="center" prop="taskName" />
+      <el-table-column label="检查人" align="center" prop="checkerName" width="100"/>
+      <el-table-column label="检查时间" align="center" prop="checkTime" width="180">
+        <template #default="scope">
+          <span>{{ parseTime(scope.row.checkTime, '{y}-{m}-{d}') }}</span>
+        </template>
+      </el-table-column>
+      <el-table-column label="被检查级别" align="center" prop="checkedLevel" width="100">
+        <template #default="scope">
+          <dict-tag :options="check_checked_level" :value="scope.row.checkedLevel" />
+        </template>
+      </el-table-column>
+      <el-table-column label="被检查人/班组/科" align="center" prop="checkedLevel">
+        <template #default="scope">
+          <div v-if="scope.row.checkedLevel === 'DEPARTMENT_LEVEL'">{{ scope.row.checkedDepartmentName  }}</div>
+          <div v-if="scope.row.checkedLevel === 'TEAM_LEVEL'">{{ scope.row.checkedTeamName }}</div>
+          <div v-if="scope.row.checkedLevel === 'PERSONNEL_LEVEL'">{{ scope.row.checkedPersonnelName }}</div>
+        </template>  
+      </el-table-column>
+      <el-table-column label="操作" align="center" class-name="small-padding fixed-width" width="100">
+        <template #default="scope">
+          <!-- <el-button link type="primary" icon="Edit" @click="handleUpdate(scope.row)"
+            v-hasPermi="['check:checkRecord:edit']">修改</el-button>
+          <el-button link type="primary" icon="Delete" @click="handleDelete(scope.row)"
+            v-hasPermi="['check:checkRecord:remove']">删除</el-button> -->
+          <el-button link type="info" icon="View" @click="handleDetail(scope.row)"
+            v-hasPermi="['check:checkRecord:query']">详情</el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+
+    <pagination v-show="total > 0" :total="total" v-model:page="queryParams.pageNum"
+      v-model:limit="queryParams.pageSize" @pagination="getList" />
+
+    <!--详情 -->
+    <el-dialog :title="title" v-model="open" width="1100px" append-to-body>
+      <Details v-model:form="form" />
+      <template #footer>
+        <div class="dialog-footer">
+          <!-- <el-button type="primary" @click="submitForm">确 定</el-button> -->
+          <el-button @click="cancel">取 消</el-button>
+        </div>
+      </template>
+    </el-dialog>
+  </div>
+</template>
+
+<script setup name="CheckRecord">
+import { listCheckRecord, getCheckRecord, delCheckRecord, addCheckRecord, updateCheckRecord } from "@/api/check/checkRecord"
+import Details from './components/Details.vue'
+const { proxy } = getCurrentInstance()
+const { check_severity, check_checked_level, check_problem_corrections_status, check_result, check_record_type } = proxy.useDict('check_severity', 'check_checked_level', 'check_problem_corrections_status', 'check_result', 'check_record_type')
+
+const checkRecordList = ref([])
+const open = ref(false)
+const loading = ref(true)
+const showSearch = ref(true)
+const ids = ref([])
+const single = ref(true)
+const multiple = ref(true)
+const total = ref(0)
+const title = ref("")
+const positiveList = ref([])
+const negativeList = ref([])
+
+const data = reactive({
+  form: {},
+  queryParams: {
+    pageNum: 1,
+    pageSize: 10,
+    checkResult: null,
+    problemDescription: null,
+    attachmentUrl: null,
+    checkedLevel: null,
+    checkTime: null,
+    documentCode: null,
+    documentName: null,
+    rectificationSuggestions: null,
+    scoreTotal: null,
+    comprehensiveEvaluation: null,
+    rectificationDeadline: null,
+    checkerId: null,
+    checkerName: null,
+    type: null,
+    severity: null,
+    isNeedCorrection: null,
+    correctionStatus: null,
+    checkResultDesc: null,
+    checkedLevelDesc: null,
+    typeDesc: null,
+    severityDesc: null,
+    correctionStatusDesc: null,
+    attachmentId: null,
+    score: null,
+    attachmentName: null
+  }
+})
+
+const { queryParams, form } = toRefs(data)
+
+/** 查询检查记录列表 */
+function getList() {
+  loading.value = true
+  listCheckRecord(queryParams.value).then(response => {
+    checkRecordList.value = response.rows
+    total.value = response.total
+    loading.value = false
+  })
+}
+
+// 取消按钮
+function cancel() {
+  open.value = false
+  reset()
+}
+
+// 表单重置
+function reset() {
+  form.value = {
+    tenantId: null,
+    revision: null,
+    createBy: null,
+    createTime: null,
+    updateBy: null,
+    updateTime: null,
+    checkResult: null,
+    problemDescription: null,
+    attachmentUrl: null,
+    remark: null,
+    checkedLevel: null,
+    checkTime: null,
+    id: null,
+    documentCode: null,
+    documentName: null,
+    rectificationSuggestions: null,
+    scoreTotal: null,
+    comprehensiveEvaluation: null,
+    rectificationDeadline: null,
+    checkerId: null,
+    checkerName: null,
+    type: null,
+    severity: null,
+    isNeedCorrection: null,
+    correctionStatus: null,
+    checkResultDesc: null,
+    checkedLevelDesc: null,
+    typeDesc: null,
+    severityDesc: null,
+    correctionStatusDesc: null,
+    attachmentId: null,
+    score: null,
+    attachmentName: null
+  }
+  proxy.resetForm("checkRecordRef")
+}
+
+/** 搜索按钮操作 */
+function handleQuery() {
+  queryParams.value.pageNum = 1
+  getList()
+}
+
+/** 重置按钮操作 */
+function resetQuery() {
+  proxy.resetForm("queryRef")
+  handleQuery()
+}
+
+// 多选框选中数据
+function handleSelectionChange(selection) {
+  ids.value = selection.map(item => item.id)
+  single.value = selection.length != 1
+  multiple.value = !selection.length
+}
+
+/** 新增按钮操作 */
+function handleAdd() {
+  reset()
+  open.value = true
+  title.value = "添加检查记录"
+}
+
+/** 查看详情 */
+function handleDetail(row) {
+  reset()
+  const _id = row.id || ids.value
+  getCheckRecord(_id).then(response => {
+    form.value = response.data
+    const list = response.data.checkProjectItemList || []
+    // todo
+    positiveList.value = list.filter(i => i.evaluationType === '1')
+    negativeList.value = list.filter(i => i.evaluationType === '0')
+    open.value = true
+    title.value = "巡检单详情"
+  })
+}
+
+/** 修改 */
+function handleUpdate(row) {
+  reset()
+  const _id = row.id || ids.value
+  getCheckRecord(_id).then(response => {
+    form.value = response.data
+    open.value = true
+    title.value = "修改"
+  })
+}
+
+
+const viewText = (...rest) => {
+  if (Array.isArray(rest) && rest.length) {
+    return rest.reduce((cur, acc) => {
+      if (acc) {
+        cur += cur ? `/${acc}` : acc
+      }
+      return cur
+    }, '')
+  }
+  return '-'
+}
+
+/** 提交按钮 */
+function submitForm() {
+  proxy.$refs["checkRecordRef"].validate(valid => {
+    if (valid) {
+      if (form.value.id != null) {
+        updateCheckRecord(form.value).then(response => {
+          proxy.$modal.msgSuccess("修改成功")
+          open.value = false
+          getList()
+        })
+      } else {
+        addCheckRecord(form.value).then(response => {
+          proxy.$modal.msgSuccess("新增成功")
+          open.value = false
+          getList()
+        })
+      }
+    }
+  })
+}
+
+/** 删除按钮操作 */
+function handleDelete(row) {
+  const _ids = row.id || ids.value
+  proxy.$modal.confirm('是否确认删除数据项？').then(function () {
+    return delCheckRecord(_ids)
+  }).then(() => {
+    getList()
+    proxy.$modal.msgSuccess("删除成功")
+  }).catch(() => { })
+}
+
+/** 导出按钮操作 */
+function handleExport() {
+  proxy.download('check/checkRecord/export', {
+    ...queryParams.value
+  }, `checkRecord_${new Date().getTime()}.xlsx`)
+}
+
+getList()
+</script>
+
+<style>
+.record-card {
+  margin-bottom: 12px;
+  padding: 8px 12px;
+  /* border-left: 4px solid #52c41a;    */
+  /* background: #f6ffed; */
+  border-radius: 4px;
+}
+
+.record-line {
+  display: flex;
+  margin-bottom: 4px;
+  font-size: 14px;
+  line-height: 1.5;
+}
+
+.label {
+  color: #666;
+  margin-right: 6px;
+  flex-shrink: 0;
+  width: 70px;
+}
+
+.value {
+  color: #333;
+  flex: 1;
+}
+</style>

src/views/check/checkTask/index copy.vue

@@ -0,0 +1,522 @@
+<template>
+  <div class="app-container">
+    <el-form :model="queryParams" ref="queryRef" :inline="true" v-show="showSearch" label-width="100px">
+
+      <el-form-item label="任务名称" prop="taskName">
+        <el-input v-model="queryParams.taskName" placeholder="请输入任务名称" clearable style="width: 200px;" />
+      </el-form-item>
+      <el-form-item label="被检查级别" prop="checkedLevel">
+        <el-select v-model="queryParams.checkedLevel" placeholder="请选择被检查级别" clearable style="width: 200px;">
+          <el-option v-for="dict in check_checked_level" :key="dict.value" :label="dict.label" :value="dict.value" />
+        </el-select>
+      </el-form-item>
+      <el-form-item label="任务状态" prop="status">
+        <el-select v-model="queryParams.status" placeholder="请选择任务状态" clearable style="width: 200px;">
+          <el-option v-for="dict in check_task_status" :key="dict.value" :label="dict.label" :value="dict.value" />
+        </el-select>
+      </el-form-item>
+
+
+      <el-form-item>
+        <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
+        <el-button icon="Refresh" @click="resetQuery">重置</el-button>
+      </el-form-item>
+    </el-form>
+
+    <el-row :gutter="10" class="mb8">
+
+      <el-col :span="1.5">
+        <el-button type="primary" plain icon="Plus" @click="handleAdd"
+          v-hasPermi="['check:checkRecord:add']">新增</el-button>
+      </el-col>
+      <el-col :span="1.5">
+        <el-button type="danger" plain icon="Delete" :disabled="multiple" @click="handleDelete">删除</el-button>
+      </el-col>
+
+      <!-- <right-toolbar v-model:showSearch="showSearch" @queryTable="getList"></right-toolbar> -->
+    </el-row>
+
+    <el-table v-loading="loading" :data="checkRecordList" @selection-change="handleSelectionChange">
+      <el-table-column type="selection" width="55" align="center" />
+      <el-table-column label="任务编号" align="center" prop="taskCode" />
+      <el-table-column label="任务名称" align="center" prop="taskName" />
+      <el-table-column label="开始时间" align="center" prop="checkStartTime" />
+      <el-table-column label="结束时间" align="center" prop="checkEndTime" />
+      <el-table-column label="任务状态" align="center" prop="statusDesc">
+        <!-- <template #default="scope">
+          <div class="color-div">
+            <div class="round" :style="{ backgroundColor: scope.row.statusDesc === '已结束' ? '#6BC77F' : '#5EA4FF' }">
+            </div>
+            <div>{{ scope.row.statusDesc }}</div>
+          </div>
+  
+        </template> -->
+      </el-table-column>
+      <el-table-column label="发布人" align="center" prop="createBy" />
+      <el-table-column label="发布日期" align="center" prop="createTime">
+        <template #default="scope">
+          {{ moment(scope.row.createTime).format('YYYY-MM-DD') }}
+        </template>
+      </el-table-column>
+      <el-table-column label="被检查级别" align="center" prop="checkedLevelDesc">
+        <!-- <template #default="scope">
+          <dict-tag :options="check_checked_level" :value="scope.row.checkedLevel" />
+        </template> -->
+      </el-table-column>
+      <el-table-column label="操作" align="center" class-name="small-padding fixed-width" width="150">
+        <template #default="scope">
+          <el-button link type="primary" icon="View" @click="handleDetail(scope.row)"
+            v-hasPermi="['check:checkRecord:query']">详情</el-button>
+          <el-button link type="primary" icon="Delete" @click="handleDelete(scope.row)"
+            v-hasPermi="['check:checkRecord:remove']">删除</el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+
+    <pagination v-show="total > 0" :total="total" v-model:page="queryParams.pageNum"
+      v-model:limit="queryParams.pageSize" @pagination="getList" />
+
+    <!--详情 -->
+    <el-dialog :title="title" v-model="open" width="1000px" append-to-body>
+      <el-form ref="checkRecordRef" :model="form" :rules="rules" label-width="100px">
+        <el-row>
+          <el-col :span="12" v-if="title !== '巡检任务新建'">
+            <el-form-item label="任务编号" prop="taskCode">
+              <el-input v-model="form.taskCode" placeholder="请输入任务编号" :disabled="true" />
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item label="任务名称" prop="taskName">
+              <el-input v-model="form.taskName" placeholder="请输入任务名称" :disabled="formDisabled" />
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item label="任务时间" prop="timeRange">
+              <div style="display: flex; align-items: center;">
+                <el-date-picker v-model="form.timeRange" type="daterange" range-separator="至" start-placeholder="开始日期"
+                  end-placeholder="结束日期" value-format="YYYY-MM-DD" style="width: 80%" :disabled="formDisabled" />
+                <span v-if="form.timeRange && form.timeRange.length === 2" style="margin-left: 10px">
+                  共 {{ calculateDayDiff(form.timeRange[0], form.timeRange[1]) }} 天
+                </span>
+              </div>
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item label="检查级别" prop="checkLevel">
+              <el-select v-model="form.checkLevel" placeholder="请选择检查级别" style="width: 100%"
+                @change="handleCheckLevelChange" :disabled="formDisabled">
+                <el-option v-for="dict in check_level" :key="dict.value" :label="dict.label" :value="dict.value" />
+              </el-select>
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item label="被检查级别" prop="checkedLevel">
+              <el-select v-model="form.checkedLevel" placeholder="请选择被检查级别" :disabled="true" style="width: 100%">
+                <el-option v-for="dict in check_checked_level" :key="dict.value" :label="dict.label"
+                  :value="dict.value" />
+              </el-select>
+            </el-form-item>
+          </el-col>
+
+
+          <el-col :span="12">
+            <el-form-item label="任务类型" prop="checkCategory">
+              <el-select v-model="form.checkCategory" placeholder="请选择任务类型" style="width: 100%"
+                :disabled="formDisabled">
+                <el-option v-for="dict in check_task_category" :key="dict.value" :label="dict.label"
+                  :value="dict.value" />
+              </el-select>
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item label="执行频率" prop="ruleType" :required="true">
+              <div style="display: flex;width: 100%;">
+                <el-select v-model="form.ruleType" placeholder="请选择执行频率" style="width: 100%" :disabled="formDisabled">
+                  <el-option v-for="dict in check_rule_type" :key="dict.value" :label="dict.label"
+                    :value="dict.value" />
+                </el-select>
+                <el-input-number v-model="form.ruleTypeNum" :default-value="1" :min="1" style="margin-left: 10px"
+                  :disabled="formDisabled" />
+                <span style="margin-left: 10px">次</span>
+              </div>
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item label="是否科内自查" prop="isSelfCheck">
+              <el-radio-group v-model="form.isSelfCheck" :disabled="formDisabled">
+                <el-radio :value="1">是</el-radio>
+                <el-radio :value="0">否</el-radio>
+              </el-radio-group>
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row :gutter="20">
+          <el-col :span="24">
+            <el-form-item label="任务简介" prop="description">
+              <el-input v-model="form.description" type="textarea" placeholder="请输入任务简介" :disabled="formDisabled" />
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row :gutter="20">
+          <el-col :span="24">
+            <el-form-item label="检查项目" prop="checkProjectItemList">
+              <div v-for="(item, index) in checkItemsList" :key="index" style="margin-bottom: 20px;">
+                <el-tree :ref="`tree_${index}`" :data="[item]" :props="{ children: 'list', label: 'name' }"
+                  show-checkbox node-key="code" :default-expand-all="true" :expand-on-click-node="false"
+                  :default-checked-keys="checkedCodes" :disabled="formDisabled">
+                  <template #default="{ node, data }">
+                    <span>{{ node.label }}</span>
+                  </template>
+                </el-tree>
+              </div>
+            </el-form-item>
+          </el-col>
+        </el-row>
+      </el-form>
+      <template #footer>
+        <div class="dialog-footer">
+          <el-button v-if="!formDisabled" type="primary" @click="submitForm">确 定</el-button>
+          <el-button @click="cancel">取 消</el-button>
+        </div>
+      </template>
+    </el-dialog>
+  </div>
+</template>
+
+<script setup name="CheckTask">
+import { listCheckTask, getCheckTask, delCheckTask, addCheckTask, getCheckProjectItemList } from "@/api/check/checkTask"
+import { computed } from "vue"
+import moment from 'moment'
+const { proxy } = getCurrentInstance()
+const { check_checked_level, check_task_status, check_level, check_rule_type, check_task_category } = proxy.useDict('check_checked_level', 'check_task_status', 'check_level', 'check_rule_type', 'check_task_category')
+
+
+/** 计算日期差 */
+const calculateDayDiff = (startDate, endDate) => {
+  const start = new Date(startDate)
+  const end = new Date(endDate)
+  const diffTime = Math.abs(end - start)
+  return Math.ceil(diffTime / (1000 * 60 * 60 * 24))
+}
+
+const checkRecordList = ref([])
+const open = ref(false)
+const loading = ref(true)
+const showSearch = ref(true)
+const ids = ref([])
+const single = ref(true)
+const multiple = ref(true)
+const total = ref(0)
+const title = ref("")
+
+
+const formDisabled = computed(() => {
+  return title.value === '巡检任务详情'
+})
+
+const data = reactive({
+  form: {
+    isSelfCheck: 0,
+    timeRange: [],
+    ruleTypeNum: 1,
+    checkProjectItemList: []
+  },
+  checkItemsList: [],
+  checkedCodes: [],//回显选中的节点
+  queryParams: {
+    pageNum: 1,
+    pageSize: 10,
+    checkResult: null,
+    problemDescription: null,
+    attachmentUrl: null,
+    checkedLevel: null,
+    documentCode: null,
+    taskName: null,
+    rectificationSuggestions: null,
+    comprehensiveEvaluation: null,
+    rectificationDeadline: null,
+    correctionStatus: null,
+    checkResultDesc: null,
+    correctionStatusDesc: null,
+    attachmentId: null,
+    score: null,
+    attachmentName: null
+  },
+  rules: {
+    taskCode: [
+      { required: false, message: "请输入任务编号", trigger: "blur" }
+    ],
+    taskName: [
+      { required: true, message: "请输入任务名称", trigger: "blur" }
+    ],
+    timeRange: [
+      { required: true, message: "请选择任务时间范围", trigger: "change" }
+    ],
+    checkLevel: [
+      { required: true, message: "请选择检查级别", trigger: "change" }
+    ],
+    checkedLevel: [
+      { required: true, message: "请选择被检查级别", trigger: "change" }
+    ],
+    ruleType: [
+      { required: true, message: "请选择执行频率", trigger: "change" }
+    ],
+    ruleTypeNum: [
+      { required: true, message: "请输入频率值", trigger: "change" },
+    ],
+    checkCategory: [
+      { required: true, message: "请选择任务类型", trigger: "change" }
+    ],
+    description: [
+      { required: true, message: "请输入任务简介", trigger: "blur" }
+    ],
+  }
+})
+
+const { queryParams, form, rules, checkItemsList, checkedCodes } = toRefs(data)
+
+const handleCheckLevelChange = (val) => {
+  if ('STATION_LEVEL' == val) {
+    form.value.checkedLevel = 'DEPARTMENT_LEVEL'
+  }
+  if ('DEPARTMENT_LEVEL' == val) {
+    form.value.checkedLevel = 'TEAM_LEVEL'
+  }
+  if ('TEAM_LEVEL' == val) {
+    form.value.checkedLevel = 'PERSONNEL_LEVEL'
+  }
+  getCheckItem(val)
+}
+
+function getCheckItem(level) {
+  getCheckProjectItemList(level).then(response => {
+    let res = response.data
+    let disabledList = res.map(item => ({
+      ...item,
+      disabled: true,
+      list: item.list?.map(child => ({
+        ...child,
+        disabled: true,
+        list: child.list?.map(grandChild => ({
+          ...grandChild,
+          disabled: true,
+        }))
+      }))
+    }))
+    checkItemsList.value = formDisabled.value ? disabledList : res;
+    checkedCodes.value = res.flatMap(item => item.list?.flatMap(child => child.list?.map(grandChild => grandChild.code)) || [])
+
+  })
+
+}
+
+
+/** 查询检查记录列表 */
+function getList() {
+  loading.value = true
+  listCheckTask(queryParams.value).then(response => {
+    checkRecordList.value = response.rows
+    total.value = response.total
+    loading.value = false
+  })
+}
+
+// 取消按钮
+function cancel() {
+  open.value = false
+  reset()
+}
+
+// 表单重置
+function reset() {
+  form.value = {
+    isSelfCheck: 0,
+    timeRange: [],
+    ruleTypeNum: 1,
+    checkProjectItemList: []
+  }
+  proxy.resetForm("checkRecordRef")
+}
+
+/** 搜索按钮操作 */
+function handleQuery() {
+  queryParams.value.pageNum = 1
+  getList()
+}
+
+/** 重置按钮操作 */
+function resetQuery() {
+  proxy.resetForm("queryRef")
+  handleQuery()
+}
+
+// 多选框选中数据
+function handleSelectionChange(selection) {
+  ids.value = selection.map(item => item.id)
+  single.value = selection.length != 1
+  multiple.value = !selection.length
+}
+
+/** 新增按钮操作 */
+function handleAdd() {
+  reset()
+  open.value = true
+  title.value = "巡检任务新建"
+  getCheckItem()
+}
+
+/** 查看详情 */
+function handleDetail(row) {
+  reset()
+  const _id = row.id || ids.value
+  getCheckTask(_id).then(response => {
+    let res = response.data;
+
+    form.value = {
+      ...res,
+      timeRange: [res.checkStartTime, res.checkEndTime]
+    }
+    const list = response.data.checkProjectItemList || [];
+
+
+
+    // 根据checkProjectItemList回显el-tree选中状态
+    checkedCodes.value = list.map(item => item.projectCode);
+
+
+    open.value = true
+    title.value = "巡检任务详情"
+    getCheckItem(res.checkLevel)
+  })
+}
+
+
+
+/** 提交按钮 */
+function submitForm() {
+  proxy.$refs["checkRecordRef"].validate(valid => {
+    if (valid) {
+      const selectedItems = []
+      const treeElements = document.querySelectorAll('.el-tree')
+      treeElements.forEach((tree, index) => {
+        const treeInstance = proxy.$refs[`tree_${index}`][0]
+
+        const checkedNodes = treeInstance.getCheckedNodes(true)
+
+        checkedNodes.forEach(node => {
+          const path = []
+
+          // 从checkItemsList中查找当前节点及其父节点
+          const findNodeAndParents = (items, targetCode) => {
+            for (const item of items) {
+              if (item.code === targetCode) {
+                path.unshift({
+                  code: item.code,
+                  name: item.name
+                })
+                return true
+              }
+              if (item.list && item.list.length > 0) {
+                if (findNodeAndParents(item.list, targetCode)) {
+                  path.unshift({
+                    code: item.code,
+                    name: item.name
+                  })
+                  return true
+                }
+              }
+            }
+            return false
+          }
+
+          findNodeAndParents(checkItemsList.value, node.code)
+
+          selectedItems.push({
+            projectCode: node.code,
+            projectName: node.name,
+            categoryCodeOne: path[0]?.code || '',
+            categoryNameOne: path[0]?.name || '',
+            categoryCodeTwo: path[1]?.code || '',
+            categoryNameTwo: path[1]?.name || '',
+          })
+        })
+      })
+
+      let res = {
+        ...form.value,
+        checkStartTime: form.value.timeRange[0],
+        checkEndTime: form.value.timeRange[1],
+        checkLevelDesc: check_level.value.find(item => item.value == form.value.checkLevel)?.label,
+        checkedLevelDesc: check_level.value.find(item => item.value == form.value.checkedLevel)?.label,
+        checkCategoryDesc: check_task_category.value.find(item => item.value == form.value.checkCategory)?.label,
+        ruleTypeDesc: check_rule_type.value.find(item => item.value == form.value.ruleType)?.label,
+        checkProjectItemList: selectedItems
+      }
+      console.log(res, "res")
+      debugger
+      addCheckTask(res).then(response => {
+        proxy.$modal.msgSuccess("新增成功")
+        open.value = false
+        getList()
+      })
+    }
+  })
+}
+
+/** 删除按钮操作 */
+function handleDelete(row) {
+  const _ids = row.id || ids.value
+  proxy.$modal.confirm('是否确认删除数据项？').then(function () {
+    return delCheckTask(_ids)
+  }).then(() => {
+    getList()
+    proxy.$modal.msgSuccess("删除成功")
+  }).catch(() => { })
+}
+
+
+getList()
+</script>
+
+<style scoped>
+.record-card {
+  margin-bottom: 12px;
+  padding: 8px 12px;
+  /* border-left: 4px solid #52c41a;    */
+  /* background: #f6ffed; */
+  border-radius: 4px;
+}
+
+.round {
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  margin-right: 5px;
+}
+
+.color-div {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: center;
+}
+
+.record-line {
+  display: flex;
+  margin-bottom: 4px;
+  font-size: 14px;
+  line-height: 1.5;
+}
+
+.label {
+  color: #666;
+  margin-right: 6px;
+  flex-shrink: 0;
+  width: 70px;
+}
+
+.value {
+  color: #333;
+  flex: 1;
+}
+</style>

src/views/check/checkTask/index.vue

@@ -0,0 +1,579 @@
+<template>
+  <div class="app-container">
+    <el-form :model="queryParams" ref="queryRef" :inline="true" v-show="showSearch" label-width="100px">
+
+      <el-form-item label="任务名称" prop="taskName">
+        <el-input v-model="queryParams.taskName" placeholder="请输入任务名称" clearable style="width: 200px;" />
+      </el-form-item>
+      <el-form-item label="被检查级别" prop="checkedLevel">
+        <el-select v-model="queryParams.checkedLevel" placeholder="请选择被检查级别" clearable style="width: 200px;">
+          <el-option v-for="dict in check_checked_level" :key="dict.value" :label="dict.label" :value="dict.value" />
+        </el-select>
+      </el-form-item>
+      <el-form-item label="任务状态" prop="status">
+        <el-select v-model="queryParams.status" placeholder="请选择任务状态" clearable style="width: 200px;">
+          <el-option v-for="dict in check_task_status" :key="dict.value" :label="dict.label" :value="dict.value" />
+        </el-select>
+      </el-form-item>
+
+
+      <el-form-item>
+        <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
+        <el-button icon="Refresh" @click="resetQuery">重置</el-button>
+      </el-form-item>
+    </el-form>
+
+    <el-row :gutter="10" class="mb8">
+
+      <el-col :span="1.5">
+        <el-button type="primary" plain icon="Plus" @click="handleAdd"
+          v-hasPermi="['check:checkRecord:add']">新增</el-button>
+      </el-col>
+      <el-col :span="1.5">
+        <el-button type="danger" plain icon="Delete" :disabled="multiple" @click="handleDelete">删除</el-button>
+      </el-col>
+
+      <!-- <right-toolbar v-model:showSearch="showSearch" @queryTable="getList"></right-toolbar> -->
+    </el-row>
+
+    <el-table v-loading="loading" :data="checkRecordList" @selection-change="handleSelectionChange">
+      <el-table-column type="selection" width="55" align="center" />
+      <el-table-column label="任务编号" align="center" prop="taskCode" />
+      <el-table-column label="任务名称" align="center" prop="taskName" />
+      <el-table-column label="开始时间" align="center" prop="checkStartTime" />
+      <el-table-column label="结束时间" align="center" prop="checkEndTime" />
+      <el-table-column label="任务状态" align="center" prop="statusDesc">
+        <!-- <template #default="scope">
+          <div class="color-div">
+            <div class="round" :style="{ backgroundColor: scope.row.statusDesc === '已结束' ? '#6BC77F' : '#5EA4FF' }">
+            </div>
+            <div>{{ scope.row.statusDesc }}</div>
+          </div>
+  
+        </template> -->
+      </el-table-column>
+      <el-table-column label="发布人" align="center" prop="createBy" />
+      <el-table-column label="发布日期" align="center" prop="createTime">
+        <template #default="scope">
+          {{ moment(scope.row.createTime).format('YYYY-MM-DD') }}
+        </template>
+      </el-table-column>
+      <el-table-column label="被检查级别" align="center" prop="checkedLevelDesc">
+        <!-- <template #default="scope">
+          <dict-tag :options="check_checked_level" :value="scope.row.checkedLevel" />
+        </template> -->
+      </el-table-column>
+      <el-table-column label="操作" align="center" class-name="small-padding fixed-width" width="150">
+        <template #default="scope">
+          <el-button link type="primary" icon="View" @click="handleDetail(scope.row)"
+            v-hasPermi="['check:checkRecord:query']">详情</el-button>
+          <el-button link type="primary" icon="Delete" @click="handleDelete(scope.row)"
+            v-hasPermi="['check:checkRecord:remove']">删除</el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+
+    <pagination v-show="total > 0" :total="total" v-model:page="queryParams.pageNum"
+      v-model:limit="queryParams.pageSize" @pagination="getList" />
+
+    <!--详情 -->
+    <el-dialog :title="title" v-model="open" width="1000px" append-to-body>
+      <el-form ref="checkRecordRef" :model="form" :rules="rules" label-width="100px">
+        <el-row>
+          <el-col :span="12" v-if="title !== '巡检任务新建'">
+            <el-form-item label="任务编号" prop="taskCode">
+              <el-input v-model="form.taskCode" placeholder="请输入任务编号" :disabled="true" />
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item label="任务名称" prop="taskName">
+              <el-input v-model="form.taskName" placeholder="请输入任务名称" :disabled="formDisabled" />
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item label="任务时间" prop="timeRange">
+              <div style="display: flex; align-items: center;">
+                <el-date-picker v-model="form.timeRange" type="daterange" range-separator="至" start-placeholder="开始日期"
+                  end-placeholder="结束日期" value-format="YYYY-MM-DD" style="width: 80%" :disabled="formDisabled" />
+                <span v-if="form.timeRange && form.timeRange.length === 2" style="margin-left: 10px">
+                  共 {{ calculateDayDiff(form.timeRange[0], form.timeRange[1]) }} 天
+                </span>
+              </div>
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item label="检查级别" prop="checkLevel">
+              <el-select v-model="form.checkLevel" placeholder="请选择检查级别" style="width: 100%"
+                @change="handleCheckLevelChange" :disabled="formDisabled">
+                <el-option v-for="dict in check_level" :key="dict.value" :label="dict.label" :value="dict.value" />
+              </el-select>
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item label="被检查级别" prop="checkedLevel">
+              <el-select v-model="form.checkedLevel" placeholder="请选择被检查级别" :disabled="true" style="width: 100%">
+                <el-option v-for="dict in check_checked_level" :key="dict.value" :label="dict.label"
+                  :value="dict.value" />
+              </el-select>
+            </el-form-item>
+          </el-col>
+
+
+          <el-col :span="12">
+            <el-form-item label="任务类型" prop="checkCategory">
+              <el-select v-model="form.checkCategory" placeholder="请选择任务类型" style="width: 100%"
+                :disabled="formDisabled">
+                <el-option v-for="dict in check_task_category" :key="dict.value" :label="dict.label"
+                  :value="dict.value" />
+              </el-select>
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item label="执行频率" prop="ruleType" :required="true">
+              <div style="display: flex;width: 100%;">
+                <el-select v-model="form.ruleType" placeholder="请选择执行频率" style="width: 100%" :disabled="true">
+                  <el-option v-for="dict in check_rule_type" :key="dict.value" :label="dict.label"
+                    :value="dict.value" />
+                </el-select>
+                <el-input-number v-model="form.ruleTypeNum" :default-value="1" :min="1" style="margin-left: 10px"
+                  :disabled="formDisabled" />
+                <span style="margin-left: 10px">次</span>
+              </div>
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item label="是否科内自查" prop="isSelfCheck">
+              <el-radio-group v-model="form.isSelfCheck" :disabled="formDisabled">
+                <el-radio :value="1">是</el-radio>
+                <el-radio :value="0">否</el-radio>
+              </el-radio-group>
+            </el-form-item>
+          </el-col>
+          <el-col :span="12" v-if="form.isSelfCheck === 1">
+            <el-form-item label="自查科室" prop="selfCheckDeptId" :required="true">
+              <el-select v-model="form.selfCheckDeptId" placeholder="请选择自查科室" style="width: 100%" :disabled="formDisabled">
+                <el-option v-for="dept in deptOptions" :key="dept.deptId" :label="dept.deptName" :value="dept.deptId" />
+              </el-select>
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row :gutter="20">
+          <el-col :span="24">
+            <el-form-item label="任务简介" prop="description">
+              <el-input v-model="form.description" type="textarea" placeholder="请输入任务简介" :disabled="formDisabled" />
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row :gutter="20">
+          <el-col :span="24">
+            <el-form-item label="检查项目" prop="checkProjectItemList">
+              <el-tree style="width: 100%;" ref="tree" :data="checkItemsList"
+                :props="{ children: 'list', label: 'name' }" show-checkbox node-key="code" :default-expand-all="true"
+                :expand-on-click-node="false" :default-checked-keys="checkedCodes" :disabled="formDisabled">
+                <template #default="{ node, data }">
+                  <span>{{ node.label }}</span>
+                </template>
+              </el-tree>
+            </el-form-item>
+          </el-col>
+        </el-row>
+      </el-form>
+      <template #footer>
+        <div class="dialog-footer">
+          <el-button v-if="!formDisabled" type="primary" @click="submitForm">确 定</el-button>
+          <el-button @click="cancel">取 消</el-button>
+        </div>
+      </template>
+    </el-dialog>
+  </div>
+</template>
+
+<script setup name="CheckTask">
+import { listCheckTask, getCheckTask, delCheckTask, addCheckTask, getCheckProjectItemList } from "@/api/check/checkTask"
+import { listDept } from "@/api/system/dept"
+import { computed } from "vue"
+import moment from 'moment'
+
+const { proxy } = getCurrentInstance()
+const { check_checked_level, check_task_status, check_level, check_rule_type, check_task_category } = proxy.useDict('check_checked_level', 'check_task_status', 'check_level', 'check_rule_type', 'check_task_category')
+
+
+/** 计算日期差 */
+const calculateDayDiff = (startDate, endDate) => {
+  const start = new Date(startDate)
+  const end = new Date(endDate)
+  const diffTime = Math.abs(end - start)
+  return Math.ceil(diffTime / (1000 * 60 * 60 * 24))
+}
+
+const checkRecordList = ref([])
+const open = ref(false)
+const loading = ref(true)
+const showSearch = ref(true)
+const ids = ref([])
+const single = ref(true)
+const multiple = ref(true)
+const total = ref(0)
+const title = ref("")
+const deptOptions = ref([])
+
+
+const formDisabled = computed(() => {
+  return title.value === '巡检任务详情'
+})
+
+const data = reactive({
+  form: {
+    isSelfCheck: 0,
+    selfCheckDeptId: "",
+    timeRange: [],
+    ruleType: "DAY",
+    ruleTypeNum: 1,
+    checkProjectItemList: []
+  },
+  checkItemsList: [],
+  checkedCodes: [],//回显选中的节点
+  queryParams: {
+    pageNum: 1,
+    pageSize: 10,
+    checkResult: null,
+    problemDescription: null,
+    attachmentUrl: null,
+    checkedLevel: null,
+    documentCode: null,
+    taskName: null,
+    rectificationSuggestions: null,
+    comprehensiveEvaluation: null,
+    rectificationDeadline: null,
+    correctionStatus: null,
+    checkResultDesc: null,
+    correctionStatusDesc: null,
+    attachmentId: null,
+    score: null,
+    attachmentName: null
+  },
+  rules: {
+    taskCode: [
+      { required: false, message: "请输入任务编号", trigger: "blur" }
+    ],
+    taskName: [
+      { required: true, message: "请输入任务名称", trigger: "blur" }
+    ],
+    timeRange: [
+      { required: true, message: "请选择任务时间范围", trigger: "change" }
+    ],
+    checkLevel: [
+      { required: true, message: "请选择检查级别", trigger: "change" }
+    ],
+    checkedLevel: [
+      { required: true, message: "请选择被检查级别", trigger: "change" }
+    ],
+    ruleType: [
+      { required: true, message: "请选择执行频率", trigger: "change" }
+    ],
+    ruleTypeNum: [
+      { required: true, message: "请输入频率值", trigger: "change" },
+    ],
+    checkCategory: [
+      { required: true, message: "请选择任务类型", trigger: "change" }
+    ],
+    description: [
+      { required: true, message: "请输入任务简介", trigger: "blur" }
+    ],
+    selfCheckDeptId: [
+      { required: true, message: "请选择自查科室", trigger: "change" }
+    ],
+  }
+})
+
+const { queryParams, form, rules, checkItemsList, checkedCodes } = toRefs(data)
+
+const handleCheckLevelChange = (val) => {
+  if ('STATION_LEVEL' == val) {
+    form.value.checkedLevel = 'DEPARTMENT_LEVEL'
+  }
+  if ('DEPARTMENT_LEVEL' == val) {
+    form.value.checkedLevel = 'TEAM_LEVEL'
+  }
+  if ('TEAM_LEVEL' == val) {
+    form.value.checkedLevel = 'PERSONNEL_LEVEL'
+  }
+  getCheckItem(val)
+}
+
+function getCheckItem(level) {
+  if (!level) {
+    return
+  }
+  getCheckProjectItemList(level).then(response => {
+    let res = response.data
+
+    if (formDisabled.value) {
+      // 详情查看模式：只保留被选中的节点，并禁用所有节点
+      const filteredList = res.map(item => {
+        // 过滤二级节点
+        const filteredChildren = item.list?.map(child => {
+          // 过滤三级节点
+          const filteredGrandChildren = child.list?.filter(grandChild =>
+            checkedCodes.value.includes(grandChild.code)
+          )
+
+          // 如果三级节点有选中的，保留该二级节点
+          if (filteredGrandChildren && filteredGrandChildren.length > 0) {
+            return {
+              ...child,
+              disabled: true,
+              list: filteredGrandChildren.map(grandChild => ({
+                ...grandChild,
+                disabled: true,
+              }))
+            }
+          }
+          return null
+        }).filter(Boolean)
+
+        // 如果二级节点有选中的，保留该一级节点
+        if (filteredChildren && filteredChildren.length > 0) {
+          return {
+            ...item,
+            disabled: true,
+            list: filteredChildren
+          }
+        }
+        return null
+      }).filter(Boolean)
+
+      checkItemsList.value = filteredList
+    } else {
+      // 编辑模式：显示所有节点
+      checkItemsList.value = res
+      checkedCodes.value = res.flatMap(item => item.list?.flatMap(child => child.list?.map(grandChild => grandChild.code)) || [])
+    }
+  })
+}
+
+
+/** 获取科室列表 */
+function getDeptList() {
+  listDept().then(response => {
+    deptOptions.value = response.data.filter(item => item.deptType === 'DEPARTMENT') || []
+  })
+}
+
+/** 查询检查记录列表 */
+function getList() {
+  loading.value = true
+  listCheckTask(queryParams.value).then(response => {
+    checkRecordList.value = response.rows
+    total.value = response.total
+    loading.value = false
+  })
+}
+
+getList()
+getDeptList()
+
+// 取消按钮
+function cancel() {
+  open.value = false
+  reset()
+}
+
+// 表单重置
+function reset() {
+  form.value = {
+    isSelfCheck: 0,
+    timeRange: [],
+    ruleType: "DAY",
+    ruleTypeNum: 1,
+    checkProjectItemList: []
+  }
+  checkItemsList.value = []
+  checkedCodes.value = []
+  proxy.resetForm("checkRecordRef")
+}
+
+/** 搜索按钮操作 */
+function handleQuery() {
+  queryParams.value.pageNum = 1
+  getList()
+}
+
+/** 重置按钮操作 */
+function resetQuery() {
+  proxy.resetForm("queryRef")
+  handleQuery()
+}
+
+// 多选框选中数据
+function handleSelectionChange(selection) {
+  ids.value = selection.map(item => item.id)
+  single.value = selection.length != 1
+  multiple.value = !selection.length
+}
+
+/** 新增按钮操作 */
+function handleAdd() {
+  reset()
+  open.value = true
+  title.value = "巡检任务新建"
+  getCheckItem()
+}
+
+/** 查看详情 */
+function handleDetail(row) {
+  reset()
+  const _id = row.id || ids.value
+  getCheckTask(_id).then(response => {
+    let res = response.data;
+
+    form.value = {
+      ...res,
+      timeRange: [res.checkStartTime, res.checkEndTime]
+    }
+    const list = response.data.checkProjectItemList || [];
+
+
+
+    // 根据checkProjectItemList回显el-tree选中状态
+    checkedCodes.value = list.map(item => item.projectCode);
+    console.log(checkedCodes.value, "checkedCodes.value")
+
+    open.value = true
+    title.value = "巡检任务详情"
+    getCheckItem(res.checkLevel)
+  })
+}
+
+
+
+/** 提交按钮 */
+function submitForm() {
+  proxy.$refs["checkRecordRef"].validate(valid => {
+    if (valid) {
+      const selectedItems = []
+
+      const treeInstance = proxy.$refs.tree
+
+      const checkedNodes = treeInstance.getCheckedNodes(true)
+
+      checkedNodes.forEach(node => {
+        const path = []
+
+        // 从checkItemsList中查找当前节点及其父节点
+        const findNodeAndParents = (items, targetCode) => {
+          for (const item of items) {
+            if (item.code === targetCode) {
+              path.unshift({
+                code: item.code,
+                name: item.name
+              })
+              return true
+            }
+            if (item.list && item.list.length > 0) {
+              if (findNodeAndParents(item.list, targetCode)) {
+                path.unshift({
+                  code: item.code,
+                  name: item.name
+                })
+                return true
+              }
+            }
+          }
+          return false
+        }
+
+        findNodeAndParents(checkItemsList.value, node.code)
+
+        selectedItems.push({
+          projectCode: node.code,
+          projectName: node.name,
+          categoryCodeOne: path[0]?.code || '',
+          categoryNameOne: path[0]?.name || '',
+          categoryCodeTwo: path[1]?.code || '',
+          categoryNameTwo: path[1]?.name || '',
+        })
+      })
+
+
+      let res = {
+        ...form.value,
+        checkStartTime: form.value.timeRange[0],
+        checkEndTime: form.value.timeRange[1],
+        checkLevelDesc: check_level.value.find(item => item.value == form.value.checkLevel)?.label,
+        checkedLevelDesc: check_checked_level.value.find(item => item.value == form.value.checkedLevel)?.label,
+        checkCategoryDesc: check_task_category.value.find(item => item.value == form.value.checkCategory)?.label,
+        selfCheckDeptName: deptOptions.value.find(item => item.deptId == form.value.selfCheckDeptId)?.deptName || '',
+        ruleTypeDesc: check_rule_type.value.find(item => item.value == form.value.ruleType)?.label,
+        checkProjectItemList: selectedItems
+      }
+      console.log(res, "res")
+
+      addCheckTask(res).then(response => {
+        proxy.$modal.msgSuccess("新增成功")
+        open.value = false
+        getList()
+      }).finally(() => {
+        reset()
+      })
+    }
+  })
+}
+
+/** 删除按钮操作 */
+function handleDelete(row) {
+  const _ids = row.id || ids.value
+  proxy.$modal.confirm('是否确认删除数据项？').then(function () {
+    return delCheckTask(_ids)
+  }).then(() => {
+    getList()
+    proxy.$modal.msgSuccess("删除成功")
+  }).catch(() => { })
+}
+
+
+getList()
+</script>
+
+<style scoped>
+.record-card {
+  margin-bottom: 12px;
+  padding: 8px 12px;
+  /* border-left: 4px solid #52c41a;    */
+  /* background: #f6ffed; */
+  border-radius: 4px;
+}
+
+.round {
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  margin-right: 5px;
+}
+
+.color-div {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: center;
+}
+
+.record-line {
+  display: flex;
+  margin-bottom: 4px;
+  font-size: 14px;
+  line-height: 1.5;
+}
+
+.label {
+  color: #666;
+  margin-right: 6px;
+  flex-shrink: 0;
+  width: 70px;
+}
+
+.value {
+  color: #333;
+  flex: 1;
+}
+</style>

src/views/dataBigScreen/abilityPortrait/components/dataDisplay.vue

@@ -0,0 +1,116 @@
+<template>
+	<view class="data_display">
+		<view class="bottom">
+			<view class="left">
+				<view class="title">{{ props.data.title }}</view>
+				<view class="left_num">{{ props.data.current_month }}</view>
+				<view class="left_compare">
+					<view :class="props.data.status ? 'left_compare_green' : 'left_compare_red'">
+						<img :src="props.data.status ? '/src/assets/icons/shang.png' : '/src/assets/icons/xia.png'" alt="" />
+						<view>较上月{{ props.data.status ? '增长' : '下降' }}</view>
+						<view style="margin-top: 4px">{{ props.data.percentage }}%</view>
+					</view>
+				</view>
+			</view>
+			<view class="right">
+				<img v-if="props.data.title == '安检员总数'" src="/src/assets/icons/duoren.png" alt="" />
+				<img v-else-if="props.data.title == '违规事件数'" src="/src/assets/icons/danger.png" alt="" />
+				<img v-else-if="props.data.title == '平均综合评分'" src="/src/assets/icons/wujiao.png" alt="" />
+				<img v-else src="/src/assets/icons/sousuo.png" alt="" />
+			</view>
+		</view>
+	</view>
+</template>
+
+<script setup lang="ts">
+	import { ref } from 'vue';
+	import * as echarts from 'echarts';
+	const props = defineProps({
+	  data: { type: Object, default: {} },
+	});
+</script>
+
+<style lang="scss" scoped>
+	.data_display {
+		background: linear-gradient(to bottom, rgba(8, 97, 117, 0) 0%, #13a2d6 200%);
+		margin-right: 10px;
+		color: #fff;
+		flex: 1;
+		&:nth-child(1) {
+			margin-left: 10px;
+		}
+		.top {
+			position: relative;
+			display: flex;
+			justify-content: space-between;
+			align-items: center;
+			flex-wrap: nowrap;
+			flex-direction: row;
+			z-index: 1;
+			align-content: flex-start;
+			background: url(/src/assets/images/titlebg-4340cf1c.png);
+			background-size: 100% 100%;
+			font-weight: 400;
+			font-size: 14px;
+			color: #fbffff;
+			padding: 8px 20px;
+			margin-bottom: 8px;
+		}
+		.bottom {
+			width: 100%;
+			display: flex;
+			justify-content: space-between;
+			align-items: center;
+			padding: 0 10px;
+			position: relative;
+			.left {
+				display: flex;
+				flex-direction: column;
+				margin-left: 40px;
+				.title {
+					margin-bottom: 5px;
+				}
+				.left_num {
+					font-size: 18px;
+					font-weight: 800;
+				}
+				.left_compare {
+					margin-top: 3px;
+					font-size: 13px;
+					padding-bottom: 8px;
+					.left_compare_green {
+						display: flex;
+						align-items: center;
+						color: greenyellow;
+					}
+					.left_compare_red {
+						display: flex;
+						align-items: center;
+						color: orangered;
+					}
+					img {
+						width: 15px;
+						height: 15px;
+						padding-top: 2px;
+					}
+				}
+			}
+			.right {
+				width: 40px;
+				height: 40px;
+				background: #4a565b;
+				position: absolute;
+				right: 20px;
+				top: 8px;
+				border-radius: 6px;
+				display: flex;
+				justify-content: center;
+				align-items: center;
+				img {
+					width: 15px;
+					height: 15px;
+				}
+			}
+		}
+	}
+</style>

src/views/dataBigScreen/abilityPortrait/index.vue

@@ -0,0 +1,951 @@
+<template>
+	<view class="abilityPortrait">
+		<view class="root">
+			<DataDisplay v-for="(item, index) in data.list" :data="item" :key="index" />
+		</view>
+		<view class="top">
+			<view class="top_left">
+				<view class="_title">
+					<view class="title">能力画像</view>
+					<view class="filter_tag">
+						<el-select
+							v-model="selectVal.selectValue"
+							class="m-2"
+							placeholder="按时间筛选"
+							style="width: 240px;"
+						>
+							<el-option
+								v-for="item in selectData.selectOptions"
+								:key="item.value"
+								:label="item.label"
+								:value="item.value"
+							/>
+						</el-select>
+						<span v-for="(item, index) in activeList" :key="index" @click="changeActive(index)" :class="activeName == index ? 'label active' : 'label'">{{ item }}</span>
+					</view>
+				</view>
+				<view class="top_cont">
+					<view ref="top_Echart" class="top_Echart"></view>
+				</view>
+			</view>
+			<view class="top_right">
+				<view class="_title">
+					<view class="title">综合能力排名Top5</view>
+					<view class="filter_tag">
+						<el-select
+							v-model="selectVal.schemeValue"
+							class="m-2"
+							placeholder="选择筛选条件"
+							style="width: 240px"
+						>
+							<el-option
+								v-for="item in selectData.schemeOptions"
+								:key="item.value"
+								:label="item.label"
+								:value="item.value"
+							/>
+						</el-select>
+						<span class="label" @click="dialogVisible = true">自定义权重</span>
+					</view>
+				</view>
+				<view class="top_cont">
+					<view ref="echart_right" class="top_Echart"></view>
+				</view>
+			</view>
+		</view>
+		<view class="bottom">
+			<view class="bottom_left">
+				<view class="_title">
+					<view class="title">不同能力排名Top10</view>
+					<view class="filter_tag">
+						<el-select
+							v-model="selectVal.capacityValue"
+							class="m-2"
+							placeholder="选择筛选条件"
+							style="width: 240px"
+						>
+							<el-option
+								v-for="item in selectData.capacityOptions"
+								:key="item.value"
+								:label="item.label"
+								:value="item.value"
+							/>
+						</el-select>
+					</view>
+				</view>
+				<view class="bottom_cont">
+					<view class="cont_title">
+						<view class="serial_num">排名</view>
+						<view class="name">姓名</view>
+						<view class="progress">占比</view>
+						<view class="fraction">分数</view>
+					</view>
+					<view class="user_ranking">
+						<vue3-scroll-seamless
+							:classOptions="classOptions"
+							:dataList="data.capacityList"
+							class="scroll-wrap"
+						>
+							<view class="ranking_item" v-for="(item, index) in data.capacityList" :key="index">
+								<view class="serial_num" :style="index == 0 ? 'background: #ff3232' : (index == 1 ? 'background: #ff9800' : (index == 2 ? 'background: #ffd200' : 'background: #5470c6'))">{{ index + 1 }}</view>
+								<view class="name">{{ item.name }}</view>
+								<view class="progress"><el-progress :percentage="100" :format="format" /></view>
+								<view class="fraction">{{ item.fraction }}</view>
+							</view>
+						</vue3-scroll-seamless>
+					</view>
+				</view>
+			</view>
+			<view class="bottom_right">
+				<view class="_title">
+					<view class="title">综合能力分析</view>
+				</view>
+				<view class="bottom_cont">
+					<view ref="center_EchartAnalysis" class="bottom_Echart"></view>
+				</view>
+			</view>
+		</view>
+		<el-dialog v-model="dialogVisible" title="自定义权重设置" width="30%">
+			<view v-for="(item, index) in data.sliderList" :key="index">
+				<view>{{ item.label }}</view>
+				<view style="display: flex;align-items: center;">
+					<el-slider v-model="item.value" />
+					<view style="width: 55px;text-align: right;">{{ item.value || 0 }}%</view>
+				</view>
+			</view>
+			<template #footer>
+				<span class="dialog-footer">
+					<el-button @click="dialogVisible = false">取消</el-button>
+					<el-button type="primary" @click="handleConfirm">保存设置</el-button>
+				</span>
+			</template>
+		</el-dialog>
+	</view>
+</template>
+
+<script setup lang="ts">
+	import { reactive, ref, onMounted, onUnmounted } from 'vue';
+	import * as echarts from 'echarts';
+	import DataDisplay from './components/dataDisplay.vue';
+	const format = (percentage) => (percentage === 100 ? '' : ``);
+	const data = reactive({
+		capacityList: [
+			{
+				name: '程海超',
+				fraction: '98'
+			},
+			{
+				name: '邓海阳',
+				fraction: '95.3'
+			},
+			{
+				name: '陈涵亮',
+				fraction: '94'
+			},
+			{
+				name: '万浩波',
+				fraction: '92.5'
+			},
+			{
+				name: '徐涵衍',
+				fraction: '91'
+			},
+			{
+				name: '陈浩',
+				fraction: '90.8'
+			},
+			{
+				name: '宋鹏海',
+				fraction: '90.5'
+			},
+			{
+				name: '徐鸿哲',
+				fraction: '90.2'
+			},
+			{
+				name: '张雅',
+				fraction: '89.8'
+			},
+			{
+				name: '宋明宇',
+				fraction: '89.5'
+			},
+		],
+		list: [
+			{
+				title: '安检员总数',
+				percentage: '2',
+				current_month: '2100',
+				status: true
+			},
+			{
+				title: '平均综合评分',
+				percentage: '1.2',
+				current_month: '96.3',
+				status: true
+			},
+			{
+				title: '查获物品总数',
+				percentage: '1.2',
+				current_month: '5013',
+				status: true
+			},
+			{
+				title: '违规事件数',
+				percentage: '0.2',
+				current_month: '42',
+				status: false
+			}
+		],
+		sliderList: [{
+			label: '查获能力权重',
+			value: ''
+			},
+		 {
+		 	label: '业务知识学握程度权重',
+		 	value: ''
+		 },
+		 {
+		 	label: '设备熟练程度权重',
+		 	value: ''
+		 },
+		 {
+		 	label: '工作态度权重',
+		 	value: ''
+		 },
+		 {
+		 	label: '按章作业规范度权重',
+		 	value: ''
+		 }]
+	});
+	const selectData = reactive({
+		selectOptions: [
+			{
+				value: '1',
+				label: '近一周'
+			},
+			{
+				value: '2',
+				label: '近三个月'
+			},
+			{
+				value: '3',
+				label: '近一年'
+			},
+		],
+		capacityOptions: [
+			{
+				value: '0',
+				label: '综合能力'
+			},
+			{
+				value: '1',
+				label: '查获能力'
+			},
+			{
+				value: '2',
+				label: '作风建设'
+			},
+			{
+				value: '3',
+				label: '操作能力'
+			},
+			{
+				value: '4',
+				label: '业务知识'
+			},
+			{
+				value: '5',
+				label: '应急能力'
+			},
+		],
+		schemeOptions: [
+			{
+				value: '1',
+				label: '默认权重方案'
+			}
+		]
+	});
+	const classOptions = {
+	  limitMoveNum: 6,
+	};
+	const activeList = reactive(['科', '班组', '个人']);
+	const selectVal = reactive({
+		selectValue: '',
+		capacityValue: '0',
+		schemeValue: '1'
+	});
+	const activeName = ref('0');
+	const chart = ref(null);
+	const top_Echart = ref(null);
+	const chartOption = ref({
+		legend: {
+			data: ['旅检一科', '旅检二科', '旅检三科', '旅检四科'],
+			right: '10%',
+			top: '10%',
+			orient: 'vertical',
+			textStyle: {
+				color: '#fff',
+			},
+		},
+		radar: {
+			indicator: [
+				{ name: '查获能力', max: 100 },
+				{ name: '作风建设', max: 100 },
+				{ name: '操作能力', max: 100 },
+				{ name: '应急能力', max: 100 },
+				{ name: '业务知识', max: 100 },
+			],
+			center: ['45%', '50%'],
+			name: {
+				// 修改指标名称的文本样式
+				textStyle: {
+					color: '#fff', // 设置文字颜色为红色
+					fontSize: 12, // 设置文字大小
+					fontWeight: 'bold' // 设置文字粗细
+				}
+			}
+		},
+		series: [
+			{
+				name: 'Budget vs spending',
+				type: 'radar',
+				data: [
+					{
+						value: [80, 70, 75, 80, 80, 80],
+						name: '旅检一科',
+						label: {
+							show: true,
+							color: '#fff',
+						},
+						areaStyle: {
+							color: '#a9bdff',
+						},
+						itemStyle: {
+							color: 'blue',
+						},
+					},
+					{
+						value: [8, 50, 25, 70, 60, 80],
+						name: '旅检二科',
+						label: {
+							show: true,
+							color: '#fff',
+						},
+						areaStyle: {
+							color: '#ffff7f',
+						},
+						itemStyle: {
+							color: 'yellow',
+						},
+					},
+					{
+						value: [30, 40, 15, 40, 70, 60],
+						name: '旅检三科',
+						label: {
+							show: true,
+							color: '#fff',
+						},
+						areaStyle: {
+							color: '#ff557f',
+						},
+						itemStyle: {
+							color: 'red',
+						},
+					},
+					{
+						value: [21, 10, 55, 20, 60, 50],
+						name: '旅检四科',
+						label: {
+							show: true,
+							color: '#fff',
+						},
+						areaStyle: {
+							color: '#aaff7f',
+						},
+						itemStyle: {
+							color: 'green',
+						},
+					},
+				],
+			},
+		],
+	});
+	
+	const chartRight = ref(null);
+	const echart_right = ref(null);
+	const chartRightOption = ref({
+		xAxis: {
+			type: 'category',
+			data: ['1', '2', '3', '4', '5'],
+			axisLabel: {
+				color: '#fff'
+			},
+			categoryGap: '50%',
+		},
+		yAxis: {
+			type: 'value',
+			axisLabel: {
+				color: '#fff'
+			},
+		},
+		series: [
+			{
+				data: [95, 93, 90, 88, 85],
+				type: 'bar',
+				showBackground: true,
+				backgroundStyle: {
+					color: 'rgba(180, 180, 180, 0.2)'
+				}
+			}
+		]
+	});
+	
+	const chartAnalysis = ref(null);
+	const dialogVisible = ref(false)
+	const center_EchartAnalysis = ref(null);
+	const chartAnalysisOption = ref({
+		tooltip: {
+			trigger: 'item'
+		},
+		legend: {
+			left: 'center',
+			top: 15,
+			textStyle: {
+				color: '#fff',
+			},
+			selectedMode: false
+		},
+		series: [
+			{
+				name: '占比',
+				type: 'pie',
+				radius: ['40%', '70%'],
+				center:['50%','60%'],
+				avoidLabelOverlap: false,
+				label: {
+					show: false,
+					position: 'center'
+				},
+				labelLine: {
+					show: false
+				},
+				data: [
+					{ value: 735, name: '优秀(90-100)' },
+					{ value: 1048, name: '良好(80-89)' },
+					{ value: 580, name: '中等(70-79)' },
+					{ value: 484, name: '需提升(<70)' },
+				]
+			}
+		]
+	});
+	
+	const initChart = () => {
+		chart.value = echarts.init(top_Echart.value, 'macarons');
+		chart.value.setOption(chartOption.value);
+		chartRight.value = echarts.init(echart_right.value, 'macarons');
+		chartRight.value.setOption(chartRightOption.value);
+		chartAnalysis.value = echarts.init(center_EchartAnalysis.value, 'macarons');
+		chartAnalysis.value.setOption(chartAnalysisOption.value);
+	};
+	
+	const changeActive = (ind) => {
+		if (ind == 0) {
+			chartOption.value = {
+				legend: {
+					data: ['旅检一科', '旅检二科', '旅检三科', '旅检四科'],
+					right: '10%',
+					top: '10%',
+					orient: 'vertical',
+					textStyle: {
+						color: '#fff',
+					},
+				},
+				radar: {
+					indicator: [
+						{ name: '查获能力', max: 100 },
+						{ name: '作风建设', max: 100 },
+						{ name: '操作能力', max: 100 },
+						{ name: '应急能力', max: 100 },
+						{ name: '业务知识', max: 100 },
+					],
+					center: ['45%', '50%'],
+					name: {
+						// 修改指标名称的文本样式
+						textStyle: {
+							color: '#fff', // 设置文字颜色为红色
+							fontSize: 12, // 设置文字大小
+							fontWeight: 'bold' // 设置文字粗细
+						}
+					}
+				},
+				series: [
+					{
+						name: 'Budget vs spending',
+						type: 'radar',
+						data: [
+							{
+								value: [80, 70, 75, 80, 80, 80],
+								name: '旅检一科',
+								label: {
+									show: true,
+									color: '#fff',
+								},
+								areaStyle: {
+									color: '#a9bdff',
+								},
+								itemStyle: {
+									color: 'blue',
+								},
+							},
+							{
+								value: [8, 50, 25, 70, 60, 80],
+								name: '旅检二科',
+								label: {
+									show: true,
+									color: '#fff',
+								},
+								areaStyle: {
+									color: '#ffff7f',
+								},
+								itemStyle: {
+									color: 'yellow',
+								},
+							},
+							{
+								value: [30, 40, 15, 40, 70, 60],
+								name: '旅检三科',
+								label: {
+									show: true,
+									color: '#fff',
+								},
+								areaStyle: {
+									color: '#ff557f',
+								},
+								itemStyle: {
+									color: 'red',
+								},
+							},
+							{
+								value: [21, 10, 55, 20, 60, 50],
+								name: '旅检四科',
+								label: {
+									show: true,
+									color: '#fff',
+								},
+								areaStyle: {
+									color: '#aaff7f',
+								},
+								itemStyle: {
+									color: 'green',
+								},
+							},
+						],
+					},
+				],
+			}
+		} else if (ind == 1) {
+			chartOption.value = {
+				legend: {
+					data: ['李攀班', '李士强班', '程莎莎班', '李延班'],
+					right: '10%',
+					top: '10%',
+					orient: 'vertical',
+					textStyle: {
+						color: '#fff',
+					},
+				},
+				radar: {
+					indicator: [
+						{ name: '查获能力', max: 100 },
+						{ name: '作风建设', max: 100 },
+						{ name: '操作能力', max: 100 },
+						{ name: '应急能力', max: 100 },
+						{ name: '业务知识', max: 100 },
+					],
+					center: ['45%', '50%'],
+					name: {
+						// 修改指标名称的文本样式
+						textStyle: {
+							color: '#fff', // 设置文字颜色为红色
+							fontSize: 12, // 设置文字大小
+							fontWeight: 'bold' // 设置文字粗细
+						}
+					}
+				},
+				series: [
+					{
+						name: 'Budget vs spending',
+						type: 'radar',
+						data: [
+							{
+								value: [10, 70, 25, 40, 10, 60],
+								name: '李攀班',
+								label: {
+									show: true,
+									color: '#fff',
+								},
+								areaStyle: {
+									color: '#a9bdff',
+								},
+								itemStyle: {
+									color: 'blue',
+								},
+							},
+							{
+								value: [18, 30, 75, 40, 38, 80],
+								name: '李士强班',
+								label: {
+									show: true,
+									color: '#fff',
+								},
+								areaStyle: {
+									color: '#ffff7f',
+								},
+								itemStyle: {
+									color: 'yellow',
+								},
+							},
+							{
+								value: [80, 60, 25, 30, 50, 60],
+								name: '程莎莎班',
+								label: {
+									show: true,
+									color: '#fff',
+								},
+								areaStyle: {
+									color: '#ff557f',
+								},
+								itemStyle: {
+									color: 'red',
+								},
+							},
+							{
+								value: [22, 15, 35, 10, 65, 50],
+								name: '李延班',
+								label: {
+									show: true,
+									color: '#fff',
+								},
+								areaStyle: {
+									color: '#aaff7f',
+								},
+								itemStyle: {
+									color: 'green',
+								},
+							},
+						],
+					},
+				],
+			}
+		} else {
+			chartOption.value = {
+				legend: {
+					data: ['李攀', '李士强'],
+					right: '10%',
+					top: '10%',
+					orient: 'vertical',
+					textStyle: {
+						color: '#fff',
+					},
+				},
+				radar: {
+					indicator: [
+						{ name: '查获能力', max: 100 },
+						{ name: '作风建设', max: 100 },
+						{ name: '操作能力', max: 100 },
+						{ name: '应急能力', max: 100 },
+						{ name: '业务知识', max: 100 },
+					],
+					center: ['45%', '50%'],
+					name: {
+						// 修改指标名称的文本样式
+						textStyle: {
+							color: '#fff', // 设置文字颜色为红色
+							fontSize: 12, // 设置文字大小
+							fontWeight: 'bold' // 设置文字粗细
+						}
+					}
+				},
+				series: [
+					{
+						name: 'Budget vs spending',
+						type: 'radar',
+						data: [
+							{
+								value: [20, 70, 55, 80, 50, 30],
+								name: '李攀',
+								label: {
+									show: true,
+									color: '#fff',
+								},
+								areaStyle: {
+									color: '#a9bdff',
+								},
+								itemStyle: {
+									color: 'blue',
+								},
+							},
+							{
+								value: [48, 50, 20, 70, 30, 80],
+								name: '李士强',
+								label: {
+									show: true,
+									color: '#fff',
+								},
+								areaStyle: {
+									color: '#ffff7f',
+								},
+								itemStyle: {
+									color: 'yellow',
+								},
+							}
+						],
+					},
+				],
+			}
+		}
+		chart.value.setOption(chartOption.value);
+		chartRight.value = echarts.init(echart_right.value, 'macarons');
+		activeName.value = ind;
+	};
+	
+	// 确认编辑权重
+	const handleConfirm = () => {
+	  dialogVisible.value = false;
+	};
+	
+	onMounted(() => {
+		initChart();
+		window.addEventListener('resize', () => {
+			chart.value.resize();
+			chartAnalysis.value.resize();
+			chartRight.value.resize();
+		});
+	});
+	
+	onUnmounted(() => {
+		if (!chart.value) {
+			return;
+		}
+		chart.value.dispose();
+		chart.value = null;
+		if (!chartAnalysis.value) {
+			return;
+		}
+		chartAnalysis.value.dispose();
+		chartAnalysis.value = null;
+		if (!chartRight.value) {
+			return;
+		}
+		chartRight.value.dispose();
+		chartRight.value = null;
+	});
+</script>
+
+<style lang="scss" scoped>
+	::v-deep .el-select__wrapper {
+		background-color: rgba(0, 0, 0, .3);
+	}
+	::v-deep .el-select__placeholder {
+		color: #fff;
+	}
+	::v-deep .is-transparent {
+		color: #a8abb2;
+	}
+	::v-deep .demo-progress .el-progress--line {
+	  margin-bottom: 15px;
+	  width: 100%;
+	}
+	.el-progress {
+		width: 100%;
+		background: #fff;
+	}
+	.abilityPortrait {
+		width: 100%;
+		position: fixed;
+		height: 100%;
+		background: url('../../../assets/images/bg-99b6904c.png');
+		background-size: 100% 100%;
+		overflow-y: auto;
+		padding-bottom: 150px;
+		.root {
+			width: calc(100% - 200px);
+			display: flex;
+			justify-content: space-between;
+			margin-top: 10px;
+		}
+		._title {
+			width: 100%;
+			display: flex;
+			justify-content: space-between;
+			align-items: center;
+			.title {
+				position: relative;
+				display: flex;
+				justify-content: space-between;
+				align-items: center;
+				flex-wrap: nowrap;
+				flex-direction: row;
+				z-index: 1;
+				align-content: flex-start;
+				background: url(/src/assets/images/titlebg-4340cf1c.png);
+				background-size: 100% 100%;
+				font-weight: 400;
+				font-size: 14px;
+				color: #fbffff;
+				padding: 8px 20px;
+				margin-bottom: 8px;
+			}
+			.filter_tag {
+				padding-right: 15px;
+				.label {
+					display: inline-flex;
+					align-items: center;
+					justify-content: center;
+					font-size: 12px;
+					background: #11134b;
+					padding: 4px 8px;
+					margin: -4px 0;
+					border-radius: 4px;
+					color: #fbffff;
+					cursor: pointer;
+				}
+				.active {
+					background: #171b75;
+				}
+			}
+		}
+		.top {
+			width: calc(100% - 220px);
+			display: flex;
+			justify-content: space-between;
+			margin: 10px;
+			.top_left {
+				width: 49%;
+				margin-right: 1%;
+				background: linear-gradient(to bottom, rgba(8, 97, 117, 0) 0%, #13a2d6 200%);
+				display: inline-block;
+				.top_cont {
+					width: 100%;
+					display: flex;
+					justify-content: center;
+					.top_Echart {
+						width: 100%;
+						height: 320px;
+					}
+				}
+			}
+			.top_right {
+				width: 50%;
+				background: linear-gradient(to bottom, rgba(8, 97, 117, 0) 0%, #13a2d6 200%);
+				display: inline-block;
+				.top_cont {
+					width: 100%;
+					display: flex;
+					justify-content: center;
+					.top_Echart {
+						width: 100%;
+						height: 320px;
+					}
+				}
+			}
+		}
+		.bottom {
+			width: calc(100% - 220px);
+			display: flex;
+			justify-content: space-between;
+			margin: 10px;
+			.bottom_left {
+				width: 49%;
+				margin-right: 1%;
+				background: linear-gradient(to bottom, rgba(8, 97, 117, 0) 0%, #13a2d6 200%);
+				display: inline-block;
+				.bottom_cont {
+					width: 100%;
+					.cont_title {
+						width: 80%;
+						margin-left: 10%;
+						height: 30px;
+						display: flex;
+						justify-content: space-between;
+						align-items: center;
+						color: #fff;
+						border-bottom: 1px solid #ffffff40;
+						padding-bottom: 15px;
+						margin-top: 10px;
+						.serial_num {
+							width: 40px;
+						}
+						.progress {
+							width: 60%;
+							margin-left: 20px;
+							text-align: center;
+						}
+						.name {
+							width: 20%;
+							padding-left: 15px;
+							text-align: center;
+						}
+						.fraction {
+							width: 15%;
+							text-align: right;
+						}
+					}
+					.user_ranking {
+						width: 88%;
+						height: 244px;
+						margin-left: 10%;
+						padding: 0 10px;
+						overflow: hidden;
+						display: inline-block;
+						color: #fff;
+						.ranking_item {
+							width: 92%;
+							height: 40px;
+							display: flex;
+							align-items: center;
+							border-bottom: 1px solid #ffffff40;
+							.serial_num {
+								width: 20px;
+								height: 20px;
+								border-radius: 50%;
+								text-align: center;
+								line-height: 20px;
+								background: red;
+								font-size: 13px;
+							}
+							.progress {
+								width: 60%;
+								margin-left: 20px;
+							}
+							.name {
+								width: 20%;
+								padding-left: 25px;
+								text-align: center;
+							}
+							.fraction {
+								width: 15%;
+								text-align: right;
+							}
+						}
+					}
+				}
+			}
+			.bottom_right {
+				width: 50%;
+				background: linear-gradient(to bottom, rgba(8, 97, 117, 0) 0%, #13a2d6 200%);
+				display: inline-block;
+				.bottom_cont {
+					width: 100%;
+					display: flex;
+					justify-content: center;
+					.bottom_Echart {
+						width: 100%;
+						height: 280px;
+					}
+				}
+			}
+		}
+	}
+</style>

src/views/dataBigScreen/attendance/AttendanceStatus.vue

@@ -0,0 +1,80 @@
+<template>
+  <dashboard-item-container title="出勤状态分布">
+    <div ref="pieChart" style="width: 100%; height: 100%" />
+  </dashboard-item-container>
+</template>
+
+<script setup>
+  import { onMounted, ref } from 'vue';
+  import { useEcharts } from '@/hooks/chart.js';
+  import { executeSqlByKeyAndParam } from '@/api/system/sql.js';
+  import DashboardItemContainer from '@/views/dataBigScreen/dashboard/components/DashboardItemContainer.vue';
+
+  const color = {
+    NORMAL: 'rgb(144, 238, 144)',
+    OTHER: 'rgb(255, 255, 102)',
+    LEAVE_ABSENCE: 'rgb(173, 216, 230)',
+    LEAVE_COMPENCOMPENSATORY: 'rgb(135, 206, 250)',
+    LEAVE_ANNUAL: 'rgb(255, 165, 0)',
+    LEAVE_SICK: 'rgb(255, 0, 0)',
+    LATE: 'rgb(255, 99, 71)',
+    EARLY: 'rgb(255, 127, 80)',
+    ABSENTEE: 'rgb(128, 0, 0)',
+  };
+  const pieChart = ref(null);
+  const chartOption = ref({
+    legend: {
+      orient: 'vertical',
+      right: 10,
+      top: '20%',
+      itemWidth: 10,
+      itemHeight: 10,
+      icon: 'circle',
+      textStyle: {
+        color: '#fbffff',
+      },
+    },
+    tooltip: {
+      show: false,
+    },
+    series: [
+      {
+        type: 'pie',
+        center: ['30%', '50%'],
+        radius: ['40%', '60%'],
+        avoidLabelOverlap: false,
+        label: {
+          show: false,
+          position: 'center',
+        },
+        emphasis: {
+          disable: false,  //是否关闭扇区高亮效果
+          scale: false,    //扇区是否缩放
+          scaleSize: 0,
+        },
+        labelLine: {
+          show: false,
+        },
+        data: [],
+      },
+    ],
+  });
+  const { setOption } = useEcharts(pieChart);
+
+  onMounted(() => {
+    executeSqlByKeyAndParam('attendance_status_distribution', {}).then(res => {
+      chartOption.value.series[0].data = res.data.map(el => {
+        return {
+          itemStyle: { color: color[el.status] },
+          value: el.count,
+          name: el.dict_label + ' ' + el.count + '人　' + el.percentage + '%',
+        };
+      });
+      setOption?.(chartOption.value);
+    });
+  });
+</script>
+
+<style lang="less" scoped>
+
+</style>

src/views/dataBigScreen/attendance/AttendanceStatusTime.vue

@@ -0,0 +1,90 @@
+<template>
+  <dashboard-item-container title="不同时间段出勤情况">
+    <div class="attendance-status-time">
+      <template v-for="item in list" style="width: 100%">
+        <div class="top">
+          {{ item.shift_name }}{{ item.start_time }}-{{ item.end_time }}
+          <span class="day">{{ item.normal_percentage }}%</span>
+        </div>
+        <el-progress
+          :color="item.color"
+          :percentage="item.normal_percentage"
+          :show-text="false"
+          :stroke-width="10"
+          :text-inside="true"
+        />
+      </template>
+    </div>
+
+    <p style="padding: 0 20px; color: #fbffff;">各时间段缺勤人员分布</p>
+    <div class="personnel-distribution-container">
+      <div v-for="item in list" class="personnel-distribution">
+        <span>{{ item.shift_name }}</span>
+        <span class="personnel">{{ item.normal_count }}人</span>
+      </div>
+    </div>
+  </dashboard-item-container>
+</template>
+
+<script setup>
+  import { onMounted, ref } from 'vue';
+  import { executeSqlByKeyAndParam } from '@/api/system/sql.js';
+  import DashboardItemContainer from '@/views/dataBigScreen/dashboard/components/DashboardItemContainer.vue';
+
+  let list = ref({
+    shift1: { color: '#165DFF' },
+    shift2: { color: '#00B42A' },
+    shift3: { color: '#FF7D00' },
+  });
+
+  onMounted(() => {
+    executeSqlByKeyAndParam('attendance_at_different_time_periods', {}).then(res => {
+      res.data.forEach(el => {
+        list.value[el.shift_id] = { ...list.value[el.shift_id], ...el };
+      });
+    });
+  });
+</script>
+
+<style lang="less" scoped>
+  .attendance-status-time {
+    padding: 20px;
+    font-size: 12px;
+    color: #fbffff;
+  }
+
+  .top {
+    display: flex;
+    justify-content: space-between;
+    margin: 8px 0;
+
+    .day {
+      color: #00B42A;
+    }
+  }
+
+  .personnel-distribution-container {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    color: #fbffff;
+  }
+
+  .personnel-distribution {
+    width: 33.33%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-flow: column;
+
+    span {
+      color: rgba(251, 255, 255, .6)
+    }
+
+    .personnel {
+      margin: 8px 0;
+      font-size: 18px;
+      color: #fbffff;
+    }
+  }
+</style>

src/views/dataBigScreen/attendance/AttendanceTrend.vue

@@ -0,0 +1,65 @@
+<template>
+  <dashboard-item-container title="出勤趋势分析">
+    <div ref="lineChart" style="width: 100%; height: 100%" />
+  </dashboard-item-container>
+</template>
+
+<script setup>
+  import { onMounted, ref } from 'vue';
+  import { useEcharts } from '@/hooks/chart.js';
+  import { executeSqlByKeyAndParam } from '@/api/system/sql.js';
+  import DashboardItemContainer from '@/views/dataBigScreen/dashboard/components/DashboardItemContainer.vue';
+
+  const lineChart = ref(null);
+  const color = [
+    '#5470c6',
+    '#91cc75',
+    '#fac858',
+    '#ee6666',
+    '#fc8452',
+  ];
+  const chartOption = ref({
+    color: ['#00B42A'],
+    xAxis: {
+      type: 'category',
+      data: [],
+      axisLine: {
+        lineStyle: {
+          color: 'rgba(251, 255, 255, .6)',
+        },
+      },
+      axisLabel: {
+        rotate: 60,
+      },
+    },
+    yAxis: {
+      type: 'value',
+      axisLine: {
+        lineStyle: {
+          color: 'rgba(251, 255, 255, .6)',
+        },
+      },
+    },
+    series: [
+      {
+        symbol: 'circle',
+        symbolSize: 6,
+        data: [],
+        type: 'line',
+      },
+    ],
+  });
+  const { setOption } = useEcharts(lineChart);
+
+  onMounted(() => {
+    executeSqlByKeyAndParam('attendance_trend_analysis', {}).then(res => {
+      chartOption.value.xAxis.data = res.data.map(el => el.day);
+      chartOption.value.series[0].data = res.data.map(el => el.count_sum);
+      setOption?.(chartOption.value);
+    });
+  });
+</script>
+
+<style lang="less" scoped>
+
+</style>

src/views/dataBigScreen/attendance/ContinuousAttendance.vue

@@ -0,0 +1,78 @@
+<template>
+  <scroll-seamless class="dashboard-bg" :list="list" title="连续出勤天数">
+    <template #default="{ row, index }">
+      <span class="ranking">
+        <i :class="{ first: index === 0, second: index === 1, third: index === 2}" class="index">{{ index + 1 }}</i>
+      </span>
+      <div style="width: 100%">
+        <div class="top">
+          {{ row.user_name }}
+          <span class="day">{{ row.attendance_days }}天</span>
+        </div>
+        <el-progress
+          :percentage="row.attendance_days / 30 * 100"
+          :show-text="false"
+          :stroke-width="10"
+          :text-inside="true"
+          color="#00B42A"
+        />
+      </div>
+    </template>
+  </scroll-seamless>
+</template>
+
+<script setup>
+  import { onMounted, ref } from 'vue';
+  import { executeSqlByKeyAndParam } from '@/api/system/sql.js';
+  import ScrollSeamless from '@/views/dataBigScreen/dashboard/components/ScrollSeamless.vue';
+
+  let list = ref([]);
+
+  onMounted(() => {
+    executeSqlByKeyAndParam('continuous_attendance_days', {}).then(res => {
+      list.value = res.data;
+    });
+  });
+</script>
+
+<style lang="less" scoped>
+
+  .ranking {
+    width: 40px;
+
+    .index {
+      display: inline-flex;
+      justify-content: center;
+      align-items: center;
+      width: 16px;
+      height: 16px;
+      background: #5470c6;
+      border-radius: 4px;
+      font-style: normal;
+
+      &.first {
+        background: #ff3232;
+      }
+
+      &.second {
+        background: #ff9800;
+      }
+
+      &.third {
+        background: #ffd200;
+      }
+    }
+  }
+
+
+  .top {
+    display: flex;
+    justify-content: space-between;
+    margin-bottom: 8px;
+    color: #fbffff;
+
+    .day {
+      color: #00B42A;
+    }
+  }
+</style>

src/views/dataBigScreen/attendance/DepartmentAttendance.vue

@@ -0,0 +1,68 @@
+<template>
+  <dashboard-item-container title="科室平均工作时长">
+    <template #right-menu>
+      <div class="dashboard-right-menu">
+        <span class="active">今日</span>
+        <span>本周</span>
+        <span>本月</span>
+      </div>
+    </template>
+    <div ref="barChart" style="width: 100%; height: 100%" />
+  </dashboard-item-container>
+</template>
+
+<script setup>
+  import { onMounted, ref } from 'vue';
+  import { useEcharts } from '@/hooks/chart.js';
+  import { executeSqlByKeyAndParam } from '@/api/system/sql.js';
+  import DashboardItemContainer from '@/views/dataBigScreen/dashboard/components/DashboardItemContainer.vue';
+
+  const barChart = ref(null);
+  const chartOption = ref({
+    color: ['#165DFF'],
+    grid: [{ bottom: '20' }, { top: '50' }],
+    legend: {
+      icon: 'circle',
+      textStyle: {
+        color: '#fbffff',
+      },
+    },
+    xAxis: {
+      type: 'category',
+      gridIndex: 1,
+      axisLine: {
+        lineStyle: {
+          color: 'rgba(251, 255, 255, .6)',
+        },
+      },
+    },
+    yAxis: {
+      gridIndex: 1,
+      axisLine: {
+        lineStyle: {
+          color: 'rgba(251, 255, 255, .6)',
+        },
+      },
+    },
+    dataset: {
+      source: [],
+    },
+    series: [
+      { type: 'bar' },
+    ],
+  });
+  const { setOption } = useEcharts(barChart);
+
+  onMounted(() => {
+    executeSqlByKeyAndParam('attendance_statistics_of_departments', {}).then(res => {
+      chartOption.value.dataset.source = res.data.map(el => {
+        return [el.dept_name, el.pass_count];
+      });
+      setOption?.(chartOption.value);
+    });
+  });
+</script>
+
+<style lang="less" scoped>
+
+</style>

src/views/dataBigScreen/attendance/DepartmentDetails.vue

@@ -0,0 +1,50 @@
+<template>
+  <scroll-seamless :list="list" class="dashboard-bg" title="科室详情">
+    <template #thead>
+      <span class="item">科室</span>
+      <span class="item">总人数</span>
+      <span class="item">出勤人数</span>
+      <span class="item">出勤率</span>
+      <span class="item">迟到</span>
+      <span class="item">请假</span>
+      <span class="item">矿工</span>
+    </template>
+    <template #default="{ row, index }">
+      <span class="item">{{ row.dept_name }}</span>
+      <span class="item">{{ row.total_count }}</span>
+      <span class="item">{{ row.normal_count }}</span>
+      <span class="item">{{ row.normal_percentage }}</span>
+      <span class="item">{{ row.late_count }}</span>
+      <span class="item">{{ row.leave_count }}</span>
+      <span class="item">{{ row.absentee_count }}</span>
+    </template>
+  </scroll-seamless>
+</template>
+
+<script setup>
+  import { onMounted, ref } from 'vue';
+  import { executeSqlByKeyAndParam } from '@/api/system/sql.js';
+  import ScrollSeamless from '@/views/dataBigScreen/dashboard/components/ScrollSeamless.vue';
+  import SvgIcon from '@/components/SvgIcon/index.vue';
+
+  let list = ref([]);
+  onMounted(() => {
+    executeSqlByKeyAndParam('department_details', {}).then(res => {
+      list.value = res.data;
+    });
+  });
+</script>
+
+<style lang="less" scoped>
+  .item {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 14.28%;
+    white-space: nowrap;
+
+    &.ranking {
+      width: 10%;
+    }
+  }
+</style>

src/views/dataBigScreen/attendance/LeaveType.vue

@@ -0,0 +1,61 @@
+<template>
+  <dashboard-item-container title="请假类型占比">
+    <div ref="pieChart" style="width: 100%; height: 100%" />
+  </dashboard-item-container>
+</template>
+
+<script setup>
+  import { onMounted, ref } from 'vue';
+  import { useEcharts } from '@/hooks/chart.js';
+  import { executeSqlByKeyAndParam } from '@/api/system/sql.js';
+  import DashboardItemContainer from '@/views/dataBigScreen/dashboard/components/DashboardItemContainer.vue';
+
+  const pieChart = ref(null);
+  const chartOption = ref({
+    color: ['#00B42A', '#722ED1', '#F53F3F', '#165DFF', '#FF7D00'],
+    legend: {
+      bottom: 10,
+      itemWidth: 10,
+      itemHeight: 10,
+      icon: 'circle',
+      textStyle: {
+        color: '#fbffff',
+      },
+    },
+    tooltip: {
+      show: false,
+    },
+    series: [
+      {
+        type: 'pie',
+        avoidLabelOverlap: false,
+        label: {
+          show: false,
+          position: 'center',
+        },
+        emphasis: {
+          disable: false,  //是否关闭扇区高亮效果
+          scale: false,    //扇区是否缩放
+          scaleSize: 0,
+        },
+        labelLine: {
+          show: false,
+        },
+        data: [],
+      },
+    ],
+  });
+  const { setOption } = useEcharts(pieChart);
+
+  onMounted(() => {
+    executeSqlByKeyAndParam('proportion_of_leave_types', {}).then(res => {
+      chartOption.value.series[0].data = res.data.map(el => {
+        return {
+          value: el.count,
+          name: el.dict_label,
+        };
+      });
+      setOption?.(chartOption.value);
+    });
+  });
+</script>

src/views/dataBigScreen/attendance/NumberOfAbsences.vue

@@ -0,0 +1,112 @@
+<template>
+  <scroll-seamless :list="list" class="dashboard-bg" title="最近缺勤人员">
+    <template #thead>
+      <span class="item">姓名</span>
+      <span class="item">科室</span>
+      <span class="item">缺勤类型</span>
+      <span class="item">开始时间</span>
+      <span class="item">预计返回</span>
+      <span class="item ranking">操作</span>
+    </template>
+    <template #default="{ row, index }">
+      <span class="item">{{ row.user_name }}</span>
+      <span class="item">{{ row.dept_name }}</span>
+      <div class="item status">
+        <span :class="row.status">
+          {{ row.dict_label }}
+        </span>
+      </div>
+      <span class="item num">{{ row.check_in_time }}</span>
+      <span class="item">{{ row.check_out_time || '-' }}</span>
+      <span class="item ranking">
+        <svg-icon icon-class="phone" style="fill: #2D5CF6" />
+      </span>
+    </template>
+  </scroll-seamless>
+</template>
+
+<script setup>
+  import { onMounted, ref } from 'vue';
+  import { executeSqlByKeyAndParam } from '@/api/system/sql.js';
+  import ScrollSeamless from '@/views/dataBigScreen/dashboard/components/ScrollSeamless.vue';
+  import SvgIcon from '@/components/SvgIcon/index.vue';
+
+  let list = ref([]);
+  onMounted(() => {
+    executeSqlByKeyAndParam('recently_absent_personnel', {}).then(res => {
+      list.value = res.data;
+    });
+  });
+</script>
+
+<style lang="less" scoped>
+  .item {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 18%;
+
+    &.ranking {
+      width: 10%;
+    }
+
+    &.status {
+      span {
+        padding: 4px 8px;
+        border-radius: 20px;
+      }
+    }
+
+    .NORMAL {
+      background: rgba(144, 238, 144, .4);
+      color: rgba(144, 238, 144, 1);
+    }
+
+    .OTHER {
+      background: rgba(255, 255, 102, .4);
+      color: rgba(255, 255, 102, 1);
+    }
+
+    // 事假
+    .LEAVE_ABSENCE {
+      background: rgba(255, 165, 0, .4);
+      color: rgba(255, 165, 0, 1);
+    }
+
+    // 调休
+    .LEAVE_COMPENCOMPENSATORY {
+      background: rgba(173, 216, 230, .4);
+      color: rgba(173, 216, 230, 1);
+    }
+
+    // 年假
+    .LEAVE_ANNUAL {
+      background: rgba(135, 206, 250, .4);
+      color: rgba(135, 206, 250, 1);
+    }
+
+    // 病假
+    .LEAVE_SICK {
+      background: rgba(255, 0, 0, .4);
+      color: rgba(255, 0, 0, 1);
+    }
+
+    // 迟到
+    .LATE {
+      background: rgba(255, 99, 71, .4);
+      color: rgba(255, 99, 71, 1);
+    }
+
+    // 早退
+    .EARLY {
+      background: rgba(255, 127, 80, .4);
+      color: rgba(255, 127, 80, 1);
+    }
+
+    // 旷工
+    .ABSENTEE {
+      background: rgba(128, 0, 0, .4);
+      color: rgba(128, 0, 0, 1);
+    }
+  }
+</style>

src/views/dataBigScreen/attendance/OvertimeHours.vue

@@ -0,0 +1,56 @@
+<template>
+  <dashboard-item-container title="排班时长统计">
+    <template #right-menu>
+      <div class="dashboard-right-menu">
+        <span>今日</span>
+        <span>本周</span>
+        <span class="active">本月</span>
+      </div>
+    </template>
+    <div ref="barChart" style="width: 100%; height: 100%" />
+  </dashboard-item-container>
+</template>
+
+<script setup>
+  import { onMounted, ref } from 'vue';
+  import { useEcharts } from '@/hooks/chart.js';
+  import { executeSqlByKeyAndParam } from '@/api/system/sql.js';
+  import DashboardItemContainer from '@/views/dataBigScreen/dashboard/components/DashboardItemContainer.vue';
+
+  const barChart = ref(null);
+  const chartOption = ref({
+    color: ['#165DFF'],
+    xAxis: {
+      type: 'category',
+      axisLabel: {
+        rotate: 20,
+      },
+      axisLine: {
+        lineStyle: {
+          color: 'rgba(251, 255, 255, .6)',
+        },
+      },
+    },
+    yAxis: {
+      axisLine: {
+        lineStyle: {
+          color: 'rgba(251, 255, 255, .6)',
+        },
+      },
+    },
+    series: [{ type: 'bar', data: [] }],
+  });
+  const { setOption } = useEcharts(barChart);
+
+  onMounted(() => {
+    executeSqlByKeyAndParam('overtime_hours_statistics', {}).then(res => {
+      chartOption.value.xAxis.data = res.data.map(el => el.dept_name);
+      chartOption.value.series[0].data = res.data.map(el => el.over_duration_hour);
+      setOption?.(chartOption.value);
+    });
+  });
+</script>
+
+<style lang="less" scoped>
+
+</style>

src/views/dataBigScreen/attendance/TotalContainer.vue

@@ -0,0 +1,123 @@
+<template>
+  <div class="total">
+    <div class="count-inner dashboard-bg">
+      <div class="item-title">总安检员数量</div>
+      <div class="count">
+        <vue-count-to :duration="2600" :end-val="totalNum.total_count" :start-val="0" class="card-panel-num" />
+      </div>
+      <div class="tips">
+        <span class="icon"><svg-icon icon-class="top" /> 较上月+12人</span>
+      </div>
+    </div>
+    <div class="count-inner dashboard-bg">
+      <div class="item-title">今日出勤人数</div>
+      <div class="count">
+        <vue-count-to :duration="2600" :end-val="totalNum.pass_count" :start-val="0" class="card-panel-num" />
+      </div>
+      <div class="tips">
+        <span class="icon"><svg-icon icon-class="top" /> 较昨日+8人</span>
+      </div>
+    </div>
+    <div class="count-inner dashboard-bg">
+      <div class="item-title">缺勤认数</div>
+      <div class="count">
+        <vue-count-to :duration="2600" :end-val="totalNum.fail_count" :start-val="0" class="card-panel-num warn" />
+      </div>
+      <div class="tips">
+        <span class="icon danger"><svg-icon icon-class="top" /> 较昨日+5人</span>
+      </div>
+    </div>
+    <div class="count-inner dashboard-bg">
+      <div class="item-title">出勤率</div>
+      <div class="count">
+        <vue-count-to :duration="2600" :end-val="totalNum.pass_percentage" :start-val="0" class="card-panel-num" />
+      </div>
+      <div class="tips">
+        <span class="icon danger down"><svg-icon icon-class="top" /> 较昨日-2.1%</span>
+      </div>
+    </div>
+  </div>
+</template>
+<script setup>
+  import { onMounted, ref } from 'vue';
+  import VueCountTo from '@/components/VueCountTo/vue-countTo.vue';
+  import { executeSqlByKeyAndParam } from '@/api/system/sql.js';
+  import SvgIcon from '@/components/SvgIcon/index.vue';
+
+  let totalNum = ref({
+    total: 0,
+    total_major: 0,
+    total_conceal: 0,
+  });
+
+  onMounted(() => {
+    // 查获总量+重大违禁品+故意隐匿数量
+    executeSqlByKeyAndParam('total_number_and_attendance_of_security_personnel', {}).then(res => {
+      totalNum.value = res.data[0];
+    });
+  });
+</script>
+
+<style lang="less" scoped>
+  .total {
+    display: flex;
+    justify-content: space-between;
+
+    .count-inner {
+      width: calc(25% - 8px);
+      padding: 20px;
+      border: 1px solid #363F4C;
+      border-radius: 8px;
+      color: #6D7F83;
+
+      .item-title {
+        margin-bottom: 8px;
+      }
+
+      .tips {
+        color: #9499A0;
+        font-size: 12px;
+        margin-top: 16px;
+
+        .icon {
+          margin-right: 8px;
+          color: #10B981;
+
+          .svg-icon {
+            fill: #10B981;
+            transform: rotate(-90deg);
+          }
+
+          &.danger {
+            color: #EF4444;
+
+            .svg-icon {
+              fill: #EF4444;
+            }
+          }
+
+          &.down {
+            .svg-icon {
+              transform: rotate(90deg);
+            }
+          }
+        }
+      }
+    }
+  }
+
+  :deep(.card-panel-num) {
+    margin: 8px 0;
+    font-size: 20px;
+    color: #fbffff;
+
+    &.warn {
+      color: #FE7C01;
+    }
+  }
+
+  .echarts {
+    flex: 1;
+    width: 100%;
+  }
+</style>

src/views/dataBigScreen/attendance/WorkingHoursAndSeizureVolume.vue

@@ -0,0 +1,118 @@
+<template>
+  <dashboard-item-container title="工作时长和查获量的散点图表">
+    <div ref="scatterChart" style="width: 100%; height: 100%" />
+  </dashboard-item-container>
+</template>
+
+<script setup>
+  import { onMounted, ref } from 'vue';
+  import { useEcharts } from '@/hooks/chart.js';
+  import DashboardItemContainer from '@/views/dataBigScreen/dashboard/components/DashboardItemContainer.vue';
+
+  const color = ['#00B42A', '#165DFF'];
+  const scatterChart = ref(null);
+  const chartOption = ref({
+    color,
+    legend: {
+      bottom: 5,
+      textStyle: {
+        color: 'rgba(251, 255, 255, .6)',
+      },
+    },
+    xAxis: {
+      axisLine: {
+        lineStyle: {
+          color: 'rgba(251, 255, 255, .6)',
+        },
+      },
+    },
+    yAxis: {
+      axisLine: {
+        lineStyle: {
+          color: 'rgba(251, 255, 255, .6)',
+        },
+      },
+    },
+    tooltip: {
+      show: false,
+    },
+    series: [
+      {
+        name: '工作时长',
+        type: 'scatter',
+        symbolSize: 20,
+        data: [
+          [10.0, 8.04],
+          [8.07, 6.95],
+          [13.0, 7.58],
+          [9.05, 8.81],
+          [11.0, 8.33],
+          [14.0, 7.66],
+          [13.4, 6.81],
+          [10.0, 6.33],
+          [14.0, 8.96],
+          [12.5, 6.82],
+          [9.15, 7.2],
+          [11.5, 7.2],
+          [3.03, 4.23],
+          [12.2, 7.83],
+          [2.02, 4.47],
+          [1.05, 3.33],
+          [4.05, 4.96],
+          [6.03, 7.24],
+          [12.0, 6.26],
+          [12.0, 8.84],
+          [7.08, 5.82],
+          [5.02, 5.68],
+        ],
+      },
+      {
+        name: '查获量',
+        type: 'scatter',
+        symbolSize: 20,
+        data: [
+          [10.0, 18.04],
+          [8.07, 16.95],
+          [13.0, 17.58],
+          [9.05, 18.81],
+          [11.0, 18.33],
+          [14.0, 17.66],
+          [13.4, 16.81],
+          [10.0, 16.33],
+          [14.0, 18.96],
+          [12.5, 6.82],
+          [9.15, 17.2],
+          [11.5, 7.2],
+          [3.03, 14.23],
+          [12.2, 17.83],
+          [2.02, 14.47],
+          [1.05, 13.33],
+          [4.05, 14.96],
+          [6.03, 17.24],
+          [12.0, 16.26],
+          [12.0, 8.84],
+          [7.08, 15.82],
+          [5.02, 15.68],
+        ],
+      },
+    ],
+  });
+  const { setOption } = useEcharts(scatterChart);
+
+  onMounted(() => {
+    // executeSqlByKeyAndParam('proportion_of_leave_types', {}).then(res => {
+    //   chartOption.value.series[0].data = res.data.map(el => {
+    //     return {
+    //       value: el.count,
+    //       name: el.dict_label,
+    //     };
+    //   });
+    //   setOption?.(chartOption.value);
+    // });
+    setOption?.(chartOption.value);
+  });
+</script>
+
+<style lang="less" scoped>
+
+</style>

src/views/dataBigScreen/attendance/index.vue

@@ -0,0 +1,103 @@
+<template>
+  <dashboard-container hide>
+    <div class="container">
+      <div class="total-container wow bounceInDown">
+        <total-container />
+      </div>
+      <div class="chart-container statistics-container">
+        <div class="w66-container wow slideInLeft">
+          <!-- 科室平均工作时长 -->
+          <department-attendance />
+        </div>
+        <div class="w33-container ml16 wow slideInRight">
+          <!-- 出勤趋势分析 -->
+          <attendance-trend />
+        </div>
+      </div>
+      <div class="chart-container staff-container">
+        <div class="w33-container wow slideInLeft">
+          <!-- 出勤状态分布 -->
+          <attendance-status />
+        </div>
+        <div class="w66-container wow slideInRight">
+          <!-- 最近缺勤人员 -->
+          <number-of-absences />
+        </div>
+      </div>
+      <div class="chart-container department-container">
+        <div class="w33-container wow slideInLeft">
+          <!-- 科室详情 -->
+          <department-details />
+        </div>
+        <div class="w33-container wow fadeIn">
+          <!-- 工作时长和查获量的散点图表 -->
+          <working-hours-and-seizure-volume />
+        </div>
+        <div class="w33-container wow slideInRight">
+          <!-- 连续出勤天数 -->
+          <continuous-attendance />
+        </div>
+      </div>
+      <div class="chart-container proportion-container">
+        <div class="w33-container wow slideInLeft">
+          <!-- 排班时长统计 -->
+          <overtime-hours />
+        </div>
+        <div class="w33-container wow fadeIn">
+          <!-- 请假类型占比 -->
+          <leave-type />
+        </div>
+        <div class="w33-container wow slideInRight">
+          <!-- 不同时间段出勤情况 -->
+          <attendance-status-time />
+        </div>
+      </div>
+    </div>
+  </dashboard-container>
+</template>
+
+<script setup>
+  import DashboardContainer from '@/views/dataBigScreen/dashboard/components/DashboardContainer.vue';
+  import TotalContainer from '@/views/dataBigScreen/attendance/TotalContainer.vue';
+  import DepartmentAttendance from '@/views/dataBigScreen/attendance/DepartmentAttendance.vue';
+  import AttendanceTrend from '@/views/dataBigScreen/attendance/AttendanceTrend.vue';
+  import AttendanceStatus from '@/views/dataBigScreen/attendance/AttendanceStatus.vue';
+  import NumberOfAbsences from '@/views/dataBigScreen/attendance/NumberOfAbsences.vue';
+  import DepartmentDetails from '@/views/dataBigScreen/attendance/DepartmentDetails.vue';
+  import ContinuousAttendance from '@/views/dataBigScreen/attendance/ContinuousAttendance.vue';
+  import OvertimeHours from '@/views/dataBigScreen/attendance/OvertimeHours.vue';
+  import LeaveType from '@/views/dataBigScreen/attendance/LeaveType.vue';
+  import AttendanceStatusTime from '@/views/dataBigScreen/attendance/AttendanceStatusTime.vue';
+  import WorkingHoursAndSeizureVolume from '@/views/dataBigScreen/attendance/WorkingHoursAndSeizureVolume.vue';
+</script>
+
+<style lang="scss" scoped>
+  .container {
+    width: 100%;
+    padding: 20px;
+
+    .chart-container {
+      display: flex;
+      height: 400px;
+      margin: 16px 0;
+
+      .w66-container {
+        width: 66.66%;
+      }
+
+      .w33-container {
+        width: calc(33.33% - 16px);
+        margin-right: 16px;
+
+        &.ml16 {
+          margin: 0 0 0 16px !important;
+        }
+
+        &:nth-last-child(1) {
+          width: 33.33%;
+          margin: 0;
+        }
+      }
+    }
+  }
+</style>

src/views/dataBigScreen/dashboard-work/AbnormalSituationRanking.vue

@@ -0,0 +1,102 @@
+<template>
+  <scroll-seamless :list="list" title="异常情况排名">
+    <template #default="{ row, index }">
+      <span class="item ranking">
+        <i :class="{ first: index === 0, second: index === 1, third: index === 2}" class="index">{{ index + 1 }}</i>
+      </span>
+      <span class="item title">{{ row.item_name }}</span>
+      <el-progress
+        :percentage="row.fail_percentage"
+        :show-text="false"
+        :stroke-width="10"
+        :text-inside="true"
+        color="#409eff"
+      />
+
+      <span class="item num">异常{{ row.fail_count }}次</span>
+      <span class="item pie">异常率{{ row.fail_percentage }}%</span>
+    </template>
+  </scroll-seamless>
+</template>
+
+<script setup>
+  import { onMounted, ref } from 'vue';
+  import { executeSqlByKeyAndParam } from '@/api/system/sql.js';
+  import ScrollSeamless from '@/views/dataBigScreen/dashboard/components/ScrollSeamless.vue';
+
+  const classOptions = {
+    limitMoveNum: 7,
+  };
+
+  let list = ref([]);
+
+  onMounted(() => {
+    executeSqlByKeyAndParam('abnormal_situation_ranking', {}).then(res => {
+      list.value = res.data;
+    });
+  });
+</script>
+
+<style lang="less" scoped>
+
+  .item {
+    &.ranking {
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+      margin-right: 8px;
+    }
+
+    &.title {
+      width: 80px;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+      margin-right: 8px;
+    }
+
+    .index {
+      display: inline-flex;
+      justify-content: center;
+      align-items: center;
+      width: 16px;
+      height: 16px;
+      background: #5470c6;
+      border-radius: 4px;
+      font-style: normal;
+
+      &.first {
+        background: #ff3232;
+      }
+
+      &.second {
+        background: #ff9800;
+      }
+
+      &.third {
+        background: #ffd200;
+      }
+    }
+  }
+
+  :deep(.el-progress) {
+    flex: 1;
+  }
+
+  :deep(.el-progress-bar__outer) {
+    background-color: #164B7F;
+  }
+
+  .num {
+    width: 50px;
+    margin-left: 12px;
+    white-space: nowrap;
+  }
+
+  .pie {
+    width: 80px;
+    margin-left: 12px;
+    color: #73c0de;
+    white-space: nowrap;
+  }
+</style>

src/views/dataBigScreen/dashboard-work/AbnormalTeam.vue

@@ -0,0 +1,114 @@
+<template>
+  <div class="tips">
+    <div v-for="item in list" :class="item.level" class="tips-item">
+      <div class="title-content">
+        {{ item.title }}
+        <span>{{ item.levelName }}</span>
+      </div>
+      <span class="container">{{ item.content }}</span>
+      <div class="footer">
+        <span>{{ item.time }}</span>
+        <span class="btn">处理</span>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+  import { onMounted, onUnmounted, ref } from 'vue';
+
+  const list = ref([
+    {
+      title: '安检员操作不规范',
+      content: 'T3航站楼B区3号通道，行李检查未按标准流程操作',
+      time: '5分钟前',
+      level: 'high',
+      levelName: '紧急',
+    },
+    {
+      title: '安检员仪容仪表不达标',
+      content: 'T1航站楼A区1号通道，安检员着装不整齐',
+      time: '12分钟前',
+      level: 'middle',
+      levelName: '中等',
+    },
+  ]);
+  onMounted(() => {
+
+  });
+
+  onUnmounted(() => {
+
+  });
+</script>
+
+<style lang="less" scoped>
+  .tips {
+    height: calc(100% - 50px);
+    padding: 10px 20px;
+
+    &:hover {
+      overflow: auto;
+    }
+  }
+
+  .tips-item {
+    display: flex;
+    flex-flow: column;
+    width: 100%;
+    padding: 12px;
+    border: 1px solid #5B3F49;
+    border-radius: 8px;
+    background: #423B48;
+    font-size: 16px;
+    color: #fbffff;
+
+    &:not(:last-child) {
+      margin-bottom: 12px;
+    }
+
+    .title-content {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+
+      span {
+        display: inline-flex;
+        background: #64404B;
+        border-radius: 10px;
+        padding: 4px 8px;
+        color: #DD5754;
+        font-size: 12px;
+      }
+    }
+
+    &.middle {
+      border-color: #545041;
+      background: #444543;
+
+      .title-content {
+        span {
+          color: #E0A63F;
+          background: #665A3E;
+        }
+      }
+    }
+
+    .container {
+      margin: 12px 0;
+      font-size: 14px;
+    }
+
+    .footer {
+      font-size: 12px;
+      color: #8D909B;
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+
+      .btn {
+        color: #314FAA;
+      }
+    }
+  }
+</style>

src/views/dataBigScreen/dashboard-work/DateTotal.vue

@@ -0,0 +1,130 @@
+<template>
+  <div style="width: 100%; height: 100%; display: flex; flex-flow: column;">
+    <el-date-picker
+      v-model="calendarDate"
+      :clearable="false"
+      :picker-options="pickerOptions"
+      end-placeholder="结束日期"
+      range-separator="至"
+      start-placeholder="开始日期"
+      type="daterange"
+      unlink-panels
+      value-format="YYYY-MM-DD"
+    >
+    </el-date-picker>
+    <div class="total">
+      <div class="count-inner">
+        <div class="item-title">抽查次数</div>
+        <div class="count">
+          <vue-count-to :duration="2600" :end-val="totalNum.total_count" :start-val="0" class="card-panel-num" />
+        </div>
+      </div>
+      <div class="count-inner">
+        <div class="item-title">发现问题数</div>
+        <div class="count">
+          <vue-count-to :duration="2600" :end-val="totalNum.fail_count" :start-val="0" class="card-panel-num" />
+        </div>
+      </div>
+      <div class="count-inner">
+        <div class="item-title">异常率</div>
+        <div class="count">
+          <vue-count-to :duration="2600" :end-val="totalNum.fail_percentage" :start-val="0" class="card-panel-num" />
+          <span class="card-panel-num">%</span>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+  import { onMounted, onUnmounted, ref, watchEffect } from 'vue';
+  import * as echarts from 'echarts';
+  import { executeSqlByKeyAndParam } from '@/api/system/sql.js';
+  import VueCountTo from '@/components/VueCountTo/vue-countTo.vue';
+
+  const pickerOptions = {
+    shortcuts: [{
+      text: '最近一周',
+      onClick(picker) {
+        const end = new Date();
+        const start = new Date();
+        start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
+        picker.$emit('pick', [start, end]);
+      },
+    }, {
+      text: '最近一个月',
+      onClick(picker) {
+        const end = new Date();
+        const start = new Date();
+        start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
+        picker.$emit('pick', [start, end]);
+      },
+    }, {
+      text: '最近三个月',
+      onClick(picker) {
+        const end = new Date();
+        const start = new Date();
+        start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
+        picker.$emit('pick', [start, end]);
+      },
+    }],
+  };
+  let calendarDate = ref(['2023-03-01', '2023-03-30']);
+  let totalNum = ref({
+    total_count: 0,
+    fail_count: 0,
+    fail_percentage: 0,
+  });
+
+  watchEffect(() => {
+    const [startDate, endDate] = calendarDate.value || ['2023-03-01', '2023-03-30'];
+    executeSqlByKeyAndParam('select_time_range_and_number_of_spot_checks', { startDate, endDate }).then(res => {
+      totalNum.value = res.data[0];
+    });
+  });
+</script>
+
+<style scoped>
+  .total {
+    display: flex;
+    justify-content: space-between;
+    margin: 10px 10px 20px;
+  }
+
+  :deep(.el-date-editor) {
+    background: inherit;
+    flex: 0 0 40px;
+    width: 100%;
+    color: #fbffff;
+
+    .el-range-input, .el-range-separator {
+      color: #fbffff;
+    }
+  }
+
+  .item-title {
+    position: relative;
+    display: flex;
+    z-index: 1;
+    align-content: flex-start;
+    background: url('../../../assets/images/titlebg-4340cf1c.png');
+    background-size: 100% 100%;
+    font-weight: 400;
+    font-size: 14px;
+    color: #fbffff;
+    padding: 8px 20px 8px 12px;
+    border-radius: 8px;
+    white-space: nowrap;
+  }
+
+  .count-inner {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+
+  :deep(.card-panel-num) {
+    font-size: 20px;
+    color: #fbffff;
+  }
+</style>

src/views/dataBigScreen/dashboard-work/DeliberateConcealment.vue

@@ -0,0 +1,81 @@
+<template>
+  <div class="deliberate-concealment">
+    <div class="thead">
+      <span style="width: 12%">排名</span>
+      <span>隐匿类别</span>
+      <span>隐匿物品</span>
+      <span>隐匿数量</span>
+      <span>风险等级</span>
+    </div>
+    <vue3-scroll-seamless
+      :classOptions="classOptions"
+      :dataList="list"
+      class="scroll-wrap"
+    >
+      <div v-for="(item, index) of list" :key="index" class="tbody">
+        <span :class="{ main: index < 3 }" class="index" style="width: 12%">{{ index + 1 }}</span>
+        <span>{{ item.item_name }}</span>
+        <span>{{ item.category_name }}</span>
+        <span class="num">{{ item.total_quantity }}</span>
+        <span
+          :class="{ low: item.danger_level === 'LOW', medium: item.danger_level === 'MEDIUM', high: item.danger_level === 'HIGH'}"
+        >
+          {{ item.dict_label }}
+        </span>
+      </div>
+    </vue3-scroll-seamless>
+  </div>
+</template>
+
+<script setup>
+  import { onMounted, ref } from 'vue';
+  import { executeSqlByKeyAndParam } from '@/api/system/sql.js';
+
+  const classOptions = {
+    limitMoveNum: 6,
+  };
+
+  let list = ref([]);
+
+  onMounted(() => {
+    executeSqlByKeyAndParam('intentionally_concealing_the_situation', {}).then(res => {
+      list.value = res.data;
+    });
+  });
+</script>
+
+<style lang="less" scoped>
+  .deliberate-concealment {
+    height: calc(100% - 50px);
+    overflow: hidden;
+  }
+
+  .thead, .tbody {
+    span {
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      color: #fbffff;
+      font-size: 12px;
+      padding: 0 4px;
+      width: 22%;
+
+      &.low, &.num {
+        color: #91cc75;
+      }
+
+      &.medium {
+        color: #fac858;
+      }
+
+      &.high {
+        color: #ee6666;
+      }
+    }
+  }
+
+  .scroll-wrap {
+    margin: 0 auto;
+    overflow: hidden;
+  }
+</style>

src/views/dataBigScreen/dashboard-work/DistributionOfSeizureResults.vue

@@ -0,0 +1,78 @@
+<template>
+  <div ref="distributionOfSeizureResultsChart" class="echarts" />
+</template>
+
+<script setup>
+  import { onMounted, onUnmounted, ref } from 'vue';
+  import * as echarts from 'echarts';
+  import { executeSqlByKeyAndParam } from '@/api/system/sql.js';
+
+  const chart = ref(null);
+  const distributionOfSeizureResultsChart = ref(null);
+  const chartOption = ref({
+    color: [
+      '#3C516A',
+      new echarts.graphic.LinearGradient(0, 1, 0, 0, [{ offset: 0, color: '#0AE8FE' }, {
+        offset: 1,
+        color: '#47B3FE',
+      }], false),
+    ],
+    series: [
+      {
+        type: 'pie',
+        height: '60%',
+        center: ['25%', '50%'],
+        label: {
+          show: false,
+        },
+        data: [],
+      },
+      {
+        type: 'pie',
+        height: '60%',
+        center: ['75%', '50%'],
+        label: {
+          show: false,
+        },
+        data: [],
+      },
+    ],
+  });
+
+  const initChart = () => {
+    chart.value = echarts.init(distributionOfSeizureResultsChart.value, 'macarons');
+    chart.value.setOption(chartOption.value);
+  };
+
+  onMounted(() => {
+    executeSqlByKeyAndParam('category_distribution', {}).then(res => {
+      chartOption.value.series[0].data = res.data.map((el, idx) => {
+        return {
+          value: el.total_quantity,
+          name: el.category_name,
+        };
+      });
+      chartOption.value.series[1].data = chartOption.value.series[0].data;
+      initChart();
+    });
+
+    window.addEventListener('resize', () => {
+      chart.value.resize();
+    });
+  });
+
+  onUnmounted(() => {
+    if (!chart.value) {
+      return;
+    }
+    chart.value.dispose();
+    chart.value = null;
+  });
+</script>
+
+<style scoped>
+  .echarts {
+    height: 100%;
+    width: 100%;
+  }
+</style>

src/views/dataBigScreen/dashboard-work/InspectionStaff.vue

@@ -0,0 +1,88 @@
+<template>
+  <scroll-seamless :list="list" title="巡检人员表现排名">
+    <template #thead>
+      <span class="item ranking">排名</span>
+      <span class="item">巡检员</span>
+      <span class="item">巡检次数</span>
+      <span class="item">发现问题数</span>
+      <span class="item">状态</span>
+    </template>
+    <template #default="{ row, index }">
+      <span class="item ranking">
+        <i :class="{ first: index === 0, second: index === 1, third: index === 2}" class="index">{{ index + 1 }}</i>
+      </span>
+      <span class="item">{{ row.user_name }}</span>
+      <span class="item">{{ row.total_count }}</span>
+      <span class="item num">{{ row.fail_count }}</span>
+      <div class="item">
+        <span :class="{ done: row.result === '优秀', wait: row.result === '不及格' }">
+          {{ row.result }}
+        </span>
+      </div>
+    </template>
+  </scroll-seamless>
+</template>
+
+<script setup>
+  import { onMounted, ref } from 'vue';
+  import { executeSqlByKeyAndParam } from '@/api/system/sql.js';
+  import ScrollSeamless from '@/views/dataBigScreen/dashboard/components/ScrollSeamless.vue';
+
+  let list = ref([]);
+
+  onMounted(() => {
+    executeSqlByKeyAndParam('performance_ranking_of_inspection_personnel', {}).then(res => {
+      list.value = res.data;
+    });
+  });
+</script>
+
+<style lang="less" scoped>
+  .item {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 22.5%;
+
+    &.ranking {
+      width: 10%;
+    }
+
+    .index {
+      display: inline-flex;
+      justify-content: center;
+      align-items: center;
+      width: 16px;
+      height: 16px;
+      background: #5470c6;
+      border-radius: 4px;
+      font-style: normal;
+
+      &.first {
+        background: #ff3232;
+      }
+
+      &.second {
+        background: #ff9800;
+      }
+
+      &.third {
+        background: #ffd200;
+      }
+    }
+
+    .done {
+      padding: 4px 8px;
+      background: rgba(29, 71, 70, .5);
+      color: #12A979;
+      border-radius: 20px;
+    }
+
+    .wait {
+      padding: 4px 8px;
+      background: rgba(76, 72, 51, .5);
+      color: #E7B226;
+      border-radius: 20px;
+    }
+  }
+</style>

src/views/dataBigScreen/dashboard-work/LineChart.vue

@@ -0,0 +1,85 @@
+<template>
+  <div ref="lineChart" class="echarts" />
+</template>
+
+<script setup>
+  import { onMounted, ref } from 'vue';
+  import * as echarts from 'echarts';
+  import { executeSqlByKeyAndParam } from '@/api/system/sql.js';
+  import { useEcharts } from '@/hooks/chart.js';
+
+  const lineChart = ref(null);
+  const chartOption = ref({
+    grid: {
+      left: '30',
+      top: '30',
+      right: '30',
+      bottom: '70',
+      containLabel: true,
+    },
+    xAxis: {
+      data: [],
+      axisLine: {
+        lineStyle: {
+          color: '#fbffff',
+        },
+      },
+      axisLabel: {
+        interval: 3,
+        rotate: 25,
+      },
+    },
+    yAxis: {
+      type: 'value',
+      axisLine: {
+        lineStyle: {
+          color: '#fbffff',
+        },
+      },
+    },
+    series: [
+      {
+        type: 'line',
+        symbol: 'none',
+        smooth: true,
+        itemStyle: {
+          color: '#fc8452',
+          borderDashOffset: 20,
+        },
+        endLabel: {
+          show: false,
+        },
+        areaStyle: {
+          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+            {
+              offset: 0,
+              color: 'rgb(255, 70, 131)',
+            },
+            {
+              offset: 1,
+              color: 'rgb(255, 158, 68)',
+            },
+          ]),
+        },
+        data: [],
+      },
+    ],
+  });
+  const { setOption } = useEcharts(lineChart);
+
+  onMounted(() => {
+    const date = new Date('2023-03-15');
+    executeSqlByKeyAndParam('trend_of_abnormal_inspection_rate', { date: date.getFullYear() + '-' + (date.getMonth() + 1) + '-' + date.getDate() }).then(res => {
+      chartOption.value.series[0].data = res.data.map(el => el.fail_count);
+      chartOption.value.xAxis.data = res.data.map(el => el.day);
+      setOption?.(chartOption.value);
+    });
+  });
+</script>
+
+<style scoped>
+  .echarts {
+    height: 100%;
+    width: 100%;
+  }
+</style>

src/views/dataBigScreen/dashboard-work/SamplingPartySituation.vue

@@ -0,0 +1,248 @@
+<template>
+  <div style="width: 100%; height: calc(100% - 50px)">
+    <div ref="samplingPartySituationChartBar" class="echarts" />
+    <div ref="samplingPartySituationChart" class="echarts" />
+  </div>
+</template>
+
+<script setup>
+  import { onMounted, onUnmounted, ref } from 'vue';
+  import * as echarts from 'echarts';
+  import { executeSqlByKeyAndParam } from '@/api/system/sql.js';
+  import { useEcharts } from '@/hooks/chart.js';
+
+  const samplingPartySituationChartBar = ref(null);
+  const chartBarOption = ref({
+    grid: {
+      left: '20',
+      top: '40',
+      right: '20',
+      bottom: '0',
+      containLabel: true,
+    },
+    xAxis: {
+      type: 'category',
+      data: ['班组级', '科级', '站级'],
+      axisLine: {
+        lineStyle: {
+          color: '#fbffff',
+        },
+      },
+    },
+    yAxis: {
+      type: 'value',
+      name: '抽查次数',
+      axisLine: {
+        lineStyle: {
+          color: '#fbffff',
+        },
+      },
+    },
+    series: [
+      {
+        data: [],
+        type: 'bar',
+      },
+    ],
+  });
+  const { setOption: setSamplingPartySituationBarOption } = useEcharts(samplingPartySituationChartBar);
+
+  const color = {
+    colorA: {
+      type: 'linear',
+      x: 1,
+      y: 0,
+      x2: 0,
+      y2: 1,
+      colorStops: [
+        {
+          offset: 0,
+          color: '#3AF5C3', // 0% 处的颜色
+        },
+        {
+          offset: 1,
+          color: '#3DF1AB', // 100% 处的颜色
+        },
+      ],
+      global: false, // 缺省为 false
+    },
+    colorB: {
+      type: 'linear',
+      x: 1,
+      y: 0,
+      x2: 0,
+      y2: 1,
+      colorStops: [
+        {
+          offset: 0,
+          color: '#14C5CE', // 0% 处的颜色
+        },
+        {
+          offset: 1,
+          color: '#09AEE8', // 100% 处的颜色
+        },
+      ],
+      global: false, // 缺省为 false
+    },
+    colorC: {
+      type: 'linear',
+      x: 1,
+      y: 0,
+      x2: 0,
+      y2: 1,
+      colorStops: [
+        {
+          offset: 0,
+          color: '#FF664E', // 0% 处的颜色
+        },
+        {
+          offset: 1,
+          color: '#FF4056', // 100% 处的颜色
+        },
+      ],
+      global: false, // 缺省为 false
+    },
+  };
+  const ops = ref({
+    radius: '60%',
+    startAngle: 90,
+    endAngle: -270,
+    pointer: {
+      show: false,
+    },
+    splitLine: {
+      show: false,
+    },
+    axisTick: {
+      show: false,
+    },
+    axisLabel: {
+      show: false,
+    },
+    title: {
+      fontSize: 12,
+      color: '#fbffff',
+    },
+    detail: {
+      fontSize: 12,
+      color: '#fbffff',
+    },
+  });
+  const samplingPartySituationChart = ref(null);
+  const chartOption = ref({
+    series: [
+      {
+        type: 'gauge',
+        center: ['15%', '50%'],
+        data: [
+          {
+            value: 0,
+            name: '班组级异常率',
+            title: {
+              offsetCenter: ['0%', '-10%'],
+            },
+            detail: {
+              valueAnimation: true,
+              formatter: '{value}%',
+            },
+          },
+        ],
+        ...ops.value,
+        progress: {
+          show: true,
+          overlap: false,
+          roundCap: true,
+          clip: false,
+          itemStyle: {
+            color: color.colorA,
+          },
+        },
+      },
+      {
+        type: 'gauge',
+        center: ['50%', '50%'],
+        data: [
+          {
+            value: 0,
+            name: '班科级异常率',
+            title: {
+              offsetCenter: ['0%', '-10%'],
+            },
+            detail: {
+              valueAnimation: true,
+              formatter: '{value}%',
+            },
+          },
+        ],
+        ...ops.value,
+        progress: {
+          show: true,
+          overlap: false,
+          roundCap: true,
+          clip: false,
+          itemStyle: {
+            color: color.colorA,
+          },
+        },
+      },
+      {
+        type: 'gauge',
+        center: ['85%', '50%'],
+        data: [
+          {
+            value: 0,
+            name: '站级异常率',
+            title: {
+              offsetCenter: ['0%', '-10%'],
+            },
+            detail: {
+              valueAnimation: true,
+              formatter: '{value}%',
+            },
+          },
+        ],
+        ...ops.value,
+        progress: {
+          show: true,
+          overlap: false,
+          roundCap: true,
+          clip: false,
+          itemStyle: {
+            color: color.colorA,
+          },
+        },
+      },
+    ],
+  });
+  const { setOption: setSamplingPartySituationOption } = useEcharts(samplingPartySituationChart);
+
+
+  onMounted(() => {
+    executeSqlByKeyAndParam('spot_check_the_situation_of_the_inspection_party', {}).then(res => {
+      const data = res.data;
+      chartBarOption.value.series[0].data = data.map(el => el.total_count);
+      const levelMap = {
+        TEAM_LEVEL: 0,
+        DEPARTMENT_LEVEL: 1,
+        STATION_LEVEL: 2,
+      };
+
+      data.forEach(el => {
+        const index = levelMap[el.check_level];
+        if (index !== undefined) {
+          chartOption.value.series[index].progress.itemStyle.color = el.fail_percentage <= 30 ? color.colorA : el.fail_percentage <= 60 ? color.colorB : color.colorC;
+          chartOption.value.series[index].data[0].value = el.fail_percentage;
+        }
+      });
+      setSamplingPartySituationBarOption?.(chartBarOption.value);
+      setSamplingPartySituationOption?.(chartOption.value);
+    });
+  });
+</script>
+
+<style scoped>
+  .echarts {
+    height: 50%;
+    width: 100%;
+  }
+</style>

src/views/dataBigScreen/dashboard-work/SpotCheckContent.vue

@@ -0,0 +1,170 @@
+<template>
+  <div class="abnormal-situation-ranking">
+    <div ref="abnormalSituationRankingChart" class="echarts" />
+
+    <div class="item">
+      <div v-for="(item, index) in list" class="item-line">
+        <span :style="{background:color[index]}" class="color"></span>
+        <span>{{ item.name }}</span>
+      </div>
+    </div>
+  </div>
+
+</template>
+
+<script setup>
+  import { computed, onMounted, ref } from 'vue';
+  import * as echarts from 'echarts';
+  import { executeSqlByKeyAndParam } from '@/api/system/sql.js';
+  import { useEcharts } from '@/hooks/chart.js';
+
+  const color = [
+    '#1DD8FE',
+    '#8639F8',
+  ];
+  const abnormalSituationRankingChart = ref(null);
+  const chartOption = ref({
+    color,
+    radar: [
+      {
+        indicator: [],
+        nameGap: 3,
+        center: ['50%', '50%'],
+        radius: 80,
+        splitNumber: 4,
+        axisName: {
+          color: '#fbffff',
+        },
+        axisLine: {
+          lineStyle: {
+            color: '#fbffff',
+            opacity: 0.1,
+          },
+        },
+        splitArea: {
+          areaStyle: {
+            color: ['none', 'none'],
+          },
+        },
+        splitLine: {
+          lineStyle: {  //所有圆环分隔线。
+            color: '#fbffff', //分隔线颜色
+            opacity: 0.5,
+          },
+        },
+      },
+    ],
+    series: [
+      {
+        type: 'radar',
+        data: [
+          {
+            value: [],
+            symbol: 'none',
+            areaStyle: {
+              color: new echarts.graphic.RadialGradient(1, 1, 1, [
+                {
+                  color: 'rgba(24,139,178, 0.5)',
+                  offset: 0,
+                },
+                {
+                  color: 'rgba(58,146,228, 0.9)',
+                  offset: 1,
+                },
+              ]),
+            },
+          },
+          {
+            value: [],
+            symbol: 'none',
+            areaStyle: {
+              color: new echarts.graphic.RadialGradient(1, 1, 1, [
+                {
+                  color: 'rgba(58,148,228, 0.5)',
+                  offset: 0,
+                },
+                {
+                  color: 'rgba(98,49,189, 0.9)',
+                  offset: 1,
+                },
+              ]),
+            },
+          },
+        ],
+      },
+    ],
+  });
+  const { setOption } = useEcharts(abnormalSituationRankingChart);
+
+  const list = computed(() => {
+    return [
+      { name: '抽查正常', color: color[0] },
+      { name: '抽查异常', color: color[1] },
+    ];
+  });
+
+  onMounted(() => {
+    executeSqlByKeyAndParam('spot_check_content_distribution', {}).then(res => {
+      chartOption.value.radar[0].indicator = res.data.map((el, idx) => {
+        return {
+          max: el.total_count,
+          text: el.category_name,
+        };
+      });
+      chartOption.value.series[0].data[0].value = res.data.map(el => el.pass_count);
+      chartOption.value.series[0].data[1].value = res.data.map(el => el.fail_count);
+
+      setOption?.(chartOption.value);
+    });
+  });
+</script>
+
+<style lang="less" scoped>
+  .abnormal-situation-ranking {
+    display: flex;
+    height: calc(100% - 40px);
+
+    .echarts {
+      flex: 1;
+      height: 100%;
+      width: 100%;
+    }
+
+    .item {
+      width: 100px;
+      padding: 20px 0;
+      display: flex;
+      justify-content: center;
+      flex-flow: column;
+    }
+
+    .item-line {
+      display: flex;
+      align-items: center;
+      color: #fbffff;
+      font-size: 12px;
+      width: 100%;
+      margin: 8px 0;
+
+      .color {
+        display: inline-flex;
+        width: 10px;
+        height: 10px;
+        border-radius: 5px;
+        margin-right: 4px;
+      }
+
+      .text {
+        flex: 1;
+        display: flex;
+        justify-content: space-between;
+
+        span {
+          display: inline-flex;
+          width: 33.33%;
+        }
+      }
+    }
+  }
+</style>
+

src/views/dataBigScreen/dashboard-work/WorkQuality.vue

@@ -0,0 +1,242 @@
+<template>
+  <div class="work-quality">
+    <div class="dashboard-title">航站楼区域巡检热力图</div>
+
+    <div ref="workQualityLine" style="width: 100%; height: 40%" />
+    <div style="display: flex; justify-content: space-between;align-items: center; margin-top: 12px">
+      <div class="dashboard-title">巡检问题分析</div>
+      <div class="dashboard-right-menu">
+        <span
+          :class="{active: currentType === 'ranking_of_seizures_by_department'}"
+          @click="handleClick('ranking_of_seizures_by_department')"
+        >
+          今日
+        </span>
+        <span
+          :class="{active: currentType === 'ranking_of_seizures_by_team'}"
+          @click="handleClick('ranking_of_seizures_by_team')"
+        >
+          本周
+        </span>
+        <span
+          :class="{active: currentType === 'ranking_of_seizures_by_individual'}"
+          @click="handleClick('ranking_of_seizures_by_individual')"
+        >
+          本月
+        </span>
+      </div>
+    </div>
+    <div style="height: 50%; display: flex;">
+      <div ref="workQuality" style="width: 50%; height: 100%" />
+      <div ref="workQualityPie" style="width: 50%; height: 100%" />
+    </div>
+  </div>
+</template>
+<script setup>
+  import { onMounted, ref } from 'vue';
+  import { executeSqlByKeyAndParam } from '@/api/system/sql.js';
+  import { useEcharts } from '@/hooks/chart.js';
+
+  const currentType = ref('ranking_of_seizures_by_department');
+  const handleClick = (type) => {
+    currentType.value = type;
+  };
+
+  // 航站楼区域巡检热力图
+  const workQualityLine = ref(null);
+  const chartLineOption = ref({
+    grid: {
+      left: '10',
+      top: '20',
+      right: '20',
+      bottom: '0',
+      containLabel: true,
+    },
+    visualMap: {
+      min: 0,
+      max: 100,
+      calculable: false,
+      orient: 'horizontal',
+      itemWidth: 0,
+      inRange: {
+        color: ['#F9CBAA', '#C55C10', '#843E0B', '#785E01'],
+      },
+    },
+    xAxis: {
+      type: 'category',
+      data: [],
+      axisLine: {
+        lineStyle: {
+          color: '#fbffff',
+        },
+      },
+      axisTick: {
+        show: false,
+      },
+    },
+    yAxis: {
+      type: 'category',
+      data: [],
+      axisLine: {
+        lineStyle: {
+          color: '#fbffff',
+        },
+      },
+      axisTick: {
+        show: false,
+      },
+    },
+    series: [
+      {
+        type: 'heatmap',
+        data: [],
+        itemStyle: {
+          borderWidth: 1, //设置border宽度
+          borderColor: '#fff',
+        },
+        label: {
+          show: true,
+        },
+      },
+    ],
+  });
+  const { setOption: setLineOption } = useEcharts(workQualityLine);
+
+  // 问题类型分布
+  const workQuality = ref(null);
+  const chartOption = ref({
+    title: {
+      text: '问题类型分布',
+      left: 'center',
+      textStyle: {
+        fontSize: 14,
+        color: '#fbffff',
+      },
+    },
+    legend: {
+      bottom: 10,
+      textStyle: {
+        fontSize: 10,
+        color: '#fbffff',
+      },
+    },
+    tooltip: {
+      show: false,
+    },
+    series: [
+      {
+        type: 'pie',
+        legendHoverLink: false,
+        radius: '40%',
+        center: ['50%', '40%'],
+        label: {
+          show: false,
+          position: 'center',
+        },
+        emphasis: {
+          disable: false,  //是否关闭扇区高亮效果
+          scale: false,    //扇区是否缩放
+          scaleSize: 0,
+        },
+        labelLine: {
+          show: false,
+        },
+        data: [],
+      },
+    ],
+  });
+  const { setOption } = useEcharts(workQuality);
+
+  // 问题严重程度
+  const workQualityPie = ref(null);
+  const chartPieOption = ref({
+    title: {
+      text: '问题严重程度',
+      left: 'center',
+      textStyle: {
+        fontSize: 14,
+        color: '#fbffff',
+      },
+    },
+    legend: {
+      bottom: 10,
+      textStyle: {
+        fontSize: 10,
+        color: '#fbffff',
+      },
+    },
+    tooltip: {
+      show: false,
+    },
+    series: [
+      {
+        type: 'pie',
+        legendHoverLink: false,
+        radius: ['40%', '30%'],
+        center: ['50%', '40%'],
+        label: {
+          show: false,
+          position: 'center',
+        },
+        emphasis: {
+          disable: false,  //是否关闭扇区高亮效果
+          scale: false,    //扇区是否缩放
+          scaleSize: 0,
+        },
+        labelLine: {
+          show: false,
+        },
+        data: [],
+      },
+    ],
+  });
+  const { setOption: setPieOption } = useEcharts(workQualityPie);
+
+  onMounted(() => {
+    // 航站楼区域巡检热力图
+    executeSqlByKeyAndParam('thermal_map_of_terminal_area_inspection', {}).then(res => {
+      const terminals = [...new Set(res.data.map(d => d.terminal_name))]; // Y 轴：航站楼
+      const regions = [...new Set(res.data.map(d => d.regional_name))];   // X 轴：区域
+
+      const heatmapData = res.data.map(item => {
+        const xIndex = regions.indexOf(item.regional_name);
+        const yIndex = terminals.indexOf(item.terminal_name);
+        return [xIndex, yIndex, item.total_count];
+      });
+
+      chartLineOption.value.xAxis.data = regions;
+      chartLineOption.value.yAxis.data = terminals;
+      chartLineOption.value.series[0].data = heatmapData;
+
+      setLineOption?.(chartLineOption.value);
+    });
+    // 巡检问题分析-问题类型分布
+    executeSqlByKeyAndParam('distribution_of_problem_types', {}).then(res => {
+      chartOption.value.series[0].data = res.data.map(el => {
+        return {
+          value: el.percentage,
+          name: el.category_name,
+        };
+      });
+      setOption?.(chartOption.value);
+    });
+    // 巡检问题分析-问题严重程度
+    executeSqlByKeyAndParam('severity_of_the_problem', {}).then(res => {
+      chartPieOption.value.series[0].data = res.data.map(el => {
+        return {
+          value: el.percentage,
+          name: el.dict_label,
+        };
+      });
+      setPieOption?.(chartPieOption.value);
+    });
+  });
+</script>
+
+<style lang="less" scoped>
+  .work-quality {
+    display: flex;
+    flex-flow: column;
+    height: 100%;
+  }
+</style>

src/views/dataBigScreen/dashboard-work/index.vue

@@ -0,0 +1,81 @@
+<template>
+  <dashboard-container>
+    <top-title class="wow slideInDown" name="工作质量管理大屏"></top-title>
+
+    <template #left>
+      <div class="item item-center4">
+        <date-total />
+      </div>
+      <div class="item item-center1">
+        <div class="dashboard-title">分级质量控制</div>
+        <sampling-party-situation />
+      </div>
+      <div class="item item-center3">
+        <div class="dashboard-title">抽查内容分布</div>
+        <spot-check-content />
+      </div>
+    </template>
+    <template #center>
+      <div class="item item-center">
+        <work-quality />
+      </div>
+      <div class="item">
+        <div class="dashboard-title">发现问题次数走势</div>
+        <line-chart />
+      </div>
+    </template>
+    <template #right>
+      <div class="item">
+        <!-- 巡检人员表现排名 -->
+        <inspection-staff />
+      </div>
+      <div class="item">
+        <!-- 异常情况排名 -->
+        <abnormal-situation-ranking />
+      </div>
+      <div class="item">
+        <div class="dashboard-title">实时告警</div>
+        <abnormal-team />
+      </div>
+    </template>
+  </dashboard-container>
+</template>
+
+<script setup>
+  import LineChart from './LineChart.vue';
+  import SpotCheckContent from '@/views/dataBigScreen/dashboard-work/SpotCheckContent.vue';
+  import AbnormalSituationRanking from '@/views/dataBigScreen/dashboard-work/AbnormalSituationRanking.vue';
+  import SamplingPartySituation from '@/views/dataBigScreen/dashboard-work/SamplingPartySituation.vue';
+  import AbnormalTeam from '@/views/dataBigScreen/dashboard-work/AbnormalTeam.vue';
+  import WorkQuality from '@/views/dataBigScreen/dashboard-work/WorkQuality.vue';
+  import TopTitle from '@/views/dataBigScreen/dashboard/TopTitle.vue';
+  import InspectionStaff from '@/views/dataBigScreen/dashboard-work/InspectionStaff.vue';
+  import DateTotal from '@/views/dataBigScreen/dashboard-work/DateTotal.vue';
+  import DashboardContainer from '@/views/dataBigScreen/dashboard/components/DashboardContainer.vue';
+</script>
+
+<style lang="scss" scoped>
+  .item {
+    width: calc(100% + -0px);
+    height: calc(33.33% - 8px);
+    position: relative;
+    background: linear-gradient(to bottom, rgba(8, 97, 117, 0) 0%, #13a2d6 200%);
+    overflow: hidden;
+
+    &.item-center {
+      height: calc(66.66% - 4px);
+    }
+
+    &.item-center1 {
+      height: calc(50% - 4px);
+    }
+
+    &.item-center3 {
+      height: calc(50% - 104px);
+    }
+
+    &.item-center4 {
+      height: 100px;
+    }
+  }
+</style>

src/views/dataBigScreen/dashboard/ChannelDistribution.vue

@@ -0,0 +1,185 @@
+<template>
+  <scroll-seamless :list="list" title="查获通道分布">
+    <template #thead>
+      <span class="item"></span>
+      <span v-for="item in itemNameList" :key="item.channelCode" class="item">
+        {{ item.label }}<br />（{{ item.total }}）
+      </span>
+      <span class="item total">总数</span>
+    </template>
+    <template #default="{ row, index }">
+      <span class="item">{{ row.channelName }}</span>
+      <span v-for="(item, index) in row.item" :key="index" :class="{ num1: item.total < 15, num2: item.total > 15 }"
+        class="item num">
+        {{ item.total }}
+      </span>
+      <span class="item total">{{ row.totalQuantity }}</span>
+    </template>
+  </scroll-seamless>
+</template>
+
+<script setup>
+import { onMounted, ref } from 'vue';
+import { executeSqlByKeyAndParam } from '@/api/system/sql.js';
+import ScrollSeamless from '@/views/dataBigScreen/dashboard/components/ScrollSeamless.vue';
+import { getChannel } from "@/api/largeScreen/largeScreen.js"
+import { treeSelectByType } from "@/api/system/common.js"
+
+
+
+let itemNameList = ref([]);
+let tabData = ref([])
+let list = ref([]);
+const pollingInterval = ref(null);
+onMounted(() => {
+  // fetchData()
+  pollingInterval.value = setInterval(fetchData(), 5000);
+});
+function fetchData() {
+  treeSelectByType("ITEM_CATEGORY", 1).then(res => {
+    tabData.value = res.data
+  })
+  getChannel().then(res => {
+    const resultMap = {};
+
+    let newArr = []
+    res.data.forEach(item => {
+      const { categoryCode, total } = item;
+      tabData.value.forEach(it => {
+        const { code, label, id } = it
+      
+
+        if (categoryCode == id) {
+          newArr.push(item)
+        }
+        if (!resultMap[id] && categoryCode == id) {
+
+
+          resultMap[id] = {
+            id,
+            label,
+            total
+          };
+        } else {
+
+          if (resultMap[id]) {
+            resultMap[id].total = id == categoryCode ? resultMap[id].total + total : resultMap[id].total;
+          }
+        }
+        // if (id == 10 && categoryCode == 10) {
+        //   console.log("锐器")
+        //   debugger
+
+        // }
+
+
+      })
+    });
+    itemNameList.value = Object.values(resultMap);
+
+    const groupedData = newArr.reduce((acc, item) => {
+      const key = item.channelName;
+      if (!acc[key]) {
+        acc[key] = {
+          channelName: key,
+          categoryCode: item.categoryCode,
+          item: [],
+        };
+      }
+      itemNameList.value.map((ite, index) => {
+        if (item.categoryCode == ite.id) {
+          acc[key].item[index] = item
+        } else if (acc[key].item[index]) {
+          acc[key].item[index] = acc[key].item[index]
+        } else {
+          acc[key].item[index] = { total: 0 }
+        }
+      })
+      // 只添加需要的字段
+      // const existingChannel = acc[key].item.find(
+      //   ch => {
+      //     ch.channelCode === item.channelCode
+      //   },
+      // );
+      // if (!existingChannel) {
+      //   acc[key].item.push(item);
+      // } else {y，可累加
+      //   existingChannel.total += item.total;
+      //   // 可选：如果需要合并同 channel 的 quantit
+      // }
+      acc[key].totalQuantity = acc[key].item.reduce((acc, item) => acc + item.total, 0);
+      return acc;
+    }, {});
+  
+
+    // 转换为数组格式
+    list.value = Object.values(groupedData).map(el => {
+      if (el.item.length !== itemNameList.value.length) {
+        el.item.push(...new Array(Math.max(0, itemNameList.value.length - el.item.length)).fill({ total: 0 }));
+      }
+      return el;
+    });
+
+  }).catch(error => {
+    console.error(error);
+    clearInterval(pollingInterval.value);
+  });
+  return fetchData
+}
+</script>
+
+<style lang="less" scoped>
+.item {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: calc(18% - 4px);
+  white-space: nowrap;
+  height: 28px;
+  margin: 2px;
+  overflow: hidden;
+
+  &.total {
+    width: 10%;
+  }
+}
+
+.channel-distribution {
+  position: relative;
+  height: calc(100% - 50px);
+  overflow: hidden;
+}
+
+.channel-distribution-thead,
+.channel-distribution-tbody {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+
+  span {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    color: #fbffff;
+    font-size: 12px;
+    width: calc(16.66% - 4px);
+    white-space: nowrap;
+    height: 28px;
+    margin: 2px;
+  }
+}
+
+.num {
+  display: inline-flex;
+  background: #bbe1ff;
+  padding: 2px;
+
+  &.num1 {
+    background: #7daaff;
+  }
+
+  &.num2 {
+    background: #3d76dd;
+  }
+}
+</style>

src/views/dataBigScreen/dashboard/ClassificationOfSeizedQuantity.vue

@@ -0,0 +1,288 @@
+<template>
+  <div class="classification-of-seized-quantity">
+    <div class="total">
+      <div class="count-inner">
+        <div class="item-title">今日查获总数</div>
+        <div class="count">
+          <vue-count-to :duration="2600" :end-val="totalNum.total" :start-val="0" class="card-panel-num" />
+        </div>
+        <div class="tips">
+          <span class="icon"><svg-icon icon-class="top" /> 较昨日{{ totalPercentage }}</span>
+
+        </div>
+      </div>
+      <div class="count-inner">
+        <div class="item-title">移交公安数量</div>
+        <div class="count">
+          <vue-count-to :duration="2600" :end-val="totalNum.policeTotal" :start-val="0" class="card-panel-num" />
+        </div>
+        <div class="tips">
+          <span class="icon up"><svg-icon icon-class="top" />较昨日{{ policePercentage }}</span>
+        </div>
+      </div>
+      <div class="count-inner">
+        <div class="item-title">隐匿夹带数量</div>
+        <div class="count">
+          <vue-count-to :duration="2600" :end-val="totalNum.concealTotal" :start-val="0" class="card-panel-num" />
+        </div>
+        <div class="tips">
+          <span class="icon down"><svg-icon icon-class="top" />较昨日{{ concealPercentage }}</span>
+        </div>
+      </div>
+    </div>
+    <div class="dashboard-title">查获位置分布</div>
+    <div ref="pieChart" class="echarts" />
+  </div>
+</template>
+<script setup>
+import { onMounted, ref } from 'vue';
+import VueCountTo from '@/components/VueCountTo/vue-countTo.vue';
+import { executeSqlByKeyAndParam } from '@/api/system/sql.js';
+import { useEcharts } from '@/hooks/chart.js';
+import SvgIcon from '@/components/SvgIcon/index.vue';
+import { getTotalSome } from "@/api/largeScreen/largeScreen.js"
+import { getPosition } from "@/api/largeScreen/largeScreen.js"
+
+
+
+let totalNum = ref({
+  total: 0,
+  policeTotal: 0,
+  concealTotal: 0,
+  policeTotalBefore: 0,
+  totalBefore: 0,
+  concealTotalBefore: 0,
+});
+const policePercentage = computed(() => {
+  if (totalNum.value.policeTotalBefore == totalNum.value.policeTotal) return '无变化'
+  if (totalNum.value.policeTotalBefore == 0) return '+100%'
+  else {
+    let num = (totalNum.value.policeTotal - totalNum.value.policeTotalBefore) / totalNum.value.policeTotalBefore * 100
+    return num > 0 ? '+' + num.toFixed(2) + '%' : num.toFixed(2) + '%'
+  }
+});
+const totalPercentage = computed(() => {
+  if (totalNum.value.totalBefore == totalNum.value.total) return '无变化'
+  if (totalNum.value.totalBefore == 0) return '+100%'
+  else {
+    let num = (totalNum.value.total - totalNum.value.totalBefore) / totalNum.value.totalBefore * 100
+    return num > 0 ? '+' + num.toFixed(2) + '%' : num.toFixed(2) + '%'
+  }
+});
+const concealPercentage = computed(() => {
+  if (totalNum.value.concealTotalBefore == totalNum.value.concealTotal) return '无变化'
+  if (totalNum.value.concealTotalBefore == 0) return '+100%'
+  else {
+    let num = (totalNum.value.concealTotal - totalNum.value.concealTotalBefore) / totalNum.value.concealTotalBefore * 100
+    return num > 0 ? '+' + num.toFixed(2) + '%' : num.toFixed(2) + '%'
+  }
+});
+
+const pieChart = ref(null);
+const chartOption = ref({
+  color: ['#5470c6', '#91cc75', '#fac858', '#ee6666'],
+  tooltip: {
+    trigger: 'item',
+    formatter: '{a} <br/>{b}: {c} ({d}%)'
+  },
+  series: [
+    {
+      type: 'pie',
+      name: '部位类别',
+      height: '100%',
+      radius: '50%',
+      label: {
+        position: 'inner',
+      },
+      emphasis: {
+        label: {
+          show: true,
+          fontSize: '14',
+          formatter: '{b}\n{c} ({d}%)'
+        },
+        itemStyle: {
+          shadowBlur: 10,
+          shadowOffsetX: 0,
+          shadowColor: 'rgba(0, 0, 0, 0.5)'
+        }
+      },
+      itemStyle: {
+        borderWidth: 1, //设置border宽度
+        borderColor: '#fff',
+      },
+      labelLine: {
+        show: false,
+      },
+      data: [
+        { name: '行李', value: 200 },
+        { name: '人体', value: 80 },
+        { name: '随身物品', value: 30 },
+      ],
+    },
+    {
+      type: 'pie',
+      name: '位置详情',
+      height: '100%',
+      radius: ['50%', '80%'],
+      labelLayout: {
+        hideOverlap: false
+      },
+      label: {
+        position: 'inner',
+        rotate: 70
+      },
+      itemStyle: {
+        borderWidth: 1,
+        borderColor: '#fff',
+      },
+      data: [
+        { name: '托运行李', value: 100 },
+        { name: '携带行李', value: 100 },
+        { name: '体外衣物', value: 50 },
+        { name: '体内藏匿', value: 30 },
+        { name: '随身包裹', value: 20 },
+        { name: '其他物品', value: 10 },
+      ],
+    },
+  ],
+});
+
+const { setOption } = useEcharts(pieChart);
+const pollingIntervalNum = ref(null);
+const pollingInterval = ref(null);
+onMounted(() => {
+  pollingIntervalNum.value = setInterval(fetchDataNum(), 5000);
+  pollingInterval.value = setInterval(fetchData(), 5000);
+
+});
+function fetchDataNum() {
+  getTotalSome().then(res => {
+    totalNum.value = res.data;
+  }).catch(error => {
+    console.error(error);
+    clearInterval(pollingIntervalNum.value);
+  });
+  return fetchDataNum
+}
+function fetchData() {
+  getPosition().then(res => {
+    chartOption.value.series[0].data = res.data.map((el, idx) => {
+      if (el.checkPositionNameTwo == '无') {
+        return {
+          value: el.total,
+          name: el.checkPositionNameOne,
+        };
+      }
+    });
+    chartOption.value.series[1].data = res.data.map((el, idx) => {
+      if (el.checkPositionNameTwo != '无') {
+        return {
+          value: el.total,
+          name: el.checkPositionNameTwo,
+        };
+      }
+    });
+    setOption?.(chartOption.value);
+  }).catch(error => {
+    console.error(error);
+    clearInterval(pollingInterval.value);
+  });
+  return fetchData
+}
+
+</script>
+
+<style lang="less" scoped>
+.classification-of-seized-quantity {
+  display: flex;
+  flex-flow: column;
+  height: 100%;
+}
+
+.total {
+  display: flex;
+  justify-content: space-between;
+
+  .count-inner {
+    width: calc(33.33% - 8px);
+    padding: 20px;
+    border: 1px solid #363F4C;
+    border-radius: 8px;
+
+    &:nth-child(1) {
+      color: #92C4FC;
+    }
+
+    &:nth-child(2) {
+      color: #C49929;
+    }
+
+    &:nth-child(3) {
+      color: #A83A3F;
+    }
+
+    .item-title {
+      margin-bottom: 8px;
+    }
+
+    .tips {
+      color: #9499A0;
+      font-size: 12px;
+      margin-top: 16px;
+
+      .icon {
+        margin-right: 8px;
+        color: #10B981;
+
+        .svg-icon {
+          fill: #10B981;
+          transform: rotate(-90deg);
+        }
+
+        &.up {
+          color: #EF4444;
+
+          .svg-icon {
+            fill: #EF4444;
+          }
+        }
+
+        &.down {
+          .svg-icon {
+            transform: rotate(90deg);
+          }
+        }
+      }
+    }
+  }
+}
+
+:deep(.card-panel-num) {
+  margin: 8px 0;
+  font-size: 20px;
+  // color: #fbffff;
+}
+
+.echarts {
+  flex: 1;
+  width: 100%;
+}
+
+.dashboard-title {
+  position: relative;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  flex-wrap: nowrap;
+  flex-direction: row;
+  z-index: 1;
+  align-content: flex-start;
+  background: url(/src/assets/images/titlebg-4340cf1c.png);
+  background-size: 100% 100%;
+  font-weight: 400;
+  font-size: 14px;
+  color: #fbffff;
+  padding: 0 20px;
+  height: 42px;
+}
+</style>

src/views/dataBigScreen/dashboard/DeliberateConcealment.vue

@@ -0,0 +1,156 @@
+<!-- ConcealScroll.vue -->
+<template>
+  <scroll-seamless :list="list" title="隐匿夹带情况">
+    <template #thead>
+      <span class="item ranking">排名</span>
+      <span class="item start">隐匿类别</span>
+      <span class="item start">隐匿物品</span>
+      <span class="item">隐匿数量</span>
+      <span class="item">隐匿部位</span>
+    </template>
+    <template #default="{ row, index }">
+      <span class="item ranking">
+        <i :class="{ first: index === 0, second: index === 1, third: index === 2 }" class="index">
+          {{ index + 1 }}
+        </i>
+      </span>
+      <span class="item start">{{ row.categoryNameTwo }}</span>
+      <span class="item start">{{ row.itemName }}</span>
+      <span class="item num">{{ row.quantity }}</span>
+      <span class="item">{{ row.checkPositionNameOne }}</span>
+    </template>
+  </scroll-seamless>
+</template>
+
+<script setup>
+import { ref, onMounted } from 'vue';
+import { getConceal } from '@/api/largeScreen/largeScreen.js';
+import ScrollSeamless from '@/views/dataBigScreen/dashboard/components/ScrollSeamless.vue';
+const list = ref([]);
+const pollingInterval = ref(null);
+onMounted(() => {
+  pollingInterval.value = setInterval(fetchData(), 5000);
+});
+function fetchData() {
+  getConceal().then((res) => {
+    list.value = res.data;
+  })
+    .catch(error => {
+      console.error(error);
+      clearInterval(pollingInterval.value);
+    });
+  return fetchData
+}
+
+
+</script>
+
+<style scoped>
+/* 表头样式保持原样 */
+::v-deep(.thead) {
+  display: flex;
+  align-items: center;
+  width: 100%;
+  height: 40px;
+  padding: 0 16px;
+  color: #fbffff;
+  font-size: 12px;
+  font-weight: bold;
+}
+
+::v-deep(.thead .item) {
+  width: 20%;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  white-space: nowrap;
+}
+
+::v-deep(.thead .item.ranking) {
+  width: 10%;
+
+}
+
+::v-deep(.thead .item.start) {
+  text-align: left;
+  justify-content: start;
+}
+
+/* 滚动容器 */
+.scroll-box {
+  height: calc(100% - 40px);
+  /* 去掉表头高度 */
+  overflow: hidden;
+  position: relative;
+}
+
+.scroll-list {
+  display: flex;
+  flex-direction: column;
+  animation-name: scroll;
+  animation-timing-function: linear;
+  animation-iteration-count: infinite;
+}
+
+@keyframes scroll {
+  0% {
+    transform: translateY(0);
+  }
+
+  100% {
+    transform: translateY(-50%);
+  }
+}
+
+/* 行样式 */
+.list-item {
+  display: flex;
+  align-items: center;
+  height: 24px;
+  flex-shrink: 0;
+  color: #fbffff;
+  font-size: 12px;
+  padding: 0 16px;
+}
+
+.list-item .item {
+  width: 20%;
+  text-align: center;
+  white-space: nowrap;
+}
+
+.list-item .item.start {
+  text-align: left;
+}
+
+.list-item .item.ranking {
+  width: 10%;
+}
+
+.index {
+  display: inline-flex;
+  justify-content: center;
+  align-items: center;
+  width: 16px;
+  height: 16px;
+  background: #5470c6;
+  border-radius: 4px;
+  font-style: normal;
+}
+
+.index.first {
+  background: #ff3232;
+}
+
+.index.second {
+  background: #ff9800;
+}
+
+.index.third {
+  background: #ffd200;
+}
+
+.num {
+  color: #91cc75;
+}
+</style>

src/views/dataBigScreen/dashboard/LineChart.vue

@@ -0,0 +1,95 @@
+<template>
+  <div ref="lineChart" class="echarts" />
+</template>
+
+<script setup>
+import { onMounted, ref } from 'vue';
+import * as echarts from 'echarts';
+import { executeSqlByKeyAndParam } from '@/api/system/sql.js';
+import { useEcharts } from '@/hooks/chart.js';
+import { getTimeSpan } from "@/api/largeScreen/largeScreen.js"
+
+
+const lineChart = ref(null);
+const chartOption = ref({
+  grid: {
+    left: '30',
+    top: '30',
+    right: '30',
+    bottom: '70',
+    containLabel: true,
+  },
+  xAxis: {
+    data: [],
+    axisLine: {
+      lineStyle: {
+        color: '#fbffff',
+      },
+    },
+    axisLabel: {
+      interval: 3,
+    },
+  },
+  yAxis: {
+    type: 'value',
+    axisLine: {
+      lineStyle: {
+        color: '#fbffff',
+      },
+    },
+  },
+  series: [
+    {
+      type: 'line',
+      symbol: 'none',
+      smooth: true,
+      itemStyle: {
+        color: '#fc8452',
+        borderDashOffset: 20,
+      },
+      endLabel: {
+        show: false,
+      },
+      areaStyle: {
+        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+          {
+            offset: 0,
+            color: 'rgb(255, 70, 131)',
+          },
+          {
+            offset: 1,
+            color: 'rgb(255, 158, 68)',
+          },
+        ]),
+      },
+      data: [],
+    },
+  ],
+});
+const { setOption } = useEcharts(lineChart);
+const pollingInterval = ref(null);
+
+onMounted(() => {
+  const date = new Date('2023-01-01');
+  pollingInterval.value = setInterval(fetchData(), 5000);
+
+});
+function fetchData() {
+  getTimeSpan().then(res => {
+    chartOption.value.series[0].data = res.data.map(el => el.total);
+    chartOption.value.xAxis.data = res.data.map(el => el.hourOfDay + ':00');
+    setOption?.(chartOption.value);
+  }).catch(error => {
+    console.error(error);
+    clearInterval(pollingInterval.value);
+  });
+  return fetchData
+}
+</script>
+
+<style scoped>
+.echarts {
+  height: 100%;
+  width: 100%;
+}
+</style>

src/views/dataBigScreen/dashboard/MajorContrabandCases.vue

@@ -0,0 +1,196 @@
+<template>
+  <scroll-seamless :list="list" title="移交公安情况">
+    <!-- 右侧 Tab -->
+    <template #right-menu>
+      <div class="dashboard-right-menu">
+        <span :class="{ active: currentType === 'ranking_of_seizures_by_department' }"
+          @click="handleClick('ranking_of_seizures_by_department')">今日</span>
+        <span :class="{ active: currentType === 'ranking_of_seizures_by_team' }"
+          @click="handleClick('ranking_of_seizures_by_team')">本周</span>
+        <span :class="{ active: currentType === 'ranking_of_seizures_by_individual' }"
+          @click="handleClick('ranking_of_seizures_by_individual')">本月</span>
+      </div>
+    </template>
+    <template #thead>
+      <span class="item">违禁品类型</span>
+      <span class="item">查获数量</span>
+      <span class="item">查获地点</span>
+      <span class="item">查获人</span>
+    </template>
+    <template #default="{ row, index }">
+      <span class="item icon">
+        <span class="icon">
+          <svg-icon :icon-class="row.svg" />
+        </span>
+        {{ row.categoryNameTwo }}
+      </span>
+      <span class="item">{{ row.quantity }}</span>
+      <span class="item">{{ row.regionalName }}</span>
+      <span class="item">{{ row.nackName }}</span>
+
+      <!-- <span class="item detail">详情</span> -->
+    </template>
+  </scroll-seamless>
+</template>
+
+<script setup>
+import { ref, onMounted } from 'vue';
+import { getPolice } from '@/api/largeScreen/largeScreen.js';
+import ScrollSeamless from '@/views/dataBigScreen/dashboard/components/ScrollSeamless.vue';
+
+function today() {
+  return new Date().toISOString().slice(0, 10);
+}
+function weekRange() {
+  const d = new Date();
+  const day = d.getDay() || 7; // 周日返回 7
+  const start = new Date(d);
+  start.setDate(d.getDate() - day + 1);
+  const end = new Date(start);
+  end.setDate(start.getDate() + 6);
+  return {
+    startDate: start.toISOString().slice(0, 10),
+    endDate: end.toISOString().slice(0, 10)
+  };
+}
+function monthRange() {
+  const d = new Date();
+  const start = new Date(d.getFullYear(), d.getMonth(), 1);
+  const end = new Date(d.getFullYear(), d.getMonth() + 1, 0);
+  return {
+    startDate: start.toISOString().slice(0, 10),
+    endDate: end.toISOString().slice(0, 10)
+  };
+}
+
+/* -------------- 组件逻辑 -------------- */
+const list = ref([]);
+const currentType = ref('ranking_of_seizures_by_department');
+const svg = ['du', 'huo', 'baozha'];
+const pollingInterval = ref(null);
+function loadData() {
+  let params = {};
+  switch (currentType.value) {
+    case 'ranking_of_seizures_by_department':
+      params = { specifiedDate: today() };
+      break;
+    case 'ranking_of_seizures_by_team':
+      params = weekRange();
+      break;
+    case 'ranking_of_seizures_by_individual':
+      params = monthRange();
+      break;
+  }
+  getPolice(params).then(res => {
+    const total = res.data.reduce((pre, cur) => pre + cur.quantity, 0);
+    list.value = res.data.map(item => ({
+      ...item,
+      svg: svg[Math.floor(Math.random() * svg.length)],
+      percentage: Math.floor((item.quantity / total) * 100),
+    }));
+  }).catch(error => {
+    console.error(error);
+    clearInterval(pollingInterval.value);
+  });
+  return loadData
+}
+
+const handleClick = (type) => {
+  currentType.value = type;
+  loadData();
+};
+
+onMounted(() => {
+  pollingInterval.value = setInterval(loadData(), 5000);
+}
+);
+</script>
+
+<style scoped>
+/* 字段标题 */
+.thead {
+  display: flex;
+  align-items: center;
+  width: 100%;
+  height: 40px;
+  padding: 0 16px;
+  color: #fbffff;
+  font-size: 12px;
+  font-weight: bold;
+}
+
+.thead .item {
+  flex: 1;
+  text-align: center;
+}
+
+/* 滚动容器 */
+.scroll-box {
+  width: 100%;
+  /* height: calc(100% - 40px); */
+  margin: 0 auto;
+  overflow: hidden;
+  color: #fbffff;
+  font-size: 12px;
+  padding: 0 16px;
+}
+
+.scroll-list {
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  animation-name: scroll;
+  animation-timing-function: linear;
+  animation-iteration-count: infinite;
+}
+
+@keyframes scroll {
+  0% {
+    transform: translateY(0);
+  }
+
+  100% {
+    transform: translateY(-50%);
+  }
+}
+
+/* 行样式 */
+.list-item {
+  display: flex;
+  align-items: center;
+  height: 36px;
+  flex-shrink: 0;
+}
+
+.list-item .item {
+  flex: 1;
+  text-align: center;
+  white-space: nowrap;
+}
+
+.icon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.detail {
+  color: #8abaef;
+}
+
+.dashboard-right-menu span {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 12px;
+  background: #11134b;
+  padding: 4px 8px;
+  margin: -4px 0;
+  border-radius: 4px;
+  color: #fbffff;
+}
+
+.dashboard-right-menu span.active {
+  background: #171b75;
+}
+</style>

src/views/dataBigScreen/dashboard/PieChart.vue

@@ -0,0 +1,86 @@
+<template>
+  <div ref="pieChart" class="echarts" />
+</template>
+
+<script setup>
+import { onMounted, ref } from 'vue';
+import { executeSqlByKeyAndParam } from '@/api/system/sql.js';
+import { useEcharts } from '@/hooks/chart.js';
+import { getCategory } from "@/api/largeScreen/largeScreen.js"
+
+
+const pieChart = ref(null);
+const color = [
+  '#5470c6',
+  '#91cc75',
+  '#fac858',
+  '#ee6666',
+  '#fc8452',
+];
+const chartOption = ref({
+  color,
+  series: [
+    {
+      type: 'pie',
+      height: '80%',
+      label: {
+        normal: {
+          formatter: '{bg|}{title|{b}}\n{text|{@value}%}',
+          rich: {
+            bg: {
+              width: 10,
+              height: 10,
+              borderRadius: 50,
+            },
+            title: {
+              color: '#fbffff',
+              lineHeight: 16,
+              padding: [0, 0, 0, 4],
+            },
+            text: {
+              color: '#fbffff',
+              opacity: 0.5,
+              lineHeight: 16,
+              padding: [0, 0, 0, 14],
+            },
+          },
+          textStyle: {
+            color: '#fbffff',
+            fontSize: 12,
+          },
+        },
+      },
+      data: [],
+    },
+  ],
+});
+const { setOption } = useEcharts(pieChart);
+const pollingInterval = ref(null);
+onMounted(() => {
+  pollingInterval.value = setInterval(fetchData(), 5000);
+});
+function fetchData() {
+  getCategory().then(res => {
+    chartOption.value.series[0].data = res.data.map((el, idx) => {
+      return {
+        value: el.scale,
+        name: el.name,
+        label: { rich: { bg: { backgroundColor: color[idx % color.length] } } },
+      };
+    });
+    setOption?.(chartOption.value);
+  }).catch(error => {
+    console.error(error);
+    clearInterval(pollingInterval.value);
+  });
+  return fetchData
+}
+</script>
+
+<style scoped>
+.echarts {
+  height: 100%;
+  width: 100%;
+  margin-top: 12px;
+}
+</style>

src/views/dataBigScreen/dashboard/PieRadiusChart.vue

@@ -0,0 +1,152 @@
+<template>
+  <div class="pie-radius-chart-content">
+    <div ref="pieRadiusChart" class="echarts item" />
+
+    <div class="item">
+      <div v-for="(item, index) in list" class="item-line">
+        <span :style="{ background: color[index] }" class="color"></span>
+        <div class="text">
+          <span>{{ item.name }}</span>
+          <span>{{ item.pie }}</span>
+          <span>{{ item.value }}</span>
+        </div>
+      </div>
+    </div>
+  </div>
+
+</template>
+
+<script setup>
+import { computed, onMounted, ref } from 'vue';
+import { executeSqlByKeyAndParam } from '@/api/system/sql.js';
+import { useEcharts } from '@/hooks/chart.js';
+import { getPost } from "@/api/largeScreen/largeScreen.js"
+
+
+const color = [
+  '#5470c6',
+  '#91cc75',
+  '#fac858',
+  '#ee6666',
+  '#73c0de',
+  '#3ba272',
+  '#fc8452',
+];
+const pieRadiusChart = ref(null);
+const chartOption = ref({
+  tooltip: {
+    trigger: 'item',
+  },
+  color,
+  graphic: {
+    type: 'text',
+    left: 'center',
+    top: 'center',
+    style: {
+      text: '总数',
+      textAlign: 'center',
+      fill: '#fbffff',
+      width: 30,
+      height: 30,
+      fontSize: 14,
+    },
+  },
+  series: [
+    {
+      name: 'Access From',
+      type: 'pie',
+      radius: ['60%', '80%'],
+      avoidLabelOverlap: false,
+      label: {
+        show: false,
+        position: 'center',
+      },
+      emphasis: {
+        label: {
+          show: false,
+          fontSize: 40,
+          fontWeight: 'bold',
+        },
+      },
+      labelLine: {
+        show: false,
+      },
+      data: [],
+    },
+  ],
+});
+const { setOption } = useEcharts(pieRadiusChart);
+const pollingInterval = ref(null);
+const list = computed(() => {
+  return chartOption.value.series[0].data;
+});
+
+
+onMounted(() => {
+  pollingInterval.value = setInterval(fetchData(), 5000);
+});
+function fetchData() {
+  getPost().then(res => {
+    chartOption.value.series[0].data = res.data.map((el, idx) => {
+      return {
+        value: el.total,
+        name: el.name,
+      };
+    });
+    let dataNum = res.data.reduce((pre, cur) => pre + cur.total, 0);
+    chartOption.value.graphic.style.text = '总数量' + '\n\n' + dataNum;
+    setOption?.(chartOption.value);
+  }).catch(error => {
+    console.error(error);
+    clearInterval(pollingInterval.value);
+  });
+  return fetchData
+}
+</script>
+
+<style lang="less" scoped>
+.echarts {
+  height: 100%;
+  width: 100%;
+}
+
+.pie-radius-chart-content {
+  display: flex;
+  height: calc(100% - 40px);
+
+  .item {
+    width: 50%;
+    padding: 20px 0;
+    display: flex;
+    justify-content: space-between;
+    flex-flow: column;
+  }
+
+  .item-line {
+    display: flex;
+    align-items: center;
+    color: #fbffff;
+    font-size: 12px;
+    width: 100%;
+
+    .color {
+      display: inline-flex;
+      width: 10px;
+      height: 10px;
+      border-radius: 5px;
+      margin-right: 4px;
+    }
+
+    .text {
+      flex: 1;
+      display: flex;
+      justify-content: space-between;
+
+      span {
+        display: inline-flex;
+        width: 33.33%;
+      }
+    }
+  }
+}
+</style>

src/views/dataBigScreen/dashboard/SeizedRanking.vue

@@ -0,0 +1,227 @@
+<template>
+  <scroll-seamless :list="list" title="查获排名">
+    <template #right-menu>
+      <div class="dashboard-right-menu">
+        <span :class="{ active: currentType === 1 }" @click="handleClick(1)">
+          按科室
+        </span>
+        <span :class="{ active: currentType === 2 }" @click="handleClick(2)">
+          按班组
+        </span>
+        <span :class="{ active: currentType === 3 }" @click="handleClick(3)">
+          按个人
+        </span>
+      </div>
+    </template>
+    <template #default="{ row, index }">
+      <span class="item ranking">
+        <i :class="{ first: index === 0, second: index === 1, third: index === 2 }" class="index">{{ index + 1
+        }}</i>
+      </span>
+      <span class="item title" :class="{ 'hide-left': currentType === 2 }" :title="row.name">{{ row.name }}</span>
+      <el-progress :percentage="row.percentagePer" :show-text="false" :stroke-width="10" :text-inside="true"
+        color="#409eff" />
+
+      <span class="num">{{ row.total }}</span>
+      <span class="pie">占比{{ row.scale }}%</span>
+    </template>
+  </scroll-seamless>
+</template>
+
+<script setup>
+import { ref, watchEffect } from 'vue';
+import { executeSqlByKeyAndParam } from '@/api/system/sql.js';
+import { getRank } from "@/api/largeScreen/largeScreen.js"
+import ScrollSeamless from '@/views/dataBigScreen/dashboard/components/ScrollSeamless.vue';
+
+const currentType = ref(1);
+let list = ref([]);
+const pollingInterval = ref(null);
+watchEffect(() => {
+  getRank({ 'type': currentType.value }).then(res => {
+    const newList = res.data.map(el => {
+      return {
+        ...el,
+        percentagePer: el.scale,
+      };
+    });
+    list.value = newList
+
+  });
+});
+const handleClick = (type) => {
+  currentType.value = type;
+  console.log("newList", list.value)
+
+};
+onMounted(() => {
+  pollingInterval.value = setInterval(fetchData(), 5000);
+});
+function fetchData() {
+  getRank({ 'type': currentType.value }).then(res => {
+    const newList = res.data.map(el => {
+      return {
+        ...el,
+        percentagePer: el.scale,
+      };
+    });
+    list.value = newList
+  }).catch(error => {
+    clearInterval(pollingInterval.value);
+  });
+  return fetchData
+}
+</script>
+
+<style lang="less" scoped>
+.item {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+
+  &.ranking {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    margin-right: 8px;
+    flex-shrink: 0;
+  }
+
+ &.title {
+    display: inline-flex;
+    justify-content: flex-start;
+    min-width: 80px;
+    max-width: 150px;
+    overflow: hidden;
+    margin-right: 12px;
+    white-space: nowrap;
+    text-align: left;
+    position: relative;
+  }
+
+  // 按班组时隐藏左边内容的样式
+  &.title.hide-left {
+    direction: rtl;
+    text-align: left;
+  }
+
+
+
+  &.title.hide-left span {
+    direction: ltr;
+    display: inline-block;
+    width: 100%;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+
+
+  .index {
+    display: inline-flex;
+    justify-content: center;
+    align-items: center;
+    width: 16px;
+    height: 16px;
+    background: #5470c6;
+    border-radius: 4px;
+    font-style: normal;
+
+    &.first {
+      background: #ff3232;
+    }
+
+    &.second {
+      background: #ff9800;
+    }
+
+    &.third {
+      background: #ffd200;
+    }
+  }
+}
+
+
+.num {
+  width: 40px;
+  margin-left: 12px;
+  flex-shrink: 0;
+}
+
+:deep(.el-progress) {
+  flex: 1;
+  min-width: 60px;
+  flex-shrink: 0;
+}
+
+:deep(.el-progress-bar__outer) {
+  background-color: #164B7F;
+}
+
+
+.pie {
+  width: 80px;
+  margin-left: 12px;
+  color: #73c0de;
+  white-space: nowrap;
+  flex-shrink: 0;
+}
+
+
+.list-item {
+  display: flex;
+  align-items: center;
+  color: #fbffff;
+  padding: 0px 16px;
+  font-size: 12px;
+  margin-top: 12px;
+  /* 可选 */
+}
+
+
+.item {
+  text-align: center;
+  white-space: nowrap;
+}
+
+.dashboard-right-menu span {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 12px;
+  background: #11134b;
+  padding: 4px 8px;
+  margin: -4px 0;
+  border-radius: 4px;
+  color: #fbffff;
+}
+
+.dashboard-right-menu span.active {
+  background: #171b75;
+}
+
+/* 滚动容器 */
+.scroll-box {
+  height: 100%;
+  overflow: hidden;
+  position: relative;
+  margin-top: 12px;
+}
+
+.scroll-list {
+  display: flex;
+  flex-direction: column;
+  animation-name: scroll;
+  animation-timing-function: linear;
+  animation-iteration-count: infinite;
+}
+
+@keyframes scroll {
+  0% {
+    transform: translateY(0);
+  }
+
+  100% {
+    transform: translateY(-50%);
+  }
+}
+</style>

src/views/dataBigScreen/dashboard/TopTitle.vue

@@ -0,0 +1,91 @@
+<template>
+  <div class="pageTop wow fadeInDown">
+    <div class="pageTopbg"></div>
+    <div class="zhuangshi">
+      <div class="leftZhuangshi"></div>
+      <div class="rightZhuangshi"></div>
+    </div>
+    <div class="left"></div>
+    <div class="title">
+      <span>{{ name }}</span>
+    </div>
+    <div class="right">
+    </div>
+  </div>
+</template>
+
+<script name="TopTitle" setup>
+  const props = defineProps({
+    name: {
+      name: String,
+      default: '',
+    },
+  });
+</script>
+
+<style lang="less" scoped>
+  .pageTop {
+    position: absolute;
+    width: 100%;
+    height: 260px;
+    flex-shrink: 0;
+    display: flex;
+    justify-content: center;
+    align-items: flex-start;
+    flex-wrap: nowrap;
+    flex-direction: row;
+    align-content: flex-start;
+    pointer-events: none;
+    background: url('../../../assets/images/topbg-2521ad78.png') center top no-repeat;
+
+    .zhuangshi {
+      position: absolute;
+      top: 10px;
+      width: 96%;
+      left: 2%;
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      flex-wrap: nowrap;
+      flex-direction: row;
+      align-content: flex-start;
+      z-index: 100;
+
+      .leftZhuangshi, .rightZhuangshi {
+        width: 192px;
+        background: url('../../../assets/images/下载.png') left center no-repeat;
+        height: 29px;
+        position: relative;
+      }
+
+      .rightZhuangshi {
+        position: relative;
+        transform: scaleX(-1);
+      }
+    }
+
+    .title {
+      position: relative;
+      width: 40%;
+      display: flex;
+      flex-shrink: 0;
+      justify-content: center;
+      align-items: flex-start;
+      flex-wrap: nowrap;
+      flex-direction: row;
+      align-content: flex-start;
+
+      span {
+        font-size: 36px;
+        font-weight: normal;
+        color: #FFFFFF;
+        margin-top: 15px;
+        letter-spacing: 2px;
+        background: linear-gradient(0deg, rgba(10, 177, 255, 1) 0%, rgba(255, 255, 255, 1) 50.2685546875%, rgba(255, 255, 255, 1) 83.7890625%, rgba(10, 177, 255, 1) 100%);
+        -webkit-background-clip: text;
+        -webkit-text-fill-color: transparent;
+      }
+    }
+
+  }
+</style>

src/views/dataBigScreen/dashboard/components/DashboardContainer.vue

@@ -0,0 +1,97 @@
+<template>
+  <div :class="{ none: !$slots.default}" class="dashboard-container">
+    <slot></slot>
+    <div v-if="!props.hide" class="wow home-main">
+      <div class="home-main-left wow slideInLeft">
+        <slot name="left"></slot>
+      </div>
+      <div class="home-main-center wow bounceIn">
+        <slot name="center"></slot>
+      </div>
+      <div class="home-main-right wow slideInRight">
+        <slot name="right"></slot>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+  import { onMounted } from 'vue';
+  import WOW from 'wow.js';
+
+  const props = defineProps({
+    hide: {
+      type: Boolean,
+      default: false,
+    },
+  });
+
+  onMounted(() => {
+    const wow = new WOW();
+    wow.init();
+  });
+</script>
+
+<style lang="scss" scoped>
+  .dashboard-container {
+    position: relative;
+    width: 100%;
+    min-height: 100vh;
+    background: url('../../../../assets/images/bg-99b6904c.png');
+    background-size: 100% 100%;
+
+    &.none {
+      .home-main {
+        padding-top: 20px;
+      }
+    }
+
+    .home-main {
+      position: relative;
+      width: calc(100% - 20px);
+      padding: 100px 0 20px;
+      margin-left: 20px;
+      height: 100vh;
+      display: flex;
+      z-index: 1;
+      justify-content: space-between;
+      align-items: flex-start;
+      flex-wrap: nowrap;
+      flex-direction: row;
+      pointer-events: none;
+      overflow: hidden;
+
+      .home-main-left, .home-main-right {
+        width: calc(30% + -0px);
+        position: relative;
+        height: calc(100% + -0px);
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        flex-wrap: nowrap;
+        flex-direction: column;
+        align-content: flex-start;
+        z-index: 2;
+        pointer-events: initial;
+      }
+
+      .home-main-left-inner, .home-main-center, .home-main-right-inner {
+        width: calc(100% + -0px);
+        height: 100%;
+        position: relative;
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        flex-wrap: nowrap;
+        flex-direction: column;
+        align-content: flex-start;
+        z-index: 2;
+        pointer-events: initial;
+      }
+
+      .home-main-center {
+        width: calc(40% - 20px);
+      }
+    }
+  }
+</style>

src/views/dataBigScreen/dashboard/components/DashboardItemContainer.vue

@@ -0,0 +1,70 @@
+<template>
+  <div style="height: 100%; overflow: hidden">
+    <div class="scroll-seamless-header">
+      <span class="dashboard-title">{{ title }}</span>
+      <div class="right-menu">
+        <slot name="right-menu"></slot>
+      </div>
+    </div>
+
+    <div class="dashboard-chart-container dashboard-bg">
+      <slot></slot>
+    </div>
+  </div>
+</template>
+
+<script setup>
+const props = defineProps({
+  title: {
+    type: String,
+    default: '',
+  },
+  list: {
+    type: Array,
+    default: () => [],
+  },
+});
+</script>
+
+<style lang="less" scoped>
+.scroll-seamless-header {
+  width: 100%;
+  height: 42px;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+
+  .right-menu {
+    margin-right: 20px;
+    color: #fff;
+
+  }
+
+}
+
+.dashboard-title {
+  position: relative;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  flex-wrap: nowrap;
+  flex-direction: row;
+  z-index: 1;
+  align-content: flex-start;
+  background: url(/src/assets/images/titlebg-4340cf1c.png);
+  background-size: 100% 100%;
+  font-weight: 400;
+  font-size: 14px;
+  color: #fbffff;
+  padding: 0 20px;
+  height: 42px;
+}
+
+.dashboard-bg {
+  background: linear-gradient(to bottom, #08617500, #13a2d6 200%);
+}
+
+.dashboard-chart-container {
+  height: calc(100% - 42px);
+}
+</style>

src/views/dataBigScreen/dashboard/components/ScrollSeamless.vue

@@ -0,0 +1,73 @@
+<template>
+  <dashboard-item-container :title="title">
+    <template #right-menu>
+      <slot name="right-menu"></slot>
+    </template>
+    <div v-if="$slots.thead" class="thead">
+      <slot name="thead"></slot>
+    </div>
+    <vue3-scroll-seamless :class="{ none: !$slots.thead }" :classOptions="classOptions" :dataList="props.list"
+      class="scroll-wrap">
+      <div v-for="(row, index) of props.list" :key="index" class="list-item">
+        <slot v-bind="{ row, index }"></slot>
+      </div>
+    </vue3-scroll-seamless>
+  </dashboard-item-container>
+</template>
+
+<script setup>
+import { vue3ScrollSeamless } from "vue3-scroll-seamless";
+import DashboardItemContainer from '@/views/dataBigScreen/dashboard/components/DashboardItemContainer.vue';
+
+const props = defineProps({
+  title: {
+    type: String,
+    default: '',
+  },
+  list: {
+    type: Array,
+    default: () => [],
+  },
+});
+const classOptions = {
+  limitMoveNum: 5,
+  step: 1
+};
+</script>
+
+<style lang="less" scoped>
+.thead {
+  display: flex;
+  align-items: center;
+  width: 100%;
+  height: 40px;
+  padding: 0 16px;
+  color: #fbffff;
+  font-size: 12px;
+  font-weight: bold;
+}
+
+.scroll-wrap {
+  width: 100%;
+  // height: calc(100% - 82px);
+  margin: 0 auto;
+  overflow: hidden;
+  color: #fbffff;
+  font-size: 12px;
+  padding: 0 16px;
+
+  &.none {
+    // height: calc(100% - 52px);
+    margin-top: 12px;
+  }
+
+
+  .list-item {
+    display: flex;
+    align-items: center;
+    color: #fbffff;
+    padding: 4px 0;
+    font-size: 12px;
+  }
+}
+</style>

src/views/dataBigScreen/dashboard/index.vue

@@ -0,0 +1,86 @@
+<template>
+  <dashboard-container>
+    <top-title class="wow slideInDown" name="智慧大屏监控中心"></top-title>
+    <template #left>
+      <div class="item">
+        <!-- 重大违禁品情况 -->
+        <major-contraband-cases />
+      </div>
+      <div class="item">
+        <!-- 故意隐匿情况 -->
+        <deliberate-concealment />
+      </div>
+      <div class="item">
+        <div class="dashboard-title">查获类别分布</div>
+        <pie-chart />
+      </div>
+    </template>
+    <template #center>
+      <div class="item item-center">
+        <classification-of-seized-quantity />
+      </div>
+      <div class="item">
+        <!-- 查获排名 -->
+        <seized-ranking />
+      </div>
+    </template>
+    <template #right>
+      <div class="item">
+        <!-- 查获通道分布 -->
+        <channel-distribution />
+      </div>
+      <div class="item">
+        <div class="dashboard-title">查获时段分布</div>
+        <line-chart />
+      </div>
+      <div class="item">
+        <div class="dashboard-title">查获岗位分布</div>
+        <pie-radius-chart />
+      </div>
+    </template>
+  </dashboard-container>
+</template>
+
+<script setup>
+import TopTitle from './TopTitle.vue';
+import PieChart from './PieChart.vue';
+import PieRadiusChart from './PieRadiusChart.vue';
+import LineChart from './LineChart.vue';
+import MajorContrabandCases from './MajorContrabandCases.vue';
+import SeizedRanking from './SeizedRanking.vue';
+import DeliberateConcealment from './DeliberateConcealment.vue';
+import ChannelDistribution from './ChannelDistribution.vue';
+import ClassificationOfSeizedQuantity from '@/views/dataBigScreen/dashboard/ClassificationOfSeizedQuantity.vue';
+import DashboardContainer from '@/views/dataBigScreen/dashboard/components/DashboardContainer.vue';
+</script>
+
+<style lang="scss" scoped>
+.item {
+  width: calc(100% + -0px);
+  height: calc(33.33% - 8px);
+  position: relative;
+  background: linear-gradient(to bottom, rgba(8, 97, 117, 0) 0%, #13a2d6 200%);
+
+  &.item-center {
+    height: calc(66.66% - 4px);
+  }
+}
+
+.dashboard-title {
+  position: relative;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  flex-wrap: nowrap;
+  flex-direction: row;
+  z-index: 1;
+  align-content: flex-start;
+  background: url(/src/assets/images/titlebg-4340cf1c.png);
+  background-size: 100% 100%;
+  font-weight: 400;
+  font-size: 14px;
+  color: #fbffff;
+  padding: 0 20px;
+  height: 42px;
+}
+</style>

src/views/dataBigScreen/examQuestionStatistics/components/dataDisplay.vue

@@ -0,0 +1,149 @@
+<template>
+	<view class="data_display">
+		<view class="top">
+			<view>{{ props.data.title }}</view>
+			<img src="" alt="" />
+		</view>
+		<view class="bottom">
+			<view class="left">
+				<view class="left_num">{{ props.data.current_month }}</view>
+				<view class="left_compare">
+					<view :class="props.data.status ? 'left_compare_green' : 'left_compare_red'">
+						<img :src="props.data.status ? '/src/assets/icons/shang.png' : '/src/assets/icons/xia.png'" alt="" />
+						<view>{{ props.data.percentage }}</view>
+					</view>
+					<view>&nbsp;vs上月</view>
+				</view>
+			</view>
+			<view ref="rightChart" class="right"></view>
+		</view>
+	</view>
+</template>
+
+<script setup lang="ts">
+	import { onMounted, onUnmounted, ref } from 'vue';
+	import * as echarts from 'echarts';
+	const props = defineProps({
+	  data: { type: Object, default: {} },
+	});
+	
+	const chart = ref(null);
+	const rightChart = ref(null);
+	const chartOption = ref({
+		series: [
+			{
+				name: 'pie',
+				type: 'pie',
+				radius: ['40%', '70%'],
+				avoidLabelOverlap: false,
+				label: {
+					show: false,
+					position: 'center'
+				},
+				data: [
+					{ value: 800, name: 'Search Engine' },
+					{ value: 200, name: 'Direct' }
+				],
+				color: ['#165DFF', '#ccc'] // 直接在这里指定颜色
+			}
+		]
+	});
+	
+	const initChart = () => {
+		if (props.data.title == '参考人数') {
+			chart.value = echarts.init(rightChart.value, 'macarons');
+			chart.value.setOption(chartOption.value);
+		} else if (props.data.title == '平均成绩') {
+			chartOption.value.series[0].color = ['#00CED1', '#ccc'];
+			chart.value = echarts.init(rightChart.value, 'macarons');
+			chart.value.setOption(chartOption.value);
+		} else if (props.data.title == '合格率') {
+			chartOption.value.series[0].color = ['#00B42A', '#ccc'];
+			chart.value = echarts.init(rightChart.value, 'macarons');
+			chart.value.setOption(chartOption.value);
+		} else {
+			chartOption.value.series[0].color = ['#FF7D00', '#ccc'];
+			chart.value = echarts.init(rightChart.value, 'macarons');
+			chart.value.setOption(chartOption.value);
+		}
+	};
+	
+	onMounted(() => {
+	  initChart();
+	  window.addEventListener('resize', () => {
+	    chart.value.resize();
+	  });
+	});
+	
+	onUnmounted(() => {
+	  if (!chart.value) {
+	    return;
+	  }
+	  chart.value.dispose();
+	  chart.value = null;
+	});
+</script>
+
+<style lang="scss" scoped>
+	.data_display {
+		background: linear-gradient(to bottom, rgba(8, 97, 117, 0) 0%, #13a2d6 200%);
+		margin-right: 10px;
+		color: #fff;
+		flex: 1;
+		&:nth-child(1) {
+			margin-left: 10px;
+		}
+		.top {
+			position: relative;
+			display: flex;
+			justify-content: space-between;
+			align-items: center;
+			flex-wrap: nowrap;
+			flex-direction: row;
+			z-index: 1;
+			align-content: flex-start;
+			background: url(/src/assets/images/titlebg-4340cf1c.png);
+			background-size: 100% 100%;
+			font-weight: 400;
+			font-size: 14px;
+			color: #fbffff;
+			padding: 8px 20px;
+			margin-bottom: 8px;
+		}
+		.bottom {
+			width: 100%;
+			display: flex;
+			justify-content: space-between;
+			align-items: center;
+			padding: 0 10px;
+			.left {
+				display: flex;
+				flex-direction: column;
+				margin-left: 40px;
+				.left_num {
+					font-size: 18px;
+					font-weight: 800;
+				}
+				.left_compare {
+					margin-top: 10px;
+					.left_compare_green {
+						color: greenyellow;
+					}
+					.left_compare_red {
+						color: orangered;
+					}
+					img {
+						width: 15px;
+						height: 15px;
+						padding-top: 2px;
+					}
+				}
+			}
+			.right {
+				width: 100px;
+				height: 100px;
+				margin-right: 20px;
+			}
+		}
+	}
+</style>

src/views/dataBigScreen/examQuestionStatistics/index.vue

@@ -0,0 +1,857 @@
+<template>
+	<view class="examQuestionStatistics">
+		<view class="top">
+			<DataDisplay v-for="(item, index) in data.list" :data="item" :key="index" />
+		</view>
+		<view class="center">
+			<view class="_left">
+				<view class="center_title">
+					<view class="title">题目类型占比</view>
+				</view>
+				<view class="_cont">
+					<view ref="center_EchartTwo" class="_Echart"></view>
+				</view>
+			</view>
+			<view class="_center">
+				<view class="center_title">
+					<view class="title">各科室成绩走势</view>
+					<view>
+						<el-select
+							v-model="selectVal.selectValue"
+							class="m-2"
+							placeholder="选择题目"
+							style="width: 240px"
+							@change="changeSelect"
+						>
+							<el-option
+								v-for="item in selectData.selectOptions"
+								:key="item.qc_id"
+								:label="item.qc_name"
+								:value="item.qc_id"
+							/>
+						</el-select>
+					</view>
+				</view>
+				<view class="_cont">
+					<view ref="center_EchartThree" class="_Echart"></view>
+				</view>
+			</view>
+			<view class="_right">
+				<view class="center_title">
+					<view class="title">各科室综合排名</view>
+				</view>
+				<view class="ranking">
+					<view class="ranking_item" v-for="(item, index) in data.rankingList" :key="index">
+						<view>
+							<view class="serial" :style="index == 0 ? 'background: #ff3232' : (index == 1 ? 'background: #ff9800' : (index == 2 ? 'background: #ffd200' : 'background: #5470c6'))">{{ index + 1 }}</view>
+							<view class="name">{{ item.dept_name }}</view>
+						</view>
+						<view>
+							<view class="count">{{ item.er_score }}</view>
+							<img :src="item.status ? '/src/assets/icons/shang.png' : '/src/assets/icons/xia.png'" alt="" />
+							<view class="percentage" :style="!item.status ? 'color: #ff3232' : 'color: #00B42A'">{{ item.percentage }}</view>
+						</view>
+					</view>
+				</view>
+			</view>
+		</view>
+		<view class="bottom">
+			<view class="center_box">
+				<view class="center_left">
+					<view class="center_title">
+						<view class="title">各类型题目得分分布</view>
+						<view class="filter_tag">
+							<span v-for="(item, index) in activeList" :key="index" @click="changeActive(index)" :class="activeName == index ? 'label active' : 'label'">{{ item }}</span>
+						</view>
+					</view>
+					<view class="center_cont">
+						<view ref="center_Echart" class="center_Echart"></view>
+					</view>
+				</view>
+				<view class="center_right">
+					<view class="center_title">
+						<view class="title">薄弱知识点分析</view>
+						<view style="color: red;margin-right: 20px;">Top5</view>
+					</view>
+					<view class="cont_box">
+						<view class="right_cont" v-for="(item, index) in data.illegalList" :key="index">
+							<view class="cont_title">
+								<view>{{ item.category_name }}</view>
+								<view>{{ item.correct_rate_percent }}%</view>
+							</view>
+							<view class="progress">
+								<el-progress :show-text="false" :percentage="item.correct_rate_percent" :color="item.correct_rate_percent <= '50' ? 'red' : (item.correct_rate_percent > '50' && item.correct_rate_percent <= '70' ? '#FF7D00' : '#817e8a')" />
+							</view>
+						</view>
+					</view>
+				</view>
+			</view>
+			<view class="_center">
+				<view class="center_title">
+					<view class="title">各项题目类型成绩走势</view>
+				</view>
+				<view class="_cont">
+					<view ref="echarts_name" class="_Echart"></view>
+				</view>
+			</view>
+			<view class="failed_right">
+				<view class="failed_user">
+					<view class="center_title">
+						<view class="title">未达标人员</view>
+						<view style="margin-bottom: 8px;">
+							<el-date-picker style="width: 100%" v-model="selectVal.timeVal" value-format="YYYY-MM" @change="changeFilterTime" type="month" placeholder="选择时间" />
+						</view>
+					</view>
+					<view class="user_ranking">
+						<vue3-scroll-seamless
+							:classOptions="classOptions"
+							:dataList="data.userList"
+							class="scroll-wrap"
+						>
+					  	<view class="ranking_item" v-for="(item, index) in data.userList" :key="index">
+					  		<view class="user_info">
+					  			<img :src="item.avatar_url" alt="" />
+					  			<view class="info">
+					  				<view class="name">{{ item.user_name }}</view>
+					  				<view class="division">{{ item.dept_name }}</view>
+					  			</view>
+					  		</view>
+					  		<view class="fraction">{{ item.total_exams }}/{{ item.unqualified_count }}</view>
+					  	</view>
+						</vue3-scroll-seamless>
+					</view>
+				</view>
+				<view class="desc">
+					<view class="center_title">
+						<view class="title">训练建议</view>
+					</view>
+					<view class="desc_cont"> 
+						<view class="cont_text">
+							<view class="title">加强X光机识别训练</view>
+							<view class="text">&nbsp;&nbsp;&nbsp;针对X光机违禁品识别薄弱情况，建议每周组织两次专项训练，邀请专家进行案例分析。</view>
+						</view>
+						<view class="divider"></view>
+						<view  class="cont_text">
+							<view class="title">开展应急处置演练</view>
+							<view class="text">&nbsp;&nbsp;&nbsp;应急处置流程得分较低，建议每季度组织一次全站范围的应急演练，提高实际操作能力。</view>
+						</view>
+						<view class="divider"></view>
+						<view class="cont_text">
+							<view class="title">更新危险品知识培训</view>
+							<view class="text">&nbsp;&nbsp;&nbsp;危险品分类标准知识掌握不足，建议更新培训资料，增加最新案例和识别技巧。</view>
+						</view>
+					</view>
+				</view>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script lang="ts" setup>
+	import { reactive, ref, onMounted, onUnmounted } from 'vue';
+	import { executeSqlByKeyAndParam } from '@/api/system/sql.js';
+	import DataDisplay from './components/dataDisplay.vue';
+	import * as echarts from 'echarts';
+
+	const activeName = ref('0');
+	const activeList = reactive(['本月', '季度', '年度']);
+	const selectData = reactive({
+		selectOptions: []
+	});
+	const classOptions = {
+	  limitMoveNum: 6,
+	};
+	const selectVal = reactive({
+		selectValue: '',
+		timeVal: ''
+	});
+	const data = reactive({
+		list: [],
+		illegalList: [],
+		rankingList: [],
+		userList: []
+	});
+
+	const chart = ref(null);
+	const center_Echart = ref(null);
+	const chartOption = ref({
+		legend: {
+			data: ['平均得分'],
+			left: '30px',
+			textStyle: {
+				color: '#fff',
+			},
+			selectedMode: false
+		},
+		radar: {
+			indicator: [],
+			radius: '40%',
+			center: ['42%', '50%'],
+			name: {
+				// 修改指标名称的文本样式
+				textStyle: {
+					color: '#fff', // 设置文字颜色为红色
+					fontSize: 12, // 设置文字大小
+				}
+			}
+		},
+		series: [
+			{
+				name: 'Budget vs spending',
+				type: 'radar',
+				data: [
+					{
+						value: [80, 70, 75, 80, 80, 80],
+						name: '平均得分',
+						label: {
+							show: true,
+							color: '#fff',
+							formatter: function (params) {
+								return params.value;
+							},
+						},
+						areaStyle: {
+							color: '#a9bdff',
+						},
+						// 可以设置其他样式，如颜色等
+						itemStyle: {
+							color: 'blue',
+						},
+					},
+				],
+			},
+		],
+	});
+	
+	const chartTwo = ref(null);
+	const center_EchartTwo = ref(null);
+	const chartTwoOption = ref({
+		tooltip: {
+			trigger: 'item'
+		},
+		legend: {
+			left: 'center',
+			top: 15,
+			textStyle: {
+				color: '#fff',
+			},
+			selectedMode: false
+		},
+		series: [
+			{
+				name: '占比',
+				type: 'pie',
+				radius: ['40%', '70%'],
+				center:['50%','60%'],
+				avoidLabelOverlap: false,
+				label: {
+					show: false,
+					position: 'center'
+				},
+				labelLine: {
+					show: false
+				},
+				data: []
+			}
+		]
+	});
+	
+	const chartThree = ref(null);
+	const center_EchartThree = ref(null);
+	const chartThreeOption = ref({
+		tooltip: {
+			trigger: 'axis',
+			axisPointer: {
+				type: 'cross',
+				label: {
+					backgroundColor: '#6a7985'
+				}
+			}
+		},
+		legend: {
+			data: [],
+			textStyle: {
+				color: '#fff',
+			},
+			selectedMode: false
+		},
+		xAxis: {
+			type: 'category',
+			boundaryGap: false,
+			data: ['1月', '2月', '3月', '4月', '5月', '6月'],
+			axisLabel: {
+				color: '#fff'
+			}
+		},
+		yAxis: {
+			type: 'value',
+			axisLabel: {
+				color: '#fff'
+			}
+		},
+		series: []
+	});
+	
+	const chartT = ref(null);
+	const echarts_name = ref(null);
+	const chartTOption = ref({
+		legend: {
+			data: [],
+			textStyle: {
+				color: '#fff',
+			},
+			selectedMode: false
+		},
+		grid: {
+			left: '3%',
+			right: '4%',
+			bottom: '3%',
+			containLabel: true
+		},
+		xAxis: [
+			{
+				type: 'category',
+				boundaryGap: false,
+				data: ['1月', '2月', '3月', '4月', '5月', '6月'],
+				axisLabel: {
+					color: '#fff'
+				}
+			}
+		],
+		yAxis: [
+			{
+				type: 'value',
+				axisLabel: {
+					color: '#fff'
+				}
+			}
+		],
+		series: []
+	});
+
+	// 初始化图标
+	const initChart = () => {
+		chart.value = echarts.init(center_Echart.value, 'macarons');
+		chart.value.setOption(chartOption.value);
+		chartTwo.value = echarts.init(center_EchartTwo.value, 'macarons');
+		chartTwo.value.setOption(chartTwoOption.value);
+		chartThree.value = echarts.init(center_EchartThree.value, 'macarons');
+		chartThree.value.setOption(chartThreeOption.value);
+		chartT.value = echarts.init(echarts_name.value, 'macarons');
+		chartT.value.setOption(chartTOption.value);
+	};
+	
+	// 点击切换各类型题目得分分布
+	const changeActive = async (ind: any) => {
+		if (activeName.value == ind) return;
+		if (ind == 0) {
+			// 月度
+			await getCount('month_avg_score', '得分分布', '', null);
+		} else if (ind == 1) {
+			// 季度
+			await getCount('quarter_avg_score', '得分分布', '', null);
+		} else {
+			// 年度
+			await getCount('year_avg_score', '得分分布', '', null);
+		}
+		chart.value = echarts.init(center_Echart.value, 'macarons');
+		chart.value.setOption(chartOption.value);
+		activeName.value = ind;
+	};
+	
+	// 处理接口返回数据
+	const getCount = async (url: String, title: String, key: any, params: any) => {
+		await executeSqlByKeyAndParam(url, params).then(res => {
+			if (title == '参考人数') {
+				data.list.push({
+					title,
+					current_month: res.data[0].current_month_count,
+					previous_month: res.data[0].previous_month_count,
+					percentage: res.data[0].year_over_year_growth,
+					status: res.data[0].current_month_count >= res.data[0].previous_month_count
+				});
+			} else if (title == '平均成绩') {
+				data.list.push({
+					title,
+					current_month: res.data[0].current_month_avg,
+					previous_month: res.data[0].previous_month_avg,
+					percentage: res.data[0].year_over_year_growth,
+					status: res.data[0].current_month_avg >= res.data[0].previous_month_avg
+				});
+			} else if (title == '合格率') {
+				data.list.push({
+					title,
+					current_month: res.data[0].current_month_pass_rate,
+					previous_month: res.data[0].previous_month_pass_rate,
+					percentage: res.data[0].year_over_year_growth,
+					status: res.data[0].current_month_pass_rate >= res.data[0].previous_month_pass_rate
+				});
+			} else if (title == '优秀率') {
+				data.list.push({
+					title,
+					current_month: res.data[0].current_month_good_rate,
+					previous_month: res.data[0].previous_month_good_rate,
+					percentage: res.data[0].year_over_year_growth,
+					status: res.data[0].current_month_good_rate >= res.data[0].previous_month_good_rate
+				});
+			} else if (title == '综合排名') {
+				data[key] = res.data;
+			} else if (title == '得分分布') {
+				const nameList = res.data.map((item) => {
+					return {
+						name: item.category,
+					}
+				});
+				const valList = res.data.map((item) => item.avg_score);
+				chartOption.value.radar.indicator = nameList;
+				chartOption.value.series[0].data[0].value = valList;
+			} else if (title == '问答占比') {
+				chartTwoOption.value.series[0].data = res.data.map((item) => {
+					return {
+						name: item.category_name,
+						value: item.total_count
+					}
+				});
+			} else if (title == '题目类型下拉') {
+				selectData.selectOptions = res.data;
+			} else if (title == '未达标') {
+				data.userList = res.data;
+			} else if (title == '薄弱知识') {
+				data.illegalList = res.data;
+			}
+		});
+	};
+	
+	// 处理走势折线图数据
+	const handlerDatas = (arr, name, type) => {
+		if (type == 'topic') {
+			const data = arr.filter((item) => item.question_type == name);
+			const list = [0, 0, 0, 0, 0, 0];
+			data.map((item, ind) => {
+				list[item.month - 1] = item.total_score;
+			});
+			return {
+				name: name,
+				type: 'line',
+				stack: 'Total',
+				emphasis: {
+					focus: 'series'
+				},
+				data: list
+			};
+		} else {
+			const data = arr.filter((item) => item.dept_name == name);
+			const list = [0, 0, 0, 0, 0, 0];
+			data.map((item, ind) => {
+				list[item.month - 1] = item.score;
+			});
+			return {
+				name: name,
+				type: 'line',
+				stack: 'Total',
+				areaStyle: {},
+				emphasis: {
+					focus: 'series'
+				},
+				data: list
+			};
+		}
+	}
+	
+	// 科室成绩走势
+	const getScoreData = async (url, params, type) => {
+		await executeSqlByKeyAndParam(url, params).then(res => {
+			if (type == 'topic') {
+				const newArr = res.data.map((item) => item.question_type).filter((item, index, arr) => arr.indexOf(item) === index);
+				const filteredArr = [...newArr].filter(el => el !== undefined);
+				const newVal = filteredArr.map((item) => handlerDatas(res.data, item, type));
+				chartTOption.value.legend.data = filteredArr;
+				chartTOption.value.series = newVal;
+			} else {
+				const newArr = res.data.map((item) => item.dept_name).filter((item, index, arr) => arr.indexOf(item) === index);
+				const newVal = newArr.map((item) => handlerDatas(res.data, item, ''));
+				chartThreeOption.value.legend.data = newArr;
+				chartThreeOption.value.series = newVal;
+			}
+		});
+	}
+	
+	// 修改科室成绩走势筛选条件
+	const changeSelect = (e) => {
+		getScoreData('department_score_trend', { qc_id: e }, '');
+		chartThree.value = echarts.init(center_EchartThree.value, 'macarons');
+		chartThree.value.setOption(chartThreeOption.value);
+	};
+	
+	// 获取当前月
+	const getCurrentMonth = () => {
+		const currentYear = new Date().getFullYear();
+		const month = new Date().getMonth() + 1;
+		return `${currentYear}-${month < 10 ? '0' + month : month}`;
+	}
+	
+	// 未达标人员根据时间筛选
+	const changeFilterTime = (e) => {
+		getCount('exam_of_no_pass_rate', '未达标', '', { month: e || getCurrentMonth() });
+	};
+	
+	onMounted(async () => {
+		await getCount('exam_of_total_count', '参考人数', '', null);
+		await getCount('exam_of_avg', '平均成绩', '', null);
+		await getCount('exam_of_pass_rate', '合格率', '', null);
+		await getCount('exam_of_good_rate', '优秀率', '', null);
+		await getCount('exam_of_dept2_sort', '综合排名', 'rankingList', null);
+		await getCount('month_avg_score', '得分分布', '', null);
+		await getCount('proportion_of_answer_categories', '问答占比', '', null);
+		await getCount('question_type', '题目类型下拉', '', null);
+		await getCount('top5_weak_knowledge_points', '薄弱知识', '', null);
+		await getCount('exam_of_no_pass_rate', '未达标', '', { month: getCurrentMonth() });
+		await getScoreData('department_score_trend', { qc_id: 'QC250624000003' }, '');
+		await getScoreData('six_months_question_score', null, 'topic');
+		initChart();
+		window.addEventListener('resize', () => {
+			chart.value.resize();
+			chartTwo.value.resize();
+			chartThree.value.resize();
+			chartT.value.resize();
+		});
+	});
+
+	onUnmounted(() => {
+		if (!chart.value) {
+			return;
+		}
+		chart.value.dispose();
+		chart.value = null;
+		if (!chartTwo.value) {
+			return;
+		}
+		chartTwo.value.dispose();
+		chartTwo.value = null;
+		if (!chartThree.value) {
+			return;
+		}
+		chartThree.value.dispose();
+		chartThree.value = null;
+		if (!chartT.value) {
+			return;
+		}
+		chartT.value.dispose();
+		chartT.value = null;
+	});
+</script>
+
+<style lang="scss" scoped>
+	::v-deep .el-select__wrapper {
+		background-color: rgba(0, 0, 0, .3);
+	}
+	::v-deep .el-select__placeholder {
+		color: #fff;
+	}
+	::v-deep .is-transparent {
+		color: #a8abb2;
+	}
+	::v-deep .el-input__wrapper {
+		background-color: rgba(0, 0, 0, .3);
+	}
+	::v-deep .el-input__inner {
+		color: #fff;
+	}
+	.examQuestionStatistics {
+		width: 100%;
+		position: fixed;
+		height: 100%;
+		background: url('../../../assets/images/bg-99b6904c.png');
+		background-size: 100% 100%;
+		overflow-y: auto;
+		padding-bottom: 150px;
+		.center_title {
+			width: 100%;
+			display: flex;
+			justify-content: space-between;
+			align-items: center;
+			.title {
+				position: relative;
+				display: flex;
+				justify-content: space-between;
+				align-items: center;
+				flex-wrap: nowrap;
+				flex-direction: row;
+				z-index: 1;
+				align-content: flex-start;
+				background: url(/src/assets/images/titlebg-4340cf1c.png);
+				background-size: 100% 100%;
+				font-weight: 400;
+				font-size: 14px;
+				color: #fbffff;
+				padding: 8px 20px;
+				margin-bottom: 8px;
+				min-width: 110px;
+			}
+			.filter_tag {
+				padding-right: 15px;
+				.label {
+					display: inline-flex;
+					align-items: center;
+					justify-content: center;
+					font-size: 12px;
+					background: #11134b;
+					padding: 4px 4px;
+					margin: -4px 0;
+					border-radius: 4px;
+					color: #fbffff;
+					cursor: pointer;
+				}
+				.active {
+					background: #171b75;
+				}
+			}
+		}
+		.top {
+			width: calc(100% - 200px);
+			display: flex;
+			justify-content: space-between;
+			margin-top: 10px;
+		}
+		.center {
+			width: calc(100% - 220px);
+			display: flex;
+			justify-content: space-between;
+			margin-top: 10px;
+			margin-left: 10px;
+			._left {
+				width: 24.5%;
+				background: linear-gradient(to bottom, rgba(8, 97, 117, 0) 0%, #13a2d6 200%);
+				._cont {
+					width: 100%;
+					height: 400px;
+					display: flex;
+					justify-content: center;
+					._Echart {
+						width: 100%;
+						height: 100%;
+					}
+				}
+			}
+			._center {
+				width: 50%;
+				margin-left: 10px;
+				background: linear-gradient(to bottom, rgba(8, 97, 117, 0) 0%, #13a2d6 200%);
+				._cont {
+					width: 100%;
+					height: 400px;
+					display: flex;
+					justify-content: center;
+					padding: 10px;
+					._Echart {
+						width: 100%;
+						height: 100%;
+					}
+				}
+			}
+			._right {
+				width: 24.5%;
+				margin-left: 10px;
+				background: linear-gradient(to bottom, rgba(8, 97, 117, 0) 0%, #13a2d6 200%);
+				.ranking {
+					width: 100%;
+					padding: 0 20px;
+					display: inline-block;
+					color: #fff;
+					.ranking_item {
+						height: 40px;
+						display: flex;
+						justify-content: space-between;
+						align-items: center;
+						.serial {
+							display: inline-block;
+							width: 16px;
+							height: 16px;
+							color: #fff;
+							border-radius: 4px;
+							text-align: center;
+							line-height: 16px;
+							font-size: 15px;
+							margin-right: 8px;
+						}
+						.name {
+							font-size: 15px;
+						}
+						.count {
+							font-size: 15px;
+							font-weight: 800;
+							margin-right: 8px;
+						}
+						img {
+							width: 15px;
+							height: 15px;
+							padding-top: 5px;
+						}
+						.percentage {
+							font-size: 12px;
+						}
+					}
+				}
+			}
+		}
+		.bottom {
+			width: calc(100% - 220px);
+			display: flex;
+			justify-content: space-between;
+			margin-top: 10px;
+			margin-left: 10px;
+			.center_box {
+				width: 24.5%;
+				background: linear-gradient(to bottom, rgba(8, 97, 117, 0) 0%, #13a2d6 200%);
+				.center_left {
+					width: 100%;
+					background: linear-gradient(to bottom, rgba(8, 97, 117, 0) 0%, #13a2d6 200%);
+					display: inline-block;
+					.center_cont {
+						width: 100%;
+						display: flex;
+						justify-content: center;
+						.center_Echart {
+							width: 100%;
+							height: 280px;
+						}
+					}
+				}
+				.center_right {
+					display: block;
+					background: linear-gradient(to bottom, rgba(8, 97, 117, 0) 0%, #13a2d6 200%);
+					.cont_box {
+						width: calc(100% - 40px);
+						margin-left: 20px;
+						display: inline-block;
+						.right_cont {
+							width: 100%;
+							height: 60px;
+							display: inline-block;
+							.cont_title {
+								height: 40px;
+								display: flex;
+								justify-content: space-between;
+								align-items: center;
+								color: #fff;
+							}
+							.progress {
+								margin-top: 10px;
+							}
+						}
+					}
+				}
+			}
+			._center {
+				width: 50%;
+				margin-left: 10px;
+				background: linear-gradient(to bottom, rgba(8, 97, 117, 0) 0%, #13a2d6 200%);
+				._cont {
+					width: 100%;
+					height: 600px;
+					display: flex;
+					justify-content: center;
+					padding: 10px;
+					._Echart {
+						width: 100%;
+						height: 100%;
+					}
+				}
+			}
+			.failed_right {
+				width: 24.5%;
+				margin-left: 10px;
+				background: linear-gradient(to bottom, rgba(8, 97, 117, 0) 0%, #13a2d6 200%);
+				.failed_user {
+					display: block;
+					background: linear-gradient(to bottom, rgba(8, 97, 117, 0) 0%, #13a2d6 200%);
+					.user_ranking {
+						width: 100%;
+						height: 286px;
+						padding: 0 20px;
+						overflow: hidden;
+						display: inline-block;
+						color: #fff;
+						.ranking_item {
+							width: 91%;
+							height: 70px;
+							display: flex;
+							justify-content: space-between;
+							align-items: center;
+							border-bottom: 1px solid #ffffff40;
+							.user_info {
+								display: flex;
+								img {
+									width: 50px;
+									height: 50px;
+									border-radius: 50%;
+									border: 1px solid #ffffff40;
+								}
+								.info {
+									display: flex;
+									flex-direction: column;
+									margin-left: 8px;
+									font-size: 15px;
+									.division {
+										color: #ccc;
+										font-size: 14px;
+										margin-top: 8px;
+									}
+								}
+							}
+							.fraction {
+								color: #ff3232;
+							}
+						}
+					}
+				}
+				.desc {
+					display: block;
+					.desc_cont {
+						padding: 10px;
+						padding-bottom: 0;
+						color: #fff;
+						display: flex;
+						flex-wrap: wrap;
+						justify-content: space-around;
+						background: linear-gradient(to bottom, rgba(8, 97, 117, 0) 0%, #13a2d6 200%);
+						.cont_text {
+							display: flex;
+							flex-direction: column;
+							margin: 10px 0;
+							&:nth-child(1) {
+								border-left: 5px solid blue;
+							}
+							&:nth-child(3) {
+								border-left: 5px solid red;
+							}
+							&:nth-child(5) {
+								border-left: 5px solid yellow;
+							}
+							& {
+								padding-left: 10px;
+							}
+							.title {
+								font-size: 15px;
+								font-weight: 600;
+							}
+							.text {
+								margin-top: 8px;
+								font-size: 13px;
+								line-height: 23px;
+							}
+							&:last-child {
+								border-bottom: none;
+							}
+						}
+						.divider {
+							width: 100%;
+							height: 1px;
+							border-bottom: 1px solid #ffffff40;
+						}
+					}
+				}
+			}
+		}
+	}
+</style>

src/views/error/401.vue

@@ -0,0 +1,82 @@
+<template>
+  <div class="errPage-container">
+    <el-button icon="arrow-left" class="pan-back-btn" @click="back">
+      返回
+    </el-button>
+    <el-row>
+      <el-col :span="12">
+        <h1 class="text-jumbo text-ginormous">
+          401错误!
+        </h1>
+        <h2>您没有访问权限！</h2>
+        <h6>对不起，您没有访问权限，请不要进行非法操作！您可以返回主页面</h6>
+        <ul class="list-unstyled">
+          <li class="link-type">
+            <router-link to="/">
+              回首页
+            </router-link>
+          </li>
+        </ul>
+      </el-col>
+      <el-col :span="12">
+        <img :src="errGif" width="313" height="428" alt="Girl has dropped her ice cream.">
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script setup>
+import errImage from "@/assets/401_images/401.gif"
+
+let { proxy } = getCurrentInstance()
+
+const errGif = ref(errImage + "?" + +new Date())
+
+function back() {
+  if (proxy.$route.query.noGoBack) {
+    proxy.$router.push({ path: "/" })
+  } else {
+    proxy.$router.go(-1)
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.errPage-container {
+  width: 800px;
+  max-width: 100%;
+  margin: 100px auto;
+  .pan-back-btn {
+    background: #008489;
+    color: #fff;
+    border: none !important;
+  }
+  .pan-gif {
+    margin: 0 auto;
+    display: block;
+  }
+  .pan-img {
+    display: block;
+    margin: 0 auto;
+    width: 100%;
+  }
+  .text-jumbo {
+    font-size: 60px;
+    font-weight: 700;
+    color: #484848;
+  }
+  .list-unstyled {
+    font-size: 14px;
+    li {
+      padding-bottom: 5px;
+    }
+    a {
+      color: #008489;
+      text-decoration: none;
+      &:hover {
+        text-decoration: underline;
+      }
+    }
+  }
+}
+</style>

src/views/error/404.vue

@@ -0,0 +1,227 @@
+<template>
+  <div class="wscn-http404-container">
+    <div class="wscn-http404">
+      <div class="pic-404">
+        <img class="pic-404__parent" src="@/assets/404_images/404.png" alt="404">
+        <img class="pic-404__child left" src="@/assets/404_images/404_cloud.png" alt="404">
+        <img class="pic-404__child mid" src="@/assets/404_images/404_cloud.png" alt="404">
+        <img class="pic-404__child right" src="@/assets/404_images/404_cloud.png" alt="404">
+      </div>
+      <div class="bullshit">
+        <div class="bullshit__oops">
+          404错误!
+        </div>
+        <div class="bullshit__headline">
+          {{ message }}
+        </div>
+        <div class="bullshit__info">
+          对不起，您正在寻找的页面不存在。尝试检查URL的错误，然后按浏览器上的刷新按钮或尝试在我们的应用程序中找到其他内容。
+        </div>
+        <router-link to="/index" class="bullshit__return-home">
+          返回首页
+        </router-link>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+let message = computed(() => {
+  return '找不到网页！'
+})
+</script>
+
+<style lang="scss" scoped>
+.wscn-http404-container{
+  transform: translate(-50%,-50%);
+  position: absolute;
+  top: 40%;
+  left: 50%;
+}
+.wscn-http404 {
+  position: relative;
+  width: 1200px;
+  padding: 0 50px;
+  overflow: hidden;
+  .pic-404 {
+    position: relative;
+    float: left;
+    width: 600px;
+    overflow: hidden;
+    &__parent {
+      width: 100%;
+    }
+    &__child {
+      position: absolute;
+      &.left {
+        width: 80px;
+        top: 17px;
+        left: 220px;
+        opacity: 0;
+        animation-name: cloudLeft;
+        animation-duration: 2s;
+        animation-timing-function: linear;
+        animation-fill-mode: forwards;
+        animation-delay: 1s;
+      }
+      &.mid {
+        width: 46px;
+        top: 10px;
+        left: 420px;
+        opacity: 0;
+        animation-name: cloudMid;
+        animation-duration: 2s;
+        animation-timing-function: linear;
+        animation-fill-mode: forwards;
+        animation-delay: 1.2s;
+      }
+      &.right {
+        width: 62px;
+        top: 100px;
+        left: 500px;
+        opacity: 0;
+        animation-name: cloudRight;
+        animation-duration: 2s;
+        animation-timing-function: linear;
+        animation-fill-mode: forwards;
+        animation-delay: 1s;
+      }
+      @keyframes cloudLeft {
+        0% {
+          top: 17px;
+          left: 220px;
+          opacity: 0;
+        }
+        20% {
+          top: 33px;
+          left: 188px;
+          opacity: 1;
+        }
+        80% {
+          top: 81px;
+          left: 92px;
+          opacity: 1;
+        }
+        100% {
+          top: 97px;
+          left: 60px;
+          opacity: 0;
+        }
+      }
+      @keyframes cloudMid {
+        0% {
+          top: 10px;
+          left: 420px;
+          opacity: 0;
+        }
+        20% {
+          top: 40px;
+          left: 360px;
+          opacity: 1;
+        }
+        70% {
+          top: 130px;
+          left: 180px;
+          opacity: 1;
+        }
+        100% {
+          top: 160px;
+          left: 120px;
+          opacity: 0;
+        }
+      }
+      @keyframes cloudRight {
+        0% {
+          top: 100px;
+          left: 500px;
+          opacity: 0;
+        }
+        20% {
+          top: 120px;
+          left: 460px;
+          opacity: 1;
+        }
+        80% {
+          top: 180px;
+          left: 340px;
+          opacity: 1;
+        }
+        100% {
+          top: 200px;
+          left: 300px;
+          opacity: 0;
+        }
+      }
+    }
+  }
+  .bullshit {
+    position: relative;
+    float: left;
+    width: 300px;
+    padding: 30px 0;
+    overflow: hidden;
+    &__oops {
+      font-size: 32px;
+      font-weight: bold;
+      line-height: 40px;
+      color: #1482f0;
+      opacity: 0;
+      margin-bottom: 20px;
+      animation-name: slideUp;
+      animation-duration: 0.5s;
+      animation-fill-mode: forwards;
+    }
+    &__headline {
+      font-size: 20px;
+      line-height: 24px;
+      color: #222;
+      font-weight: bold;
+      opacity: 0;
+      margin-bottom: 10px;
+      animation-name: slideUp;
+      animation-duration: 0.5s;
+      animation-delay: 0.1s;
+      animation-fill-mode: forwards;
+    }
+    &__info {
+      font-size: 13px;
+      line-height: 21px;
+      color: grey;
+      opacity: 0;
+      margin-bottom: 30px;
+      animation-name: slideUp;
+      animation-duration: 0.5s;
+      animation-delay: 0.2s;
+      animation-fill-mode: forwards;
+    }
+    &__return-home {
+      display: block;
+      float: left;
+      width: 110px;
+      height: 36px;
+      background: #1482f0;
+      border-radius: 100px;
+      text-align: center;
+      color: #ffffff;
+      opacity: 0;
+      font-size: 14px;
+      line-height: 36px;
+      cursor: pointer;
+      animation-name: slideUp;
+      animation-duration: 0.5s;
+      animation-delay: 0.3s;
+      animation-fill-mode: forwards;
+    }
+    @keyframes slideUp {
+      0% {
+        transform: translateY(60px);
+        opacity: 0;
+      }
+      100% {
+        transform: translateY(0);
+        opacity: 1;
+      }
+    }
+  }
+}
+</style>

src/views/item/items/index.vue

@@ -0,0 +1,584 @@
+<template>
+  <div class="app-container">
+    <el-form :model="queryParams" ref="queryRef" :inline="true" v-show="showSearch" label-width="68px">
+      <el-form-item label="租户号" prop="tenantId">
+        <el-input
+          v-model="queryParams.tenantId"
+          placeholder="请输入租户号"
+          clearable
+          @keyup.enter="handleQuery"
+        />
+      </el-form-item>
+      <el-form-item label="乐观锁" prop="revision">
+        <el-input
+          v-model="queryParams.revision"
+          placeholder="请输入乐观锁"
+          clearable
+          @keyup.enter="handleQuery"
+        />
+      </el-form-item>
+      <el-form-item label="查获记录ID" prop="recordId">
+        <el-input
+          v-model="queryParams.recordId"
+          placeholder="请输入查获记录ID"
+          clearable
+          @keyup.enter="handleQuery"
+        />
+      </el-form-item>
+      <el-form-item label="物品编码" prop="itemCode">
+        <el-input
+          v-model="queryParams.itemCode"
+          placeholder="请输入物品编码"
+          clearable
+          @keyup.enter="handleQuery"
+        />
+      </el-form-item>
+      <el-form-item label="数量" prop="quantity">
+        <el-input
+          v-model="queryParams.quantity"
+          placeholder="请输入数量"
+          clearable
+          @keyup.enter="handleQuery"
+        />
+      </el-form-item>
+      <el-form-item label="图片URL" prop="imageUrl">
+        <el-input
+          v-model="queryParams.imageUrl"
+          placeholder="请输入图片URL"
+          clearable
+          @keyup.enter="handleQuery"
+        />
+      </el-form-item>
+      <el-form-item label="检查部位编码1级" prop="checkPositionCodeOne">
+        <el-input
+          v-model="queryParams.checkPositionCodeOne"
+          placeholder="请输入检查部位编码1级"
+          clearable
+          @keyup.enter="handleQuery"
+        />
+      </el-form-item>
+      <el-form-item label="是否故意隐匿(1-是,0-否)" prop="isActiveConcealment">
+        <el-input
+          v-model="queryParams.isActiveConcealment"
+          placeholder="请输入是否故意隐匿(1-是,0-否)"
+          clearable
+          @keyup.enter="handleQuery"
+        />
+      </el-form-item>
+      <el-form-item label="检查部位编码2级" prop="checkPositionCodeTwo">
+        <el-input
+          v-model="queryParams.checkPositionCodeTwo"
+          placeholder="请输入检查部位编码2级"
+          clearable
+          @keyup.enter="handleQuery"
+        />
+      </el-form-item>
+      <el-form-item label="具体位置" prop="checkPositionSpecific">
+        <el-input
+          v-model="queryParams.checkPositionSpecific"
+          placeholder="请输入具体位置"
+          clearable
+          @keyup.enter="handleQuery"
+        />
+      </el-form-item>
+      <el-form-item label="物品名称" prop="itemName">
+        <el-input
+          v-model="queryParams.itemName"
+          placeholder="请输入物品名称"
+          clearable
+          @keyup.enter="handleQuery"
+        />
+      </el-form-item>
+      <el-form-item label="物品分类编码1级" prop="categoryCodeOne">
+        <el-input
+          v-model="queryParams.categoryCodeOne"
+          placeholder="请输入物品分类编码1级"
+          clearable
+          @keyup.enter="handleQuery"
+        />
+      </el-form-item>
+      <el-form-item label="物品分类名称1级" prop="categoryNameOne">
+        <el-input
+          v-model="queryParams.categoryNameOne"
+          placeholder="请输入物品分类名称1级"
+          clearable
+          @keyup.enter="handleQuery"
+        />
+      </el-form-item>
+      <el-form-item label="物品分类编码2级" prop="categoryCodeTwo">
+        <el-input
+          v-model="queryParams.categoryCodeTwo"
+          placeholder="请输入物品分类编码2级"
+          clearable
+          @keyup.enter="handleQuery"
+        />
+      </el-form-item>
+      <el-form-item label="物品分类名称2级" prop="categoryNameTwo">
+        <el-input
+          v-model="queryParams.categoryNameTwo"
+          placeholder="请输入物品分类名称2级"
+          clearable
+          @keyup.enter="handleQuery"
+        />
+      </el-form-item>
+      <el-form-item label="单位" prop="unit">
+        <el-input
+          v-model="queryParams.unit"
+          placeholder="请输入单位"
+          clearable
+          @keyup.enter="handleQuery"
+        />
+      </el-form-item>
+      <el-form-item label="检查部位名称1级" prop="checkPositionNameOne">
+        <el-input
+          v-model="queryParams.checkPositionNameOne"
+          placeholder="请输入检查部位名称1级"
+          clearable
+          @keyup.enter="handleQuery"
+        />
+      </el-form-item>
+      <el-form-item label="检查部位名称2级" prop="checkPositionNameTwo">
+        <el-input
+          v-model="queryParams.checkPositionNameTwo"
+          placeholder="请输入检查部位名称2级"
+          clearable
+          @keyup.enter="handleQuery"
+        />
+      </el-form-item>
+      <el-form-item label="单位名称" prop="unitDesc">
+        <el-input
+          v-model="queryParams.unitDesc"
+          placeholder="请输入单位名称"
+          clearable
+          @keyup.enter="handleQuery"
+        />
+      </el-form-item>
+      <el-form-item label="处理方式" prop="handlingMethod">
+        <el-input
+          v-model="queryParams.handlingMethod"
+          placeholder="请输入处理方式"
+          clearable
+          @keyup.enter="handleQuery"
+        />
+      </el-form-item>
+      <el-form-item label="处理方式名称" prop="handlingMethodDesc">
+        <el-input
+          v-model="queryParams.handlingMethodDesc"
+          placeholder="请输入处理方式名称"
+          clearable
+          @keyup.enter="handleQuery"
+        />
+      </el-form-item>
+      <el-form-item label="图片ID" prop="imageId">
+        <el-input
+          v-model="queryParams.imageId"
+          placeholder="请输入图片ID"
+          clearable
+          @keyup.enter="handleQuery"
+        />
+      </el-form-item>
+      <el-form-item>
+        <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
+        <el-button icon="Refresh" @click="resetQuery">重置</el-button>
+      </el-form-item>
+    </el-form>
+
+    <el-row :gutter="10" class="mb8">
+      <el-col :span="1.5">
+        <el-button
+          type="primary"
+          plain
+          icon="Plus"
+          @click="handleAdd"
+          v-hasPermi="['item:items:add']"
+        >新增</el-button>
+      </el-col>
+      <el-col :span="1.5">
+        <el-button
+          type="success"
+          plain
+          icon="Edit"
+          :disabled="single"
+          @click="handleUpdate"
+          v-hasPermi="['item:items:edit']"
+        >修改</el-button>
+      </el-col>
+      <el-col :span="1.5">
+        <el-button
+          type="danger"
+          plain
+          icon="Delete"
+          :disabled="multiple"
+          @click="handleDelete"
+          v-hasPermi="['item:items:remove']"
+        >删除</el-button>
+      </el-col>
+      <el-col :span="1.5">
+        <el-button
+          type="warning"
+          plain
+          icon="Download"
+          @click="handleExport"
+          v-hasPermi="['item:items:export']"
+        >导出</el-button>
+      </el-col>
+      <right-toolbar v-model:showSearch="showSearch" @queryTable="getList"></right-toolbar>
+    </el-row>
+
+    <el-table v-loading="loading" :data="itemsList" @selection-change="handleSelectionChange">
+      <el-table-column type="selection" width="55" align="center" />
+      <el-table-column label="租户号" align="center" prop="tenantId" />
+      <el-table-column label="乐观锁" align="center" prop="revision" />
+      <el-table-column label="主键" align="center" prop="id" />
+      <el-table-column label="查获记录ID" align="center" prop="recordId" />
+      <el-table-column label="物品编码" align="center" prop="itemCode" />
+      <el-table-column label="数量" align="center" prop="quantity" />
+      <el-table-column label="图片URL" align="center" prop="imageUrl" />
+      <el-table-column label="备注" align="center" prop="remark" />
+      <el-table-column label="检查部位编码1级" align="center" prop="checkPositionCodeOne" />
+      <el-table-column label="是否故意隐匿(1-是,0-否)" align="center" prop="isActiveConcealment" />
+      <el-table-column label="检查部位编码2级" align="center" prop="checkPositionCodeTwo" />
+      <el-table-column label="具体位置" align="center" prop="checkPositionSpecific" />
+      <el-table-column label="物品名称" align="center" prop="itemName" />
+      <el-table-column label="物品分类编码1级" align="center" prop="categoryCodeOne" />
+      <el-table-column label="物品分类名称1级" align="center" prop="categoryNameOne" />
+      <el-table-column label="物品分类编码2级" align="center" prop="categoryCodeTwo" />
+      <el-table-column label="物品分类名称2级" align="center" prop="categoryNameTwo" />
+      <el-table-column label="单位" align="center" prop="unit" />
+      <el-table-column label="检查部位名称1级" align="center" prop="checkPositionNameOne" />
+      <el-table-column label="检查部位名称2级" align="center" prop="checkPositionNameTwo" />
+      <el-table-column label="单位名称" align="center" prop="unitDesc" />
+      <el-table-column label="处理方式" align="center" prop="handlingMethod" />
+      <el-table-column label="处理方式名称" align="center" prop="handlingMethodDesc" />
+      <el-table-column label="图片ID" align="center" prop="imageId" />
+      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
+        <template #default="scope">
+          <el-button link type="primary" icon="Edit" @click="handleUpdate(scope.row)" v-hasPermi="['item:items:edit']">修改</el-button>
+          <el-button link type="primary" icon="Delete" @click="handleDelete(scope.row)" v-hasPermi="['item:items:remove']">删除</el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+    
+    <pagination
+      v-show="total>0"
+      :total="total"
+      v-model:page="queryParams.pageNum"
+      v-model:limit="queryParams.pageSize"
+      @pagination="getList"
+    />
+
+    <!-- 添加或修改查获物品明细对话框 -->
+    <el-dialog :title="title" v-model="open" width="500px" append-to-body>
+      <el-form ref="itemsRef" :model="form" :rules="rules" label-width="80px">
+        <el-form-item label="租户号" prop="tenantId">
+          <el-input v-model="form.tenantId" placeholder="请输入租户号" />
+        </el-form-item>
+        <el-form-item label="乐观锁" prop="revision">
+          <el-input v-model="form.revision" placeholder="请输入乐观锁" />
+        </el-form-item>
+        <el-form-item label="查获记录ID" prop="recordId">
+          <el-input v-model="form.recordId" placeholder="请输入查获记录ID" />
+        </el-form-item>
+        <el-form-item label="物品编码" prop="itemCode">
+          <el-input v-model="form.itemCode" placeholder="请输入物品编码" />
+        </el-form-item>
+        <el-form-item label="数量" prop="quantity">
+          <el-input v-model="form.quantity" placeholder="请输入数量" />
+        </el-form-item>
+        <el-form-item label="图片URL" prop="imageUrl">
+          <el-input v-model="form.imageUrl" placeholder="请输入图片URL" />
+        </el-form-item>
+        <el-form-item label="备注" prop="remark">
+          <el-input v-model="form.remark" type="textarea" placeholder="请输入内容" />
+        </el-form-item>
+        <el-form-item label="检查部位编码1级" prop="checkPositionCodeOne">
+          <el-input v-model="form.checkPositionCodeOne" placeholder="请输入检查部位编码1级" />
+        </el-form-item>
+        <el-form-item label="是否故意隐匿(1-是,0-否)" prop="isActiveConcealment">
+          <el-input v-model="form.isActiveConcealment" placeholder="请输入是否故意隐匿(1-是,0-否)" />
+        </el-form-item>
+        <el-form-item label="检查部位编码2级" prop="checkPositionCodeTwo">
+          <el-input v-model="form.checkPositionCodeTwo" placeholder="请输入检查部位编码2级" />
+        </el-form-item>
+        <el-form-item label="具体位置" prop="checkPositionSpecific">
+          <el-input v-model="form.checkPositionSpecific" placeholder="请输入具体位置" />
+        </el-form-item>
+        <el-form-item label="物品名称" prop="itemName">
+          <el-input v-model="form.itemName" placeholder="请输入物品名称" />
+        </el-form-item>
+        <el-form-item label="物品分类编码1级" prop="categoryCodeOne">
+          <el-input v-model="form.categoryCodeOne" placeholder="请输入物品分类编码1级" />
+        </el-form-item>
+        <el-form-item label="物品分类名称1级" prop="categoryNameOne">
+          <el-input v-model="form.categoryNameOne" placeholder="请输入物品分类名称1级" />
+        </el-form-item>
+        <el-form-item label="物品分类编码2级" prop="categoryCodeTwo">
+          <el-input v-model="form.categoryCodeTwo" placeholder="请输入物品分类编码2级" />
+        </el-form-item>
+        <el-form-item label="物品分类名称2级" prop="categoryNameTwo">
+          <el-input v-model="form.categoryNameTwo" placeholder="请输入物品分类名称2级" />
+        </el-form-item>
+        <el-form-item label="单位" prop="unit">
+          <el-input v-model="form.unit" placeholder="请输入单位" />
+        </el-form-item>
+        <el-form-item label="检查部位名称1级" prop="checkPositionNameOne">
+          <el-input v-model="form.checkPositionNameOne" placeholder="请输入检查部位名称1级" />
+        </el-form-item>
+        <el-form-item label="检查部位名称2级" prop="checkPositionNameTwo">
+          <el-input v-model="form.checkPositionNameTwo" placeholder="请输入检查部位名称2级" />
+        </el-form-item>
+        <el-form-item label="单位名称" prop="unitDesc">
+          <el-input v-model="form.unitDesc" placeholder="请输入单位名称" />
+        </el-form-item>
+        <el-form-item label="处理方式" prop="handlingMethod">
+          <el-input v-model="form.handlingMethod" placeholder="请输入处理方式" />
+        </el-form-item>
+        <el-form-item label="处理方式名称" prop="handlingMethodDesc">
+          <el-input v-model="form.handlingMethodDesc" placeholder="请输入处理方式名称" />
+        </el-form-item>
+        <el-form-item label="图片ID" prop="imageId">
+          <el-input v-model="form.imageId" placeholder="请输入图片ID" />
+        </el-form-item>
+      </el-form>
+      <template #footer>
+        <div class="dialog-footer">
+          <el-button type="primary" @click="submitForm">确 定</el-button>
+          <el-button @click="cancel">取 消</el-button>
+        </div>
+      </template>
+    </el-dialog>
+  </div>
+</template>
+
+<script setup name="Items">
+import { listItems, getItems, delItems, addItems, updateItems } from "@/api/item/items"
+
+const { proxy } = getCurrentInstance()
+
+const itemsList = ref([])
+const open = ref(false)
+const loading = ref(true)
+const showSearch = ref(true)
+const ids = ref([])
+const single = ref(true)
+const multiple = ref(true)
+const total = ref(0)
+const title = ref("")
+
+const data = reactive({
+  form: {},
+  queryParams: {
+    pageNum: 1,
+    pageSize: 10,
+    tenantId: null,
+    revision: null,
+    recordId: null,
+    itemCode: null,
+    quantity: null,
+    imageUrl: null,
+    checkPositionCodeOne: null,
+    isActiveConcealment: null,
+    checkPositionCodeTwo: null,
+    checkPositionSpecific: null,
+    itemName: null,
+    categoryCodeOne: null,
+    categoryNameOne: null,
+    categoryCodeTwo: null,
+    categoryNameTwo: null,
+    unit: null,
+    checkPositionNameOne: null,
+    checkPositionNameTwo: null,
+    unitDesc: null,
+    handlingMethod: null,
+    handlingMethodDesc: null,
+    imageId: null
+  },
+  rules: {
+    recordId: [
+      { required: true, message: "查获记录ID不能为空", trigger: "blur" }
+    ],
+    itemCode: [
+      { required: true, message: "物品编码不能为空", trigger: "blur" }
+    ],
+    quantity: [
+      { required: true, message: "数量不能为空", trigger: "blur" }
+    ],
+    checkPositionCodeOne: [
+      { required: true, message: "检查部位编码1级不能为空", trigger: "blur" }
+    ],
+    isActiveConcealment: [
+      { required: true, message: "是否故意隐匿(1-是,0-否)不能为空", trigger: "blur" }
+    ],
+    checkPositionCodeTwo: [
+      { required: true, message: "检查部位编码2级不能为空", trigger: "blur" }
+    ],
+    checkPositionSpecific: [
+      { required: true, message: "具体位置不能为空", trigger: "blur" }
+    ],
+    itemName: [
+      { required: true, message: "物品名称不能为空", trigger: "blur" }
+    ],
+    categoryCodeOne: [
+      { required: true, message: "物品分类编码1级不能为空", trigger: "blur" }
+    ],
+    categoryNameOne: [
+      { required: true, message: "物品分类名称1级不能为空", trigger: "blur" }
+    ],
+    categoryCodeTwo: [
+      { required: true, message: "物品分类编码2级不能为空", trigger: "blur" }
+    ],
+    categoryNameTwo: [
+      { required: true, message: "物品分类名称2级不能为空", trigger: "blur" }
+    ],
+    unit: [
+      { required: true, message: "单位不能为空", trigger: "blur" }
+    ],
+    checkPositionNameOne: [
+      { required: true, message: "检查部位名称1级不能为空", trigger: "blur" }
+    ],
+    checkPositionNameTwo: [
+      { required: true, message: "检查部位名称2级不能为空", trigger: "blur" }
+    ],
+    unitDesc: [
+      { required: true, message: "单位名称不能为空", trigger: "blur" }
+    ],
+    handlingMethod: [
+      { required: true, message: "处理方式不能为空", trigger: "blur" }
+    ],
+    handlingMethodDesc: [
+      { required: true, message: "处理方式名称不能为空", trigger: "blur" }
+    ],
+  }
+})
+
+const { queryParams, form, rules } = toRefs(data)
+
+/** 查询查获物品明细列表 */
+function getList() {
+  loading.value = true
+  listItems(queryParams.value).then(response => {
+    itemsList.value = response.rows
+    total.value = response.total
+    loading.value = false
+  })
+}
+
+// 取消按钮
+function cancel() {
+  open.value = false
+  reset()
+}
+
+// 表单重置
+function reset() {
+  form.value = {
+    tenantId: null,
+    revision: null,
+    createBy: null,
+    createTime: null,
+    updateBy: null,
+    updateTime: null,
+    id: null,
+    recordId: null,
+    itemCode: null,
+    quantity: null,
+    imageUrl: null,
+    remark: null,
+    checkPositionCodeOne: null,
+    isActiveConcealment: null,
+    checkPositionCodeTwo: null,
+    checkPositionSpecific: null,
+    itemName: null,
+    categoryCodeOne: null,
+    categoryNameOne: null,
+    categoryCodeTwo: null,
+    categoryNameTwo: null,
+    unit: null,
+    checkPositionNameOne: null,
+    checkPositionNameTwo: null,
+    unitDesc: null,
+    handlingMethod: null,
+    handlingMethodDesc: null,
+    imageId: null
+  }
+  proxy.resetForm("itemsRef")
+}
+
+/** 搜索按钮操作 */
+function handleQuery() {
+  queryParams.value.pageNum = 1
+  getList()
+}
+
+/** 重置按钮操作 */
+function resetQuery() {
+  proxy.resetForm("queryRef")
+  handleQuery()
+}
+
+// 多选框选中数据
+function handleSelectionChange(selection) {
+  ids.value = selection.map(item => item.id)
+  single.value = selection.length != 1
+  multiple.value = !selection.length
+}
+
+/** 新增按钮操作 */
+function handleAdd() {
+  reset()
+  open.value = true
+  title.value = "添加查获物品明细"
+}
+
+/** 修改按钮操作 */
+function handleUpdate(row) {
+  reset()
+  const _id = row.id || ids.value
+  getItems(_id).then(response => {
+    form.value = response.data
+    open.value = true
+    title.value = "修改查获物品明细"
+  })
+}
+
+/** 提交按钮 */
+function submitForm() {
+  proxy.$refs["itemsRef"].validate(valid => {
+    if (valid) {
+      if (form.value.id != null) {
+        updateItems(form.value).then(response => {
+          proxy.$modal.msgSuccess("修改成功")
+          open.value = false
+          getList()
+        })
+      } else {
+        addItems(form.value).then(response => {
+          proxy.$modal.msgSuccess("新增成功")
+          open.value = false
+          getList()
+        })
+      }
+    }
+  })
+}
+
+/** 删除按钮操作 */
+function handleDelete(row) {
+  const _ids = row.id || ids.value
+  proxy.$modal.confirm('是否确认删除数据项？').then(function() {
+    return delItems(_ids)
+  }).then(() => {
+    getList()
+    proxy.$modal.msgSuccess("删除成功")
+  }).catch(() => {})
+}
+
+/** 导出按钮操作 */
+function handleExport() {
+  proxy.download('item/items/export', {
+    ...queryParams.value
+  }, `items_${new Date().getTime()}.xlsx`)
+}
+
+getList()
+</script>

src/views/item/record/index.vue

@@ -0,0 +1,430 @@
+<template>
+  <div class="app-container">
+    <el-form :model="queryParams" ref="queryRef" :inline="true" v-show="showSearch" label-width="68px">
+
+      <el-form-item label="检查人员" prop="inspectUserName">
+        <el-input v-model="queryParams.inspectUserName" placeholder="请输入检查人员" clearable @keyup.enter="handleQuery" />
+      </el-form-item>
+
+      <el-form-item label="查获时间" prop="seizureTime">
+        <el-date-picker clearable v-model="queryParams.seizureTime" type="date" value-format="YYYY-MM-DD"
+          placeholder="请选择查获时间">
+        </el-date-picker>
+      </el-form-item>
+
+      <el-form-item label="安检位置" prop="regionalName">
+        <el-input v-model="queryParams.regionalName" placeholder="请输入安检位置" clearable @keyup.enter="handleQuery" />
+      </el-form-item>
+
+      <el-form-item label="查获班组" prop="inspectTeamName">
+        <el-input v-model="queryParams.inspectTeamName" placeholder="请输入查获班组" clearable @keyup.enter="handleQuery" />
+      </el-form-item>
+
+      <!-- <el-form-item label="违禁类型" prop="forbiddenTypeText">
+        <el-input v-model="queryParams.forbiddenTypeText" placeholder="请输入违禁品类型" clearable @keyup.enter="handleQuery" />
+      </el-form-item>
+
+      <el-form-item label="查获部位" prop="checkPositionSpecific">
+        <el-input v-model="queryParams.checkPositionSpecific" placeholder="请输入查获部位" clearable
+          @keyup.enter="handleQuery" />
+      </el-form-item>
+
+      <el-form-item label="处理方式" prop="handlingMethodDesc">
+        <el-input v-model="queryParams.handlingMethodDesc" placeholder="请输入处理方式" clearable @keyup.enter="handleQuery" />
+      </el-form-item>
+
+      <el-form-item label="是否有意隐匿" prop="regionalName">
+        <el-input v-model="queryParams.inspectTeamName" placeholder="请输入通道名称" clearable @keyup.enter="handleQuery" />
+      </el-form-item> -->
+
+
+
+      <el-form-item>
+        <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
+        <el-button icon="Refresh" @click="resetQuery">重置</el-button>
+      </el-form-item>
+    </el-form>
+
+    <el-row :gutter="10" class="mb8">
+      <!-- <el-col :span="1.5">
+        <el-button type="primary" plain icon="Plus" @click="handleAdd" v-hasPermi="['item:record:add']">新增</el-button>
+      </el-col>
+      <el-col :span="1.5">
+        <el-button type="success" plain icon="Edit" :disabled="single" @click="handleUpdate"
+          v-hasPermi="['item:record:edit']">修改</el-button>
+      </el-col>
+      <el-col :span="1.5">
+        <el-button type="danger" plain icon="Delete" :disabled="multiple" @click="handleDelete"
+          v-hasPermi="['item:record:remove']">删除</el-button>
+      </el-col> -->
+      <el-col :span="1.5">
+        <el-button type="warning" plain icon="Download" @click="handleExport"
+          v-hasPermi="['item:record:export']">导出</el-button>
+      </el-col>
+      <right-toolbar v-model:showSearch="showSearch" @queryTable="getList"></right-toolbar>
+    </el-row>
+
+    <el-table v-loading="loading" :data="recordList" @selection-change="handleSelectionChange">
+      <el-table-column type="selection" width="55" align="center" />
+
+      <el-table-column label="安检员" align="center" prop="inspectUserName" />
+      <el-table-column label="查获时间" align="center" prop="seizureTime" width="180">
+        <template #default="scope">
+          <span>{{ parseTime(scope.row.seizureTime, '{y}-{m}-{d}') }}</span>
+        </template>
+      </el-table-column>
+      <el-table-column label="安检位置" align="center" prop="regionalName" />
+      <el-table-column label="安检岗位" align="center" prop="checkMethodDesc" />
+      <el-table-column label="查获班组" align="center" prop="inspectTeamName" />
+      <el-table-column label="上报班组" align="center" prop="attendanceTeamName" />
+      <!-- <el-table-column label="违禁品类型" align="center" prop="categoryNameTwo" />
+      <el-table-column label="数量" align="center" prop="quantity" />
+      <el-table-column label="查获部位" align="center" prop="customLocation" />
+      <el-table-column label="具体位置" align="center" prop="checkPositionSpecific" />
+      <el-table-column label="处理方式" align="center" prop="handlingMethodDesc" />
+      <el-table-column label="是否有意隐匿" align="center" prop="isActiveConcealment" />
+      <el-table-column label="旅客姓名" align="center" prop="passengerName" />
+      <el-table-column label="旅客身份证号" align="center" prop="passengerCard" />
+      <el-table-column label="航班号" align="center" prop="passengerFlight" /> -->
+      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
+        <template #default="scope">
+          <!-- <el-button link type="primary" icon="Edit" @click="handleUpdate(scope.row)" v-hasPermi="['item:record:edit']">修改</el-button>
+          <el-button link type="primary" icon="Delete" @click="handleDelete(scope.row)" v-hasPermi="['item:record:remove']">删除</el-button> -->
+          <el-button link type="info" icon="View" @click="handleDetail(scope.row)"
+            v-hasPermi="['check:checkRecord:query']">详情</el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+
+    <pagination v-show="total > 0" :total="total" v-model:page="queryParams.pageNum"
+      v-model:limit="queryParams.pageSize" @pagination="getList" />
+
+    <!-- 添加或修改查获记录对话框 -->
+    <el-dialog :title="title" v-model="open" width="800px" append-to-body>
+      <el-form ref="recordRef" :model="form" :rules="rules" label-width="9em" disabled>
+        <el-form-item label="违禁品类别/类型" prop="channelCode">
+          <el-input :value="`${form.itemSeizureItemsList[0].categoryNameOne} / ${form.itemSeizureItemsList[0].categoryNameTwo}`" placeholder="- -" />
+        </el-form-item>
+        <!-- <el-form-item label="违禁品名称" prop="channelCode">
+          <el-input v-model="form.itemSeizureItemsList[0].itemName" placeholder="" />
+        </el-form-item> -->
+
+        <el-form-item label="数量" prop="channelCode">
+          <el-input v-model="form.itemSeizureItemsList[0].quantity" placeholder="-" />
+        </el-form-item>
+         <!-- <el-form-item label="查获部位" prop="channelCode">
+          <el-input v-model="form.itemSeizureItemsList[0].checkPositionNameOne" placeholder="" />
+        </el-form-item> -->
+           <el-form-item label="部位类别/类型" prop="channelCode">
+          <el-input :value="`${form.itemSeizureItemsList[0].checkPositionNameOne} / ${form.itemSeizureItemsList[0].checkPositionNameTwo}`" placeholder="- -" />
+        </el-form-item>
+        <!-- <el-form-item label="具体位置" prop="channelCode">
+          <el-input v-model="form.itemSeizureItemsList[0].checkPositionSpecific" placeholder="" />
+        </el-form-item> -->
+        <el-form-item label="处理方式" prop="channelCode">
+          <el-input v-model="form.itemSeizureItemsList[0].handlingMethodDesc" placeholder="-" />
+        </el-form-item>
+        <el-form-item label="是否隐匿夹带" prop="channelCode">
+          <el-select v-model="form.itemSeizureItemsList[0].isActiveConcealment"  placeholder="-">
+            <el-option label="否" :value="0" />
+            <el-option label="是" :value="1" />
+          </el-select>
+        </el-form-item>
+        <!-- <el-form-item label="旅客姓名" prop="passengerName">
+          <el-input v-model="form.passengerName" placeholder="请输入旅客姓名" />
+        </el-form-item>
+        <el-form-item label="旅客身份证号" prop="passengerCard">
+          <el-input v-model="form.passengerCard" placeholder="请输入旅客身份证号" />
+        </el-form-item>
+        <el-form-item label="航班号" prop="passengerFlight">
+          <el-input v-model="form.passengerFlight" placeholder="-" />
+        </el-form-item> -->
+        
+      </el-form>
+      <template #footer>
+        <div class="dialog-footer">
+          <!-- <el-button type="primary" @click="submitForm">确 定</el-button> -->
+          <el-button @click="cancel">取 消</el-button>
+        </div>
+      </template>
+    </el-dialog>
+  </div>
+</template>
+
+<script setup name="Record">
+import { listRecord, getRecord, delRecord, addRecord, updateRecord } from "@/api/item/record"
+import { onMounted } from 'vue'
+
+const { proxy } = getCurrentInstance()
+
+const recordList = ref([])
+const open = ref(false)
+const loading = ref(true)
+const showSearch = ref(true)
+const ids = ref([])
+const single = ref(true)
+const multiple = ref(true)
+const total = ref(0)
+const title = ref("")
+
+const data = reactive({
+  form: {},
+  queryParams: {
+    pageNum: 1,
+    pageSize: 10,
+    channelCode: null,
+    seizureTime: null,
+    checkMethod: null,
+    attendanceId: null,
+    attendanceTeamName: null,
+    attendanceDepartmentName: null,
+    attendanceStationName: null,
+    channelName: null,
+    regionalName: null,
+    terminlName: null,
+    passengerName: null,
+    passengerGender: null,
+    passengerCard: null,
+    passengerFlight: null,
+    inspectTeamId: null,
+    inspectTeamName: null,
+    inspectDepartmentId: null,
+    inspectDepartmentName: null,
+    inspectStationId: null,
+    inspectStationName: null,
+    checkMethodDesc: null,
+    passengerGenderDesc: null,
+    inspectUserName: null
+  },
+  rules: {
+    channelCode: [
+      { required: true, message: "通道编码不能为空", trigger: "blur" }
+    ],
+    seizureTime: [
+      { required: true, message: "查获时间不能为空", trigger: "blur" }
+    ],
+    checkMethod: [
+      { required: true, message: "检查岗位不能为空", trigger: "blur" }
+    ],
+    attendanceId: [
+      { required: true, message: "考勤记录ID不能为空", trigger: "blur" }
+    ],
+    attendanceTeamId: [
+      { required: true, message: "考勤班组ID不能为空", trigger: "blur" }
+    ],
+    attendanceTeamName: [
+      { required: true, message: "考勤班组名称不能为空", trigger: "blur" }
+    ],
+    attendanceDepartmentId: [
+      { required: true, message: "考勤科室ID不能为空", trigger: "blur" }
+    ],
+    attendanceDepartmentName: [
+      { required: true, message: "考勤科室名称不能为空", trigger: "blur" }
+    ],
+    attendanceStationId: [
+      { required: true, message: "考勤机构站ID不能为空", trigger: "blur" }
+    ],
+    attendanceStationName: [
+      { required: true, message: "考勤机构站名称不能为空", trigger: "blur" }
+    ],
+    channelName: [
+      { required: true, message: "通道名称不能为空", trigger: "blur" }
+    ],
+    regionalCode: [
+      { required: true, message: "区域编码不能为空", trigger: "blur" }
+    ],
+    regionalName: [
+      { required: true, message: "区域名称不能为空", trigger: "blur" }
+    ],
+    terminlCode: [
+      { required: true, message: "航站楼编码不能为空", trigger: "blur" }
+    ],
+    terminlName: [
+      { required: true, message: "航站楼名称不能为空", trigger: "blur" }
+    ],
+    inspectTeamId: [
+      { required: true, message: "查获人班组ID不能为空", trigger: "blur" }
+    ],
+    inspectTeamName: [
+      { required: true, message: "查获人班组名称不能为空", trigger: "blur" }
+    ],
+    inspectDepartmentId: [
+      { required: true, message: "查获人科室ID不能为空", trigger: "blur" }
+    ],
+    inspectDepartmentName: [
+      { required: true, message: "查获人科室名称不能为空", trigger: "blur" }
+    ],
+    inspectStationId: [
+      { required: true, message: "查获人机构站ID不能为空", trigger: "blur" }
+    ],
+    inspectStationName: [
+      { required: true, message: "查获人机构站名称不能为空", trigger: "blur" }
+    ],
+    checkMethodDesc: [
+      { required: true, message: "检查岗位名称不能为空", trigger: "blur" }
+    ],
+    passengerGenderDesc: [
+      { required: true, message: "旅客性别名称不能为空", trigger: "blur" }
+    ],
+    inspectUserName: [
+      { required: true, message: "检查人员名称不能为空", trigger: "blur" }
+    ]
+  }
+})
+
+const { queryParams, form, rules } = toRefs(data)
+
+/** 查询查获记录列表 */
+function getList() {
+  loading.value = true
+  listRecord(queryParams.value).then(response => {
+    recordList.value = response.rows
+    total.value = response.total
+    loading.value = false
+  })
+}
+
+// 取消按钮
+function cancel() {
+  open.value = false
+  reset()
+}
+
+// 表单重置
+function reset() {
+  form.value = {
+    tenantId: null,
+    revision: null,
+    createBy: null,
+    createTime: null,
+    updateBy: null,
+    updateTime: null,
+    inspectUserId: null,
+    channelCode: null,
+    seizureTime: null,
+    checkMethod: null,
+    remark: null,
+    attendanceId: null,
+    id: null,
+    attendanceTeamId: null,
+    attendanceTeamName: null,
+    attendanceDepartmentId: null,
+    attendanceDepartmentName: null,
+    attendanceStationId: null,
+    attendanceStationName: null,
+    channelName: null,
+    regionalCode: null,
+    regionalName: null,
+    terminlCode: null,
+    terminlName: null,
+    passengerName: null,
+    passengerGender: null,
+     itemSeizureItemsList: [{}],
+    passengerCard: null,
+    passengerFlight: null,
+    inspectTeamId: null,
+    inspectTeamName: null,
+    inspectDepartmentId: null,
+    inspectDepartmentName: null,
+    inspectStationId: null,
+    inspectStationName: null,
+    checkMethodDesc: null,
+    passengerGenderDesc: null,
+    inspectUserName: null
+  }
+  proxy.resetForm("recordRef")
+}
+
+/** 搜索按钮操作 */
+function handleQuery() {
+  queryParams.value.pageNum = 1
+  getList()
+}
+
+/** 重置按钮操作 */
+function resetQuery() {
+  proxy.resetForm("queryRef")
+  handleQuery()
+}
+
+// 多选框选中数据
+function handleSelectionChange(selection) {
+  ids.value = selection.map(item => item.id)
+  single.value = selection.length != 1
+  multiple.value = !selection.length
+}
+
+/** 新增按钮操作 */
+function handleAdd() {
+  reset()
+  open.value = true
+  title.value = "添加查获记录"
+}
+
+/** 修改按钮操作 */
+function handleUpdate(row) {
+  reset()
+  const _id = row.id || ids.value
+  getRecord(_id).then(response => {
+    form.value = response.data
+    open.value = true
+    title.value = "修改查获记录"
+  })
+}
+
+/** 查看详情 */
+function handleDetail(row) {
+  reset()
+  const _id = row.id || ids.value
+  getRecord(_id).then(response => {
+    form.value = response.data
+    open.value = true
+    title.value = "详情"
+  })
+}
+
+
+
+/** 提交按钮 */
+function submitForm() {
+  proxy.$refs["recordRef"].validate(valid => {
+    if (valid) {
+      if (form.value.id != null) {
+        updateRecord(form.value).then(response => {
+          proxy.$modal.msgSuccess("修改成功")
+          open.value = false
+          getList()
+        })
+      } else {
+        addRecord(form.value).then(response => {
+          proxy.$modal.msgSuccess("新增成功")
+          open.value = false
+          getList()
+        })
+      }
+    }
+  })
+}
+
+/** 删除按钮操作 */
+function handleDelete(row) {
+  const _ids = row.id || ids.value
+  proxy.$modal.confirm('是否确认删除数据项？').then(function () {
+    return delRecord(_ids)
+  }).then(() => {
+    getList()
+    proxy.$modal.msgSuccess("删除成功")
+  }).catch(() => { })
+}
+
+/** 导出按钮操作 */
+function handleExport() {
+  proxy.download('item/record/export', {
+    ...queryParams.value
+  }, `record_${new Date().getTime()}.xlsx`)
+}
+
+onMounted(() => {
+  getList()
+})
+</script>

src/views/login.vue

@@ -0,0 +1,229 @@
+<template>
+  <div class="login">
+    <el-form ref="loginRef" :model="loginForm" :rules="loginRules" class="login-form">
+      <h3 class="title">{{ title }}</h3>
+      <el-form-item prop="username">
+        <el-input
+          v-model="loginForm.username"
+          type="text"
+          size="large"
+          auto-complete="off"
+          placeholder="账号"
+        >
+          <template #prefix><svg-icon icon-class="user" class="el-input__icon input-icon" /></template>
+        </el-input>
+      </el-form-item>
+      <el-form-item prop="password">
+        <el-input
+          v-model="loginForm.password"
+          type="password"
+          size="large"
+          auto-complete="off"
+          placeholder="密码"
+          @keyup.enter="handleLogin"
+        >
+          <template #prefix><svg-icon icon-class="password" class="el-input__icon input-icon" /></template>
+        </el-input>
+      </el-form-item>
+      <el-form-item prop="code" v-if="captchaEnabled">
+        <el-input
+          v-model="loginForm.code"
+          size="large"
+          auto-complete="off"
+          placeholder="验证码"
+          style="width: 63%"
+          @keyup.enter="handleLogin"
+        >
+          <template #prefix><svg-icon icon-class="validCode" class="el-input__icon input-icon" /></template>
+        </el-input>
+        <div class="login-code">
+          <img :src="codeUrl" @click="getCode" class="login-code-img"/>
+        </div>
+      </el-form-item>
+      <el-checkbox v-model="loginForm.rememberMe" style="margin:0px 0px 25px 0px;">记住密码</el-checkbox>
+      <el-form-item style="width:100%;">
+        <el-button
+          :loading="loading"
+          size="large"
+          type="primary"
+          style="width:100%;"
+          @click.prevent="handleLogin"
+        >
+          <span v-if="!loading">登 录</span>
+          <span v-else>登 录 中...</span>
+        </el-button>
+        <div style="float: right;" v-if="register">
+          <router-link class="link-type" :to="'/register'">立即注册</router-link>
+        </div>
+      </el-form-item>
+    </el-form>
+    <!--  底部  -->
+    <div class="el-login-footer">
+      <span>Copyright © 2018-2025 ruoyi.vip All Rights Reserved.</span>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { getCodeImg } from "@/api/login"
+import Cookies from "js-cookie"
+import { encrypt, decrypt } from "@/utils/jsencrypt"
+import useUserStore from '@/store/modules/user'
+
+const title = import.meta.env.VITE_APP_TITLE
+const userStore = useUserStore()
+const route = useRoute()
+const router = useRouter()
+const { proxy } = getCurrentInstance()
+
+const loginForm = ref({
+  username: "admin",
+  password: "admin123",
+  rememberMe: false,
+  code: "",
+  uuid: ""
+})
+
+const loginRules = {
+  username: [{ required: true, trigger: "blur", message: "请输入您的账号" }],
+  password: [{ required: true, trigger: "blur", message: "请输入您的密码" }],
+  code: [{ required: true, trigger: "change", message: "请输入验证码" }]
+}
+
+const codeUrl = ref("")
+const loading = ref(false)
+// 验证码开关
+const captchaEnabled = ref(true)
+// 注册开关
+const register = ref(false)
+const redirect = ref(undefined)
+
+watch(route, (newRoute) => {
+    redirect.value = newRoute.query && newRoute.query.redirect
+}, { immediate: true })
+
+function handleLogin() {
+  proxy.$refs.loginRef.validate(valid => {
+    if (valid) {
+      loading.value = true
+      // 勾选了需要记住密码设置在 cookie 中设置记住用户名和密码
+      if (loginForm.value.rememberMe) {
+        Cookies.set("username", loginForm.value.username, { expires: 30 })
+        Cookies.set("password", encrypt(loginForm.value.password), { expires: 30 })
+        Cookies.set("rememberMe", loginForm.value.rememberMe, { expires: 30 })
+      } else {
+        // 否则移除
+        Cookies.remove("username")
+        Cookies.remove("password")
+        Cookies.remove("rememberMe")
+      }
+      // 调用action的登录方法
+      userStore.login(loginForm.value).then(() => {
+        const query = route.query
+        const otherQueryParams = Object.keys(query).reduce((acc, cur) => {
+          if (cur !== "redirect") {
+            acc[cur] = query[cur]
+          }
+          return acc
+        }, {})
+        router.push({ path: redirect.value || "/", query: otherQueryParams })
+      }).catch(() => {
+        loading.value = false
+        // 重新获取验证码
+        if (captchaEnabled.value) {
+          getCode()
+        }
+      })
+    }
+  })
+}
+
+function getCode() {
+  getCodeImg().then(res => {
+    captchaEnabled.value = res.captchaEnabled === undefined ? true : res.captchaEnabled
+    if (captchaEnabled.value) {
+      codeUrl.value = "data:image/gif;base64," + res.img
+      loginForm.value.uuid = res.uuid
+    }
+  })
+}
+
+function getCookie() {
+  const username = Cookies.get("username")
+  const password = Cookies.get("password")
+  const rememberMe = Cookies.get("rememberMe")
+  loginForm.value = {
+    username: username === undefined ? loginForm.value.username : username,
+    password: password === undefined ? loginForm.value.password : decrypt(password),
+    rememberMe: rememberMe === undefined ? false : Boolean(rememberMe)
+  }
+}
+
+getCode()
+getCookie()
+</script>
+
+<style lang='scss' scoped>
+.login {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 100%;
+  background-image: url("../assets/images/login-background.jpg");
+  background-size: cover;
+}
+.title {
+  margin: 0px auto 30px auto;
+  text-align: center;
+  color: #707070;
+}
+
+.login-form {
+  border-radius: 6px;
+  background: #ffffff;
+  width: 400px;
+  padding: 25px 25px 5px 25px;
+  z-index: 1;
+  .el-input {
+    height: 40px;
+    input {
+      height: 40px;
+    }
+  }
+  .input-icon {
+    height: 39px;
+    width: 14px;
+    margin-left: 0px;
+  }
+}
+.login-tip {
+  font-size: 13px;
+  text-align: center;
+  color: #bfbfbf;
+}
+.login-code {
+  width: 33%;
+  height: 40px;
+  float: right;
+  img {
+    cursor: pointer;
+    vertical-align: middle;
+  }
+}
+.el-login-footer {
+  height: 40px;
+  line-height: 40px;
+  position: fixed;
+  bottom: 0;
+  width: 100%;
+  text-align: center;
+  color: #fff;
+  font-family: Arial;
+  font-size: 12px;
+  letter-spacing: 1px;
+}
+.login-code-img {
+  height: 40px;
+  padding-left: 12px;
+}
+</style>

src/views/monitor/cache/index.vue

@@ -0,0 +1,132 @@
+<template>
+  <div class="app-container">
+    <el-row :gutter="10">
+      <el-col :span="24" class="card-box">
+        <el-card>
+          <template #header><Monitor style="width: 1em; height: 1em; vertical-align: middle;" /> <span style="vertical-align: middle;">基本信息</span></template>
+          <div class="el-table el-table--enable-row-hover el-table--medium">
+            <table cellspacing="0" style="width: 100%">
+              <tbody>
+                <tr>
+                  <td class="el-table__cell is-leaf"><div class="cell">Redis版本</div></td>
+                  <td class="el-table__cell is-leaf"><div class="cell" v-if="cache.info">{{ cache.info.redis_version }}</div></td>
+                  <td class="el-table__cell is-leaf"><div class="cell">运行模式</div></td>
+                  <td class="el-table__cell is-leaf"><div class="cell" v-if="cache.info">{{ cache.info.redis_mode == "standalone" ? "单机" : "集群" }}</div></td>
+                  <td class="el-table__cell is-leaf"><div class="cell">端口</div></td>
+                  <td class="el-table__cell is-leaf"><div class="cell" v-if="cache.info">{{ cache.info.tcp_port }}</div></td>
+                  <td class="el-table__cell is-leaf"><div class="cell">客户端数</div></td>
+                  <td class="el-table__cell is-leaf"><div class="cell" v-if="cache.info">{{ cache.info.connected_clients }}</div></td>
+                </tr>
+                <tr>
+                  <td class="el-table__cell is-leaf"><div class="cell">运行时间(天)</div></td>
+                  <td class="el-table__cell is-leaf"><div class="cell" v-if="cache.info">{{ cache.info.uptime_in_days }}</div></td>
+                  <td class="el-table__cell is-leaf"><div class="cell">使用内存</div></td>
+                  <td class="el-table__cell is-leaf"><div class="cell" v-if="cache.info">{{ cache.info.used_memory_human }}</div></td>
+                  <td class="el-table__cell is-leaf"><div class="cell">使用CPU</div></td>
+                  <td class="el-table__cell is-leaf"><div class="cell" v-if="cache.info">{{ parseFloat(cache.info.used_cpu_user_children).toFixed(2) }}</div></td>
+                  <td class="el-table__cell is-leaf"><div class="cell">内存配置</div></td>
+                  <td class="el-table__cell is-leaf"><div class="cell" v-if="cache.info">{{ cache.info.maxmemory_human }}</div></td>
+                </tr>
+                <tr>
+                  <td class="el-table__cell is-leaf"><div class="cell">AOF是否开启</div></td>
+                  <td class="el-table__cell is-leaf"><div class="cell" v-if="cache.info">{{ cache.info.aof_enabled == "0" ? "否" : "是" }}</div></td>
+                  <td class="el-table__cell is-leaf"><div class="cell">RDB是否成功</div></td>
+                  <td class="el-table__cell is-leaf"><div class="cell" v-if="cache.info">{{ cache.info.rdb_last_bgsave_status }}</div></td>
+                  <td class="el-table__cell is-leaf"><div class="cell">Key数量</div></td>
+                  <td class="el-table__cell is-leaf"><div class="cell" v-if="cache.dbSize">{{ cache.dbSize }} </div></td>
+                  <td class="el-table__cell is-leaf"><div class="cell">网络入口/出口</div></td>
+                  <td class="el-table__cell is-leaf"><div class="cell" v-if="cache.info">{{ cache.info.instantaneous_input_kbps }}kps/{{cache.info.instantaneous_output_kbps}}kps</div></td>
+                </tr>
+              </tbody>
+            </table>
+          </div>
+        </el-card>
+      </el-col>
+
+      <el-col :span="12" class="card-box">
+        <el-card>
+          <template #header><PieChart style="width: 1em; height: 1em; vertical-align: middle;" /> <span style="vertical-align: middle;">命令统计</span></template>
+          <div class="el-table el-table--enable-row-hover el-table--medium">
+            <div ref="commandstats" style="height: 420px" />
+          </div>
+        </el-card>
+      </el-col>
+
+      <el-col :span="12" class="card-box">
+        <el-card>
+          <template #header><Odometer style="width: 1em; height: 1em; vertical-align: middle;" /> <span style="vertical-align: middle;">内存信息</span></template>
+          <div class="el-table el-table--enable-row-hover el-table--medium">
+            <div ref="usedmemory" style="height: 420px" />
+          </div>
+        </el-card>
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script setup name="Cache">
+import { getCache } from '@/api/monitor/cache'
+import * as echarts from 'echarts'
+
+const cache = ref([])
+const commandstats = ref(null)
+const usedmemory = ref(null)
+const { proxy } = getCurrentInstance()
+
+function getList() {
+  proxy.$modal.loading("正在加载缓存监控数据，请稍候！")
+  getCache().then(response => {
+    proxy.$modal.closeLoading()
+    cache.value = response.data
+
+    const commandstatsIntance = echarts.init(commandstats.value, "macarons")
+    commandstatsIntance.setOption({
+      tooltip: {
+        trigger: "item",
+        formatter: "{a} <br/>{b} : {c} ({d}%)"
+      },
+      series: [
+        {
+          name: "命令",
+          type: "pie",
+          roseType: "radius",
+          radius: [15, 95],
+          center: ["50%", "38%"],
+          data: response.data.commandStats,
+          animationEasing: "cubicInOut",
+          animationDuration: 1000
+        }
+      ]
+    })
+    const usedmemoryInstance = echarts.init(usedmemory.value, "macarons")
+    usedmemoryInstance.setOption({
+      tooltip: {
+        formatter: "{b} <br/>{a} : " + cache.value.info.used_memory_human
+      },
+      series: [
+        {
+          name: "峰值",
+          type: "gauge",
+          min: 0,
+          max: 1000,
+          detail: {
+            formatter: cache.value.info.used_memory_human
+          },
+          data: [
+            {
+              value: parseFloat(cache.value.info.used_memory_human),
+              name: "内存消耗"
+            }
+          ]
+        }
+      ]
+    })
+    window.addEventListener("resize", () => {
+      commandstatsIntance.resize()
+      usedmemoryInstance.resize()
+    })
+  })
+}
+
+getList()
+</script>

src/views/monitor/cache/list.vue

@@ -0,0 +1,246 @@
+<template>
+  <div class="app-container">
+    <el-row :gutter="10">
+      <el-col :span="8">
+        <el-card style="height: calc(100vh - 125px)">
+          <template #header>
+            <Collection style="width: 1em; height: 1em; vertical-align: middle;" /> <span style="vertical-align: middle;">缓存列表</span>
+            <el-button
+              style="float: right; padding: 3px 0"
+              link
+              type="primary"
+              icon="Refresh"
+              @click="refreshCacheNames()"
+            ></el-button>
+          </template>
+          <el-table
+            v-loading="loading"
+            :data="cacheNames"
+            :height="tableHeight"
+            highlight-current-row
+            @row-click="getCacheKeys"
+            style="width: 100%"
+          >
+            <el-table-column
+              label="序号"
+              width="60"
+              type="index"
+            ></el-table-column>
+
+            <el-table-column
+              label="缓存名称"
+              align="center"
+              prop="cacheName"
+              :show-overflow-tooltip="true"
+              :formatter="nameFormatter"
+            ></el-table-column>
+
+            <el-table-column
+              label="备注"
+              align="center"
+              prop="remark"
+              :show-overflow-tooltip="true"
+            />
+            <el-table-column
+              label="操作"
+              width="60"
+              align="center"
+              class-name="small-padding fixed-width"
+            >
+              <template #default="scope">
+                <el-button
+                  link
+                  type="primary"
+                  icon="Delete"
+                  @click="handleClearCacheName(scope.row)"
+                ></el-button>
+              </template>
+            </el-table-column>
+          </el-table>
+        </el-card>
+      </el-col>
+
+      <el-col :span="8">
+        <el-card style="height: calc(100vh - 125px)">
+          <template #header>
+            <Key style="width: 1em; height: 1em; vertical-align: middle;" /> <span style="vertical-align: middle;">键名列表</span>
+            <el-button
+              style="float: right; padding: 3px 0"
+              link
+              type="primary"
+              icon="Refresh"
+              @click="refreshCacheKeys()"
+            ></el-button>
+          </template>
+          <el-table
+            v-loading="subLoading"
+            :data="cacheKeys"
+            :height="tableHeight"
+            highlight-current-row
+            @row-click="handleCacheValue"
+            style="width: 100%"
+          >
+            <el-table-column
+              label="序号"
+              width="60"
+              type="index"
+            ></el-table-column>
+            <el-table-column
+              label="缓存键名"
+              align="center"
+              :show-overflow-tooltip="true"
+              :formatter="keyFormatter"
+            >
+            </el-table-column>
+            <el-table-column
+              label="操作"
+              width="60"
+              align="center"
+              class-name="small-padding fixed-width"
+            >
+              <template #default="scope">
+                <el-button
+                  link
+                  type="primary"
+                  icon="Delete"
+                  @click="handleClearCacheKey(scope.row)"
+                ></el-button>
+              </template>
+            </el-table-column>
+          </el-table>
+        </el-card>
+      </el-col>
+
+      <el-col :span="8">
+        <el-card :bordered="false" style="height: calc(100vh - 125px)">
+          <template #header>
+            <Document style="width: 1em; height: 1em; vertical-align: middle;" /> <span style="vertical-align: middle;">缓存内容</span>
+            <el-button
+              style="float: right; padding: 3px 0"
+              link
+              type="primary"
+              icon="Refresh"
+              @click="handleClearCacheAll()"
+              >清理全部</el-button
+            >
+          </template>
+          <el-form :model="cacheForm">
+            <el-row :gutter="32">
+              <el-col :offset="1" :span="22">
+                <el-form-item label="缓存名称:" prop="cacheName">
+                  <el-input v-model="cacheForm.cacheName" :readOnly="true" />
+                </el-form-item>
+              </el-col>
+              <el-col :offset="1" :span="22">
+                <el-form-item label="缓存键名:" prop="cacheKey">
+                  <el-input v-model="cacheForm.cacheKey" :readOnly="true" />
+                </el-form-item>
+              </el-col>
+              <el-col :offset="1" :span="22">
+                <el-form-item label="缓存内容:" prop="cacheValue">
+                  <el-input
+                    v-model="cacheForm.cacheValue"
+                    type="textarea"
+                    :rows="8"
+                    :readOnly="true"
+                  />
+                </el-form-item>
+              </el-col>
+            </el-row>
+          </el-form>
+        </el-card>
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script setup name="CacheList">
+import { listCacheName, listCacheKey, getCacheValue, clearCacheName, clearCacheKey, clearCacheAll } from "@/api/monitor/cache"
+
+const { proxy } = getCurrentInstance()
+
+const cacheNames = ref([])
+const cacheKeys = ref([])
+const cacheForm = ref({})
+const loading = ref(true)
+const subLoading = ref(false)
+const nowCacheName = ref("")
+const tableHeight = ref(window.innerHeight - 200)
+
+/** 查询缓存名称列表 */
+function getCacheNames() {
+  loading.value = true
+  listCacheName().then(response => {
+    cacheNames.value = response.data
+    loading.value = false
+  })
+}
+
+/** 刷新缓存名称列表 */
+function refreshCacheNames() {
+  getCacheNames()
+  proxy.$modal.msgSuccess("刷新缓存列表成功")
+}
+
+/** 清理指定名称缓存 */
+function handleClearCacheName(row) {
+  clearCacheName(row.cacheName).then(response => {
+    proxy.$modal.msgSuccess("清理缓存名称[" + row.cacheName + "]成功")
+    getCacheKeys()
+  })
+}
+
+/** 查询缓存键名列表 */
+function getCacheKeys(row) {
+  const cacheName = row !== undefined ? row.cacheName : nowCacheName.value
+  if (cacheName === "") {
+    return
+  }
+  subLoading.value = true
+  listCacheKey(cacheName).then(response => {
+    cacheKeys.value = response.data
+    subLoading.value = false
+    nowCacheName.value = cacheName
+  })
+}
+
+/** 刷新缓存键名列表 */
+function refreshCacheKeys() {
+  getCacheKeys()
+  proxy.$modal.msgSuccess("刷新键名列表成功")
+}
+
+/** 清理指定键名缓存 */
+function handleClearCacheKey(cacheKey) {
+  clearCacheKey(cacheKey).then(response => {
+    proxy.$modal.msgSuccess("清理缓存键名[" + cacheKey + "]成功")
+    getCacheKeys()
+  })
+}
+
+/** 列表前缀去除 */
+function nameFormatter(row) {
+  return row.cacheName.replace(":", "")
+}
+
+/** 键名前缀去除 */
+function keyFormatter(cacheKey) {
+  return cacheKey.replace(nowCacheName.value, "")
+}
+
+/** 查询缓存内容详细 */
+function handleCacheValue(cacheKey) {
+  getCacheValue(nowCacheName.value, cacheKey).then(response => {
+    cacheForm.value = response.data
+  })
+}
+
+/** 清理全部缓存 */
+function handleClearCacheAll() {
+  clearCacheAll().then(response => {
+    proxy.$modal.msgSuccess("清理全部缓存成功")
+  })
+}
+
+getCacheNames()
+</script>

src/views/monitor/druid/index.vue

@@ -0,0 +1,13 @@
+<template>
+   <div>
+      <i-frame v-model:src="url"></i-frame>
+   </div>
+</template>
+
+<script setup>
+import iFrame from '@/components/iFrame'
+
+import { ref } from 'vue'
+
+const url = ref(import.meta.env.VITE_APP_BASE_API + '/druid/login.html')
+</script>

src/views/monitor/job/index.vue

@@ -0,0 +1,502 @@
+<template>
+   <div class="app-container">
+      <el-form :model="queryParams" ref="queryRef" :inline="true" v-show="showSearch">
+         <el-form-item label="任务名称" prop="jobName">
+            <el-input
+               v-model="queryParams.jobName"
+               placeholder="请输入任务名称"
+               clearable
+               style="width: 200px"
+               @keyup.enter="handleQuery"
+            />
+         </el-form-item>
+         <el-form-item label="任务组名" prop="jobGroup">
+            <el-select v-model="queryParams.jobGroup" placeholder="请选择任务组名" clearable style="width: 200px">
+               <el-option
+                  v-for="dict in sys_job_group"
+                  :key="dict.value"
+                  :label="dict.label"
+                  :value="dict.value"
+               />
+            </el-select>
+         </el-form-item>
+         <el-form-item label="任务状态" prop="status">
+            <el-select v-model="queryParams.status" placeholder="请选择任务状态" clearable style="width: 200px">
+               <el-option
+                  v-for="dict in sys_job_status"
+                  :key="dict.value"
+                  :label="dict.label"
+                  :value="dict.value"
+               />
+            </el-select>
+         </el-form-item>
+         <el-form-item>
+            <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
+            <el-button icon="Refresh" @click="resetQuery">重置</el-button>
+         </el-form-item>
+      </el-form>
+
+      <el-row :gutter="10" class="mb8">
+         <el-col :span="1.5">
+            <el-button
+               type="primary"
+               plain
+               icon="Plus"
+               @click="handleAdd"
+               v-hasPermi="['monitor:job:add']"
+            >新增</el-button>
+         </el-col>
+         <el-col :span="1.5">
+            <el-button
+               type="success"
+               plain
+               icon="Edit"
+               :disabled="single"
+               @click="handleUpdate"
+               v-hasPermi="['monitor:job:edit']"
+            >修改</el-button>
+         </el-col>
+         <el-col :span="1.5">
+            <el-button
+               type="danger"
+               plain
+               icon="Delete"
+               :disabled="multiple"
+               @click="handleDelete"
+               v-hasPermi="['monitor:job:remove']"
+            >删除</el-button>
+         </el-col>
+         <el-col :span="1.5">
+            <el-button
+               type="warning"
+               plain
+               icon="Download"
+               @click="handleExport"
+               v-hasPermi="['monitor:job:export']"
+            >导出</el-button>
+         </el-col>
+         <el-col :span="1.5">
+            <el-button
+               type="info"
+               plain
+               icon="Operation"
+               @click="handleJobLog"
+               v-hasPermi="['monitor:job:query']"
+            >日志</el-button>
+         </el-col>
+         <right-toolbar v-model:showSearch="showSearch" @queryTable="getList"></right-toolbar>
+      </el-row>
+
+      <el-table v-loading="loading" :data="jobList" @selection-change="handleSelectionChange">
+         <el-table-column type="selection" width="55" align="center" />
+         <el-table-column label="任务编号" width="100" align="center" prop="jobId" />
+         <el-table-column label="任务名称" align="center" prop="jobName" :show-overflow-tooltip="true" />
+         <el-table-column label="任务组名" align="center" prop="jobGroup">
+            <template #default="scope">
+               <dict-tag :options="sys_job_group" :value="scope.row.jobGroup" />
+            </template>
+         </el-table-column>
+         <el-table-column label="调用目标字符串" align="center" prop="invokeTarget" :show-overflow-tooltip="true" />
+         <el-table-column label="cron执行表达式" align="center" prop="cronExpression" :show-overflow-tooltip="true" />
+         <el-table-column label="状态" align="center">
+            <template #default="scope">
+               <el-switch
+                  v-model="scope.row.status"
+                  active-value="0"
+                  inactive-value="1"
+                  @change="handleStatusChange(scope.row)"
+               ></el-switch>
+            </template>
+         </el-table-column>
+         <el-table-column label="操作" align="center" width="200" class-name="small-padding fixed-width">
+            <template #default="scope">
+               <el-tooltip content="修改" placement="top">
+                  <el-button link type="primary" icon="Edit" @click="handleUpdate(scope.row)" v-hasPermi="['monitor:job:edit']"></el-button>
+               </el-tooltip>
+               <el-tooltip content="删除" placement="top">
+                  <el-button link type="primary" icon="Delete" @click="handleDelete(scope.row)" v-hasPermi="['monitor:job:remove']"></el-button>
+               </el-tooltip>
+               <el-tooltip content="执行一次" placement="top">
+                  <el-button link type="primary" icon="CaretRight" @click="handleRun(scope.row)" v-hasPermi="['monitor:job:changeStatus']"></el-button>
+               </el-tooltip>
+               <el-tooltip content="任务详细" placement="top">
+                  <el-button link type="primary" icon="View" @click="handleView(scope.row)" v-hasPermi="['monitor:job:query']"></el-button>
+               </el-tooltip>
+               <el-tooltip content="调度日志" placement="top">
+                  <el-button link type="primary" icon="Operation" @click="handleJobLog(scope.row)" v-hasPermi="['monitor:job:query']"></el-button>
+               </el-tooltip>
+            </template>
+         </el-table-column>
+      </el-table>
+
+      <pagination
+         v-show="total > 0"
+         :total="total"
+         v-model:page="queryParams.pageNum"
+         v-model:limit="queryParams.pageSize"
+         @pagination="getList"
+      />
+
+      <!-- 添加或修改定时任务对话框 -->
+      <el-dialog :title="title" v-model="open" width="820px" append-to-body>
+         <el-form ref="jobRef" :model="form" :rules="rules" label-width="120px">
+            <el-row>
+               <el-col :span="12">
+                  <el-form-item label="任务名称" prop="jobName">
+                     <el-input v-model="form.jobName" placeholder="请输入任务名称" />
+                  </el-form-item>
+               </el-col>
+               <el-col :span="12">
+                  <el-form-item label="任务分组" prop="jobGroup">
+                     <el-select v-model="form.jobGroup" placeholder="请选择">
+                        <el-option
+                           v-for="dict in sys_job_group"
+                           :key="dict.value"
+                           :label="dict.label"
+                           :value="dict.value"
+                        ></el-option>
+                     </el-select>
+                  </el-form-item>
+               </el-col>
+               <el-col :span="24">
+                  <el-form-item prop="invokeTarget">
+                     <template #label>
+                        <span>
+                           调用方法
+                           <el-tooltip placement="top">
+                              <template #content>
+                                 <div>
+                                    Bean调用示例：ryTask.ryParams('ry')
+                                    <br />Class类调用示例：com.ruoyi.quartz.task.RyTask.ryParams('ry')
+                                    <br />参数说明：支持字符串，布尔类型，长整型，浮点型，整型
+                                 </div>
+                              </template>
+                              <el-icon><question-filled /></el-icon>
+                           </el-tooltip>
+                        </span>
+                     </template>
+                     <el-input v-model="form.invokeTarget" placeholder="请输入调用目标字符串" />
+                  </el-form-item>
+               </el-col>
+               <el-col :span="24">
+                  <el-form-item label="cron表达式" prop="cronExpression">
+                     <el-input v-model="form.cronExpression" placeholder="请输入cron执行表达式">
+                        <template #append>
+                           <el-button type="primary" @click="handleShowCron">
+                              生成表达式
+                              <i class="el-icon-time el-icon--right"></i>
+                           </el-button>
+                        </template>
+                     </el-input>
+                  </el-form-item>
+               </el-col>
+               <el-col :span="24" v-if="form.jobId !== undefined">
+                  <el-form-item label="状态">
+                     <el-radio-group v-model="form.status">
+                        <el-radio
+                           v-for="dict in sys_job_status"
+                           :key="dict.value"
+                           :value="dict.value"
+                        >{{ dict.label }}</el-radio>
+                     </el-radio-group>
+                  </el-form-item>
+               </el-col>
+               <el-col :span="12">
+                  <el-form-item label="执行策略" prop="misfirePolicy">
+                     <el-radio-group v-model="form.misfirePolicy">
+                        <el-radio-button value="1">立即执行</el-radio-button>
+                        <el-radio-button value="2">执行一次</el-radio-button>
+                        <el-radio-button value="3">放弃执行</el-radio-button>
+                     </el-radio-group>
+                  </el-form-item>
+               </el-col>
+               <el-col :span="12">
+                  <el-form-item label="是否并发" prop="concurrent">
+                     <el-radio-group v-model="form.concurrent">
+                        <el-radio-button value="0">允许</el-radio-button>
+                        <el-radio-button value="1">禁止</el-radio-button>
+                     </el-radio-group>
+                  </el-form-item>
+               </el-col>
+            </el-row>
+         </el-form>
+         <template #footer>
+            <div class="dialog-footer">
+               <el-button type="primary" @click="submitForm">确 定</el-button>
+               <el-button @click="cancel">取 消</el-button>
+            </div>
+         </template>
+      </el-dialog>
+
+     <el-dialog title="Cron表达式生成器" v-model="openCron" append-to-body destroy-on-close>
+       <crontab ref="crontabRef" @hide="openCron=false" @fill="crontabFill" :expression="expression"></crontab>
+     </el-dialog>
+
+      <!-- 任务日志详细 -->
+      <el-dialog title="任务详细" v-model="openView" width="700px" append-to-body>
+         <el-form :model="form" label-width="120px">
+            <el-row>
+               <el-col :span="12">
+                  <el-form-item label="任务编号：">{{ form.jobId }}</el-form-item>
+                  <el-form-item label="任务名称：">{{ form.jobName }}</el-form-item>
+               </el-col>
+               <el-col :span="12">
+                  <el-form-item label="任务分组：">{{ jobGroupFormat(form) }}</el-form-item>
+                  <el-form-item label="创建时间：">{{ form.createTime }}</el-form-item>
+               </el-col>
+               <el-col :span="12">
+                  <el-form-item label="cron表达式：">{{ form.cronExpression }}</el-form-item>
+               </el-col>
+               <el-col :span="12">
+                  <el-form-item label="下次执行时间：">{{ parseTime(form.nextValidTime) }}</el-form-item>
+               </el-col>
+               <el-col :span="24">
+                  <el-form-item label="调用目标方法：">{{ form.invokeTarget }}</el-form-item>
+               </el-col>
+               <el-col :span="12">
+                  <el-form-item label="任务状态：">
+                     <div v-if="form.status == 0">正常</div>
+                     <div v-else-if="form.status == 1">暂停</div>
+                  </el-form-item>
+               </el-col>
+               <el-col :span="12">
+                  <el-form-item label="是否并发：">
+                     <div v-if="form.concurrent == 0">允许</div>
+                     <div v-else-if="form.concurrent == 1">禁止</div>
+                  </el-form-item>
+               </el-col>
+               <el-col :span="12">
+                  <el-form-item label="执行策略：">
+                     <div v-if="form.misfirePolicy == 0">默认策略</div>
+                     <div v-else-if="form.misfirePolicy == 1">立即执行</div>
+                     <div v-else-if="form.misfirePolicy == 2">执行一次</div>
+                     <div v-else-if="form.misfirePolicy == 3">放弃执行</div>
+                  </el-form-item>
+               </el-col>
+            </el-row>
+         </el-form>
+         <template #footer>
+            <div class="dialog-footer">
+               <el-button @click="openView = false">关 闭</el-button>
+            </div>
+         </template>
+      </el-dialog>
+   </div>
+</template>
+
+<script setup name="Job">
+import Crontab from '@/components/Crontab'
+import { listJob, getJob, delJob, addJob, updateJob, runJob, changeJobStatus } from "@/api/monitor/job"
+
+const router = useRouter()
+const { proxy } = getCurrentInstance()
+const { sys_job_group, sys_job_status } = proxy.useDict("sys_job_group", "sys_job_status")
+
+const jobList = ref([])
+const open = ref(false)
+const loading = ref(true)
+const showSearch = ref(true)
+const ids = ref([])
+const single = ref(true)
+const multiple = ref(true)
+const total = ref(0)
+const title = ref("")
+const openView = ref(false)
+const openCron = ref(false)
+const expression = ref("")
+
+const data = reactive({
+  form: {},
+  queryParams: {
+    pageNum: 1,
+    pageSize: 10,
+    jobName: undefined,
+    jobGroup: undefined,
+    status: undefined
+  },
+  rules: {
+    jobName: [{ required: true, message: "任务名称不能为空", trigger: "blur" }],
+    invokeTarget: [{ required: true, message: "调用目标字符串不能为空", trigger: "blur" }],
+    cronExpression: [{ required: true, message: "cron执行表达式不能为空", trigger: "change" }]
+  }
+})
+
+const { queryParams, form, rules } = toRefs(data)
+
+/** 查询定时任务列表 */
+function getList() {
+  loading.value = true
+  listJob(queryParams.value).then(response => {
+    jobList.value = response.rows
+    total.value = response.total
+    loading.value = false
+  })
+}
+
+/** 任务组名字典翻译 */
+function jobGroupFormat(row, column) {
+  return proxy.selectDictLabel(sys_job_group.value, row.jobGroup)
+}
+
+/** 取消按钮 */
+function cancel() {
+  open.value = false
+  reset()
+}
+
+/** 表单重置 */
+function reset() {
+  form.value = {
+    jobId: undefined,
+    jobName: undefined,
+    jobGroup: undefined,
+    invokeTarget: undefined,
+    cronExpression: undefined,
+    misfirePolicy: 1,
+    concurrent: 1,
+    status: "0"
+  }
+  proxy.resetForm("jobRef")
+}
+
+/** 搜索按钮操作 */
+function handleQuery() {
+  queryParams.value.pageNum = 1
+  getList()
+}
+
+/** 重置按钮操作 */
+function resetQuery() {
+  proxy.resetForm("queryRef")
+  handleQuery()
+}
+
+// 多选框选中数据
+function handleSelectionChange(selection) {
+  ids.value = selection.map(item => item.jobId)
+  single.value = selection.length != 1
+  multiple.value = !selection.length
+}
+
+// 更多操作触发
+function handleCommand(command, row) {
+  switch (command) {
+    case "handleRun":
+      handleRun(row)
+      break
+    case "handleView":
+      handleView(row)
+      break
+    case "handleJobLog":
+      handleJobLog(row)
+      break
+    default:
+      break
+  }
+}
+
+// 任务状态修改
+function handleStatusChange(row) {
+  let text = row.status === "0" ? "启用" : "停用"
+  proxy.$modal.confirm('确认要"' + text + '""' + row.jobName + '"任务吗?').then(function () {
+    return changeJobStatus(row.jobId, row.status)
+  }).then(() => {
+    proxy.$modal.msgSuccess(text + "成功")
+  }).catch(function () {
+    row.status = row.status === "0" ? "1" : "0"
+  })
+}
+
+/* 立即执行一次 */
+function handleRun(row) {
+  proxy.$modal.confirm('确认要立即执行一次"' + row.jobName + '"任务吗?').then(function () {
+    return runJob(row.jobId, row.jobGroup)
+  }).then(() => {
+    proxy.$modal.msgSuccess("执行成功")})
+  .catch(() => {})
+}
+
+/** 任务详细信息 */
+function handleView(row) {
+  getJob(row.jobId).then(response => {
+    form.value = response.data
+    openView.value = true
+  })
+}
+
+/** cron表达式按钮操作 */
+function handleShowCron() {
+  expression.value = form.value.cronExpression
+  openCron.value = true
+}
+
+/** 确定后回传值 */
+function crontabFill(value) {
+  form.value.cronExpression = value
+}
+
+/** 任务日志列表查询 */
+function handleJobLog(row) {
+  const jobId = row.jobId || 0
+  router.push('/monitor/job-log/index/' + jobId)
+}
+
+/** 新增按钮操作 */
+function handleAdd() {
+  reset()
+  open.value = true
+  title.value = "添加任务"
+}
+
+/** 修改按钮操作 */
+function handleUpdate(row) {
+  reset()
+  const jobId = row.jobId || ids.value
+  getJob(jobId).then(response => {
+    form.value = response.data
+    open.value = true
+    title.value = "修改任务"
+  })
+}
+
+/** 提交按钮 */
+function submitForm() {
+  proxy.$refs["jobRef"].validate(valid => {
+    if (valid) {
+      if (form.value.jobId != undefined) {
+        updateJob(form.value).then(response => {
+          proxy.$modal.msgSuccess("修改成功")
+          open.value = false
+          getList()
+        })
+      } else {
+        addJob(form.value).then(response => {
+          proxy.$modal.msgSuccess("新增成功")
+          open.value = false
+          getList()
+        })
+      }
+    }
+  })
+}
+
+/** 删除按钮操作 */
+function handleDelete(row) {
+  const jobIds = row.jobId || ids.value
+  proxy.$modal.confirm('是否确认删除数据项?').then(function () {
+    return delJob(jobIds)
+  }).then(() => {
+    getList()
+    proxy.$modal.msgSuccess("删除成功")
+  }).catch(() => {})
+}
+
+/** 导出按钮操作 */
+function handleExport() {
+  proxy.download("monitor/job/export", {
+    ...queryParams.value,
+  }, `job_${new Date().getTime()}.xlsx`)
+}
+
+getList()
+</script>

src/views/monitor/job/log.vue

@@ -0,0 +1,283 @@
+<template>
+   <div class="app-container">
+      <el-form :model="queryParams" ref="queryRef" :inline="true" v-show="showSearch" label-width="68px">
+         <el-form-item label="任务名称" prop="jobName">
+            <el-input
+               v-model="queryParams.jobName"
+               placeholder="请输入任务名称"
+               clearable
+               style="width: 240px"
+               @keyup.enter="handleQuery"
+            />
+         </el-form-item>
+         <el-form-item label="任务组名" prop="jobGroup">
+            <el-select
+               v-model="queryParams.jobGroup"
+               placeholder="请选择任务组名"
+               clearable
+               style="width: 240px"
+            >
+               <el-option
+                  v-for="dict in sys_job_group"
+                  :key="dict.value"
+                  :label="dict.label"
+                  :value="dict.value"
+               />
+            </el-select>
+         </el-form-item>
+         <el-form-item label="执行状态" prop="status">
+            <el-select
+               v-model="queryParams.status"
+               placeholder="请选择执行状态"
+               clearable
+               style="width: 240px"
+            >
+               <el-option
+                  v-for="dict in sys_common_status"
+                  :key="dict.value"
+                  :label="dict.label"
+                  :value="dict.value"
+               />
+            </el-select>
+         </el-form-item>
+         <el-form-item label="执行时间" style="width: 308px">
+            <el-date-picker
+               v-model="dateRange"
+               value-format="YYYY-MM-DD"
+               type="daterange"
+               range-separator="-"
+               start-placeholder="开始日期"
+               end-placeholder="结束日期"
+            ></el-date-picker>
+         </el-form-item>
+         <el-form-item>
+            <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
+            <el-button icon="Refresh" @click="resetQuery">重置</el-button>
+         </el-form-item>
+      </el-form>
+
+      <el-row :gutter="10" class="mb8">
+         <el-col :span="1.5">
+            <el-button
+               type="danger"
+               plain
+               icon="Delete"
+               :disabled="multiple"
+               @click="handleDelete"
+               v-hasPermi="['monitor:job:remove']"
+            >删除</el-button>
+         </el-col>
+         <el-col :span="1.5">
+            <el-button
+               type="danger"
+               plain
+               icon="Delete"
+               @click="handleClean"
+               v-hasPermi="['monitor:job:remove']"
+            >清空</el-button>
+         </el-col>
+         <el-col :span="1.5">
+            <el-button
+               type="warning"
+               plain
+               icon="Download"
+               @click="handleExport"
+               v-hasPermi="['monitor:job:export']"
+            >导出</el-button>
+         </el-col>
+         <el-col :span="1.5">
+            <el-button 
+               type="warning" 
+               plain 
+               icon="Close"
+               @click="handleClose"
+            >关闭</el-button>
+         </el-col>
+         <right-toolbar v-model:showSearch="showSearch" @queryTable="getList"></right-toolbar>
+      </el-row>
+
+      <el-table v-loading="loading" :data="jobLogList" @selection-change="handleSelectionChange">
+         <el-table-column type="selection" width="55" align="center" />
+         <el-table-column label="日志编号" width="80" align="center" prop="jobLogId" />
+         <el-table-column label="任务名称" align="center" prop="jobName" :show-overflow-tooltip="true" />
+         <el-table-column label="任务组名" align="center" prop="jobGroup" :show-overflow-tooltip="true">
+            <template #default="scope">
+               <dict-tag :options="sys_job_group" :value="scope.row.jobGroup" />
+            </template>
+         </el-table-column>
+         <el-table-column label="调用目标字符串" align="center" prop="invokeTarget" :show-overflow-tooltip="true" />
+         <el-table-column label="日志信息" align="center" prop="jobMessage" :show-overflow-tooltip="true" />
+         <el-table-column label="执行状态" align="center" prop="status">
+            <template #default="scope">
+               <dict-tag :options="sys_common_status" :value="scope.row.status" />
+            </template>
+         </el-table-column>
+         <el-table-column label="执行时间" align="center" prop="createTime" width="180">
+            <template #default="scope">
+               <span>{{ parseTime(scope.row.createTime) }}</span>
+            </template>
+         </el-table-column>
+         <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
+            <template #default="scope">
+               <el-button link type="primary" icon="View" @click="handleView(scope.row)" v-hasPermi="['monitor:job:query']">详细</el-button>
+            </template>
+         </el-table-column>
+      </el-table>
+
+      <pagination
+         v-show="total > 0"
+         :total="total"
+         v-model:page="queryParams.pageNum"
+         v-model:limit="queryParams.pageSize"
+         @pagination="getList"
+      />
+
+      <!-- 调度日志详细 -->
+      <el-dialog title="调度日志详细" v-model="open" width="700px" append-to-body>
+         <el-form :model="form" label-width="100px">
+            <el-row>
+               <el-col :span="12">
+                  <el-form-item label="日志序号：">{{ form.jobLogId }}</el-form-item>
+                  <el-form-item label="任务名称：">{{ form.jobName }}</el-form-item>
+               </el-col>
+               <el-col :span="12">
+                  <el-form-item label="任务分组：">{{ form.jobGroup }}</el-form-item>
+                  <el-form-item label="执行时间：">{{ form.createTime }}</el-form-item>
+               </el-col>
+               <el-col :span="24">
+                  <el-form-item label="调用方法：">{{ form.invokeTarget }}</el-form-item>
+               </el-col>
+               <el-col :span="24">
+                  <el-form-item label="日志信息：">{{ form.jobMessage }}</el-form-item>
+               </el-col>
+               <el-col :span="24">
+                  <el-form-item label="执行状态：">
+                     <div v-if="form.status == 0">正常</div>
+                     <div v-else-if="form.status == 1">失败</div>
+                  </el-form-item>
+               </el-col>
+               <el-col :span="24">
+                  <el-form-item label="异常信息：" v-if="form.status == 1">{{ form.exceptionInfo }}</el-form-item>
+               </el-col>
+            </el-row>
+         </el-form>
+         <template #footer>
+            <div class="dialog-footer">
+               <el-button @click="open = false">关 闭</el-button>
+            </div>
+         </template>
+      </el-dialog>
+   </div>
+</template>
+
+<script setup name="JobLog">
+import { getJob } from "@/api/monitor/job"
+import { listJobLog, delJobLog, cleanJobLog } from "@/api/monitor/jobLog"
+
+const { proxy } = getCurrentInstance()
+const { sys_common_status, sys_job_group } = proxy.useDict("sys_common_status", "sys_job_group")
+
+const jobLogList = ref([])
+const open = ref(false)
+const loading = ref(true)
+const showSearch = ref(true)
+const ids = ref([])
+const multiple = ref(true)
+const total = ref(0)
+const dateRange = ref([])
+const route = useRoute()
+
+const data = reactive({
+  form: {},
+  queryParams: {
+    pageNum: 1,
+    pageSize: 10,
+    dictName: undefined,
+    dictType: undefined,
+    status: undefined
+  }
+})
+
+const { queryParams, form, rules } = toRefs(data)
+
+/** 查询调度日志列表 */
+function getList() {
+  loading.value = true
+  listJobLog(proxy.addDateRange(queryParams.value, dateRange.value)).then(response => {
+    jobLogList.value = response.rows
+    total.value = response.total
+    loading.value = false
+  })
+}
+
+// 返回按钮
+function handleClose() {
+  const obj = { path: "/monitor/job" }
+  proxy.$tab.closeOpenPage(obj)
+}
+
+/** 搜索按钮操作 */
+function handleQuery() {
+  queryParams.value.pageNum = 1
+  getList()
+}
+
+/** 重置按钮操作 */
+function resetQuery() {
+  dateRange.value = []
+  proxy.resetForm("queryRef")
+  handleQuery()
+}
+
+// 多选框选中数据
+function handleSelectionChange(selection) {
+  ids.value = selection.map(item => item.jobLogId)
+  multiple.value = !selection.length
+}
+
+/** 详细按钮操作 */
+function handleView(row) {
+  open.value = true
+  form.value = row
+}
+
+/** 删除按钮操作 */
+function handleDelete(row) {
+  proxy.$modal.confirm('是否确认删除数据项?').then(function () {
+    return delJobLog(ids.value)
+  }).then(() => {
+    getList()
+    proxy.$modal.msgSuccess("删除成功")
+  }).catch(() => {})
+}
+
+/** 清空按钮操作 */
+function handleClean() {
+  proxy.$modal.confirm("是否确认清空所有调度日志数据项?").then(function () {
+    return cleanJobLog()
+  }).then(() => {
+    getList()
+    proxy.$modal.msgSuccess("清空成功")
+  }).catch(() => {})
+}
+
+/** 导出按钮操作 */
+function handleExport() {
+  proxy.download("monitor/jobLog/export", {
+    ...queryParams.value,
+  }, `job_log_${new Date().getTime()}.xlsx`)
+}
+
+(() => {
+  const jobId = route.params && route.params.jobId
+  if (jobId !== undefined && jobId != 0) {
+    getJob(jobId).then(response => {
+      queryParams.value.jobName = response.data.jobName
+      queryParams.value.jobGroup = response.data.jobGroup
+      getList()
+    })
+  } else {
+    getList()
+  }
+})()
+</script>

src/views/monitor/logininfor/index.vue

@@ -0,0 +1,233 @@
+<template>
+   <div class="app-container">
+      <el-form :model="queryParams" ref="queryRef" :inline="true" v-show="showSearch" label-width="68px">
+         <el-form-item label="登录地址" prop="ipaddr">
+            <el-input
+               v-model="queryParams.ipaddr"
+               placeholder="请输入登录地址"
+               clearable
+               style="width: 240px;"
+               @keyup.enter="handleQuery"
+            />
+         </el-form-item>
+         <el-form-item label="用户名称" prop="userName">
+            <el-input
+               v-model="queryParams.userName"
+               placeholder="请输入用户名称"
+               clearable
+               style="width: 240px;"
+               @keyup.enter="handleQuery"
+            />
+         </el-form-item>
+         <el-form-item label="状态" prop="status">
+            <el-select
+               v-model="queryParams.status"
+               placeholder="登录状态"
+               clearable
+               style="width: 240px"
+            >
+               <el-option
+                  v-for="dict in sys_common_status"
+                  :key="dict.value"
+                  :label="dict.label"
+                  :value="dict.value"
+               />
+            </el-select>
+         </el-form-item>
+         <el-form-item label="登录时间" style="width: 308px">
+            <el-date-picker
+               v-model="dateRange"
+               value-format="YYYY-MM-DD HH:mm:ss"
+               type="daterange"
+               range-separator="-"
+               start-placeholder="开始日期"
+               end-placeholder="结束日期"
+               :default-time="[new Date(2000, 1, 1, 0, 0, 0), new Date(2000, 1, 1, 23, 59, 59)]"
+            ></el-date-picker>
+         </el-form-item>
+         <el-form-item>
+            <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
+            <el-button icon="Refresh" @click="resetQuery">重置</el-button>
+         </el-form-item>
+      </el-form>
+
+      <el-row :gutter="10" class="mb8">
+         <el-col :span="1.5">
+            <el-button
+               type="danger"
+               plain
+               icon="Delete"
+               :disabled="multiple"
+               @click="handleDelete"
+               v-hasPermi="['monitor:logininfor:remove']"
+            >删除</el-button>
+         </el-col>
+         <el-col :span="1.5">
+            <el-button
+               type="danger"
+               plain
+               icon="Delete"
+               @click="handleClean"
+               v-hasPermi="['monitor:logininfor:remove']"
+            >清空</el-button>
+         </el-col>
+         <el-col :span="1.5">
+            <el-button
+               type="primary"
+               plain
+               icon="Unlock"
+               :disabled="single"
+               @click="handleUnlock"
+               v-hasPermi="['monitor:logininfor:unlock']"
+            >解锁</el-button>
+         </el-col>
+         <el-col :span="1.5">
+            <el-button
+               type="warning"
+               plain
+               icon="Download"
+               @click="handleExport"
+               v-hasPermi="['monitor:logininfor:export']"
+            >导出</el-button>
+         </el-col>
+         <right-toolbar v-model:showSearch="showSearch" @queryTable="getList"></right-toolbar>
+      </el-row>
+
+      <el-table ref="logininforRef" v-loading="loading" :data="logininforList" @selection-change="handleSelectionChange" :default-sort="defaultSort" @sort-change="handleSortChange">
+         <el-table-column type="selection" width="55" align="center" />
+         <el-table-column label="访问编号" align="center" prop="infoId" />
+         <el-table-column label="用户名称" align="center" prop="userName" :show-overflow-tooltip="true" sortable="custom" :sort-orders="['descending', 'ascending']" />
+         <el-table-column label="地址" align="center" prop="ipaddr" :show-overflow-tooltip="true" />
+         <el-table-column label="登录地点" align="center" prop="loginLocation" :show-overflow-tooltip="true" />
+         <el-table-column label="操作系统" align="center" prop="os" :show-overflow-tooltip="true" />
+         <el-table-column label="浏览器" align="center" prop="browser" :show-overflow-tooltip="true" />
+         <el-table-column label="登录状态" align="center" prop="status">
+            <template #default="scope">
+               <dict-tag :options="sys_common_status" :value="scope.row.status" />
+            </template>
+         </el-table-column>
+         <el-table-column label="描述" align="center" prop="msg" :show-overflow-tooltip="true" />
+         <el-table-column label="访问时间" align="center" prop="loginTime" sortable="custom" :sort-orders="['descending', 'ascending']" width="180">
+            <template #default="scope">
+               <span>{{ parseTime(scope.row.loginTime) }}</span>
+            </template>
+         </el-table-column>
+      </el-table>
+
+      <pagination
+         v-show="total > 0"
+         :total="total"
+         v-model:page="queryParams.pageNum"
+         v-model:limit="queryParams.pageSize"
+         @pagination="getList"
+      />
+   </div>
+</template>
+
+<script setup name="Logininfor">
+import { list, delLogininfor, cleanLogininfor, unlockLogininfor } from "@/api/monitor/logininfor"
+
+const { proxy } = getCurrentInstance()
+const { sys_common_status } = proxy.useDict("sys_common_status")
+
+const logininforList = ref([])
+const loading = ref(true)
+const showSearch = ref(true)
+const ids = ref([])
+const single = ref(true)
+const multiple = ref(true)
+const selectName = ref("")
+const total = ref(0)
+const dateRange = ref([])
+const defaultSort = ref({ prop: "loginTime", order: "descending" })
+
+// 查询参数
+const queryParams = ref({
+  pageNum: 1,
+  pageSize: 10,
+  ipaddr: undefined,
+  userName: undefined,
+  status: undefined,
+  orderByColumn: undefined,
+  isAsc: undefined
+})
+
+/** 查询登录日志列表 */
+function getList() {
+  loading.value = true
+  list(proxy.addDateRange(queryParams.value, dateRange.value)).then(response => {
+    logininforList.value = response.rows
+    total.value = response.total
+    loading.value = false
+  })
+}
+
+/** 搜索按钮操作 */
+function handleQuery() {
+  queryParams.value.pageNum = 1
+  getList()
+}
+
+/** 重置按钮操作 */
+function resetQuery() {
+  dateRange.value = []
+  proxy.resetForm("queryRef")
+  queryParams.value.pageNum = 1
+  proxy.$refs["logininforRef"].sort(defaultSort.value.prop, defaultSort.value.order)
+}
+
+/** 多选框选中数据 */
+function handleSelectionChange(selection) {
+  ids.value = selection.map(item => item.infoId)
+  multiple.value = !selection.length
+  single.value = selection.length != 1
+  selectName.value = selection.map(item => item.userName)
+}
+
+/** 排序触发事件 */
+function handleSortChange(column, prop, order) {
+  queryParams.value.orderByColumn = column.prop
+  queryParams.value.isAsc = column.order
+  getList()
+}
+
+/** 删除按钮操作 */
+function handleDelete(row) {
+  const infoIds = row.infoId || ids.value
+  proxy.$modal.confirm('是否确认删除数据项?').then(function () {
+    return delLogininfor(infoIds)
+  }).then(() => {
+    getList()
+    proxy.$modal.msgSuccess("删除成功")
+  }).catch(() => {})
+}
+
+/** 清空按钮操作 */
+function handleClean() {
+  proxy.$modal.confirm("是否确认清空所有登录日志数据项?").then(function () {
+    return cleanLogininfor()
+  }).then(() => {
+    getList()
+    proxy.$modal.msgSuccess("清空成功")
+  }).catch(() => {})
+}
+
+/** 解锁按钮操作 */
+function handleUnlock() {
+  const username = selectName.value
+  proxy.$modal.confirm('是否确认解锁用户"' + username + '"数据项?').then(function () {
+    return unlockLogininfor(username)
+  }).then(() => {
+    proxy.$modal.msgSuccess("用户" + username + "解锁成功")
+  }).catch(() => {})
+}
+
+/** 导出按钮操作 */
+function handleExport() {
+  proxy.download("monitor/logininfor/export", {
+    ...queryParams.value,
+  }, `logininfor_${new Date().getTime()}.xlsx`)
+}
+
+getList()
+</script>

src/views/monitor/online/index.vue

@@ -0,0 +1,109 @@
+<template>
+   <div class="app-container">
+      <el-form :model="queryParams" ref="queryRef" :inline="true">
+         <el-form-item label="登录地址" prop="ipaddr">
+            <el-input
+               v-model="queryParams.ipaddr"
+               placeholder="请输入登录地址"
+               clearable
+               style="width: 200px"
+               @keyup.enter="handleQuery"
+            />
+         </el-form-item>
+         <el-form-item label="用户名称" prop="userName">
+            <el-input
+               v-model="queryParams.userName"
+               placeholder="请输入用户名称"
+               clearable
+               style="width: 200px"
+               @keyup.enter="handleQuery"
+            />
+         </el-form-item>
+         <el-form-item>
+            <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
+            <el-button icon="Refresh" @click="resetQuery">重置</el-button>
+         </el-form-item>
+      </el-form>
+      <el-table
+         v-loading="loading"
+         :data="onlineList.slice((pageNum - 1) * pageSize, pageNum * pageSize)"
+         style="width: 100%;"
+      >
+         <el-table-column label="序号" width="50" type="index" align="center">
+            <template #default="scope">
+               <span>{{ (pageNum - 1) * pageSize + scope.$index + 1 }}</span>
+            </template>
+         </el-table-column>
+         <el-table-column label="会话编号" align="center" prop="tokenId" :show-overflow-tooltip="true" />
+         <el-table-column label="登录名称" align="center" prop="userName" :show-overflow-tooltip="true" />
+         <el-table-column label="所属部门" align="center" prop="deptName" :show-overflow-tooltip="true" />
+         <el-table-column label="主机" align="center" prop="ipaddr" :show-overflow-tooltip="true" />
+         <el-table-column label="登录地点" align="center" prop="loginLocation" :show-overflow-tooltip="true" />
+         <el-table-column label="操作系统" align="center" prop="os" :show-overflow-tooltip="true" />
+         <el-table-column label="浏览器" align="center" prop="browser" :show-overflow-tooltip="true" />
+         <el-table-column label="登录时间" align="center" prop="loginTime" width="180">
+            <template #default="scope">
+               <span>{{ parseTime(scope.row.loginTime) }}</span>
+            </template>
+         </el-table-column>
+         <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
+            <template #default="scope">
+               <el-button link type="primary" icon="Delete" @click="handleForceLogout(scope.row)" v-hasPermi="['monitor:online:forceLogout']">强退</el-button>
+            </template>
+         </el-table-column>
+      </el-table>
+
+      <pagination v-show="total > 0" :total="total" v-model:page="pageNum" v-model:limit="pageSize" />
+   </div>
+</template>
+
+<script setup name="Online">
+import { forceLogout, list as initData } from "@/api/monitor/online"
+
+const { proxy } = getCurrentInstance()
+
+const onlineList = ref([])
+const loading = ref(true)
+const total = ref(0)
+const pageNum = ref(1)
+const pageSize = ref(10)
+
+const queryParams = ref({
+  ipaddr: undefined,
+  userName: undefined
+})
+
+/** 查询登录日志列表 */
+function getList() {
+  loading.value = true
+  initData(queryParams.value).then(response => {
+    onlineList.value = response.rows
+    total.value = response.total
+    loading.value = false
+  })
+}
+
+/** 搜索按钮操作 */
+function handleQuery() {
+  pageNum.value = 1
+  getList()
+}
+
+/** 重置按钮操作 */
+function resetQuery() {
+  proxy.resetForm("queryRef")
+  handleQuery()
+}
+
+/** 强退按钮操作 */
+function handleForceLogout(row) {
+    proxy.$modal.confirm('是否确认强退名称为"' + row.userName + '"的用户?').then(function () {
+  return forceLogout(row.tokenId)
+  }).then(() => {
+    getList()
+    proxy.$modal.msgSuccess("删除成功")
+  }).catch(() => {})
+}
+
+getList()
+</script>

src/views/monitor/operlog/index.vue

@@ -0,0 +1,310 @@
+<template>
+   <div class="app-container">
+      <el-form :model="queryParams" ref="queryRef" :inline="true" v-show="showSearch" label-width="68px">
+         <el-form-item label="操作地址" prop="operIp">
+            <el-input
+               v-model="queryParams.operIp"
+               placeholder="请输入操作地址"
+               clearable
+               style="width: 240px;"
+               @keyup.enter="handleQuery"
+            />
+         </el-form-item>
+         <el-form-item label="系统模块" prop="title">
+            <el-input
+               v-model="queryParams.title"
+               placeholder="请输入系统模块"
+               clearable
+               style="width: 240px;"
+               @keyup.enter="handleQuery"
+            />
+         </el-form-item>
+         <el-form-item label="操作人员" prop="operName">
+            <el-input
+               v-model="queryParams.operName"
+               placeholder="请输入操作人员"
+               clearable
+               style="width: 240px;"
+               @keyup.enter="handleQuery"
+            />
+         </el-form-item>
+         <el-form-item label="类型" prop="businessType">
+            <el-select
+               v-model="queryParams.businessType"
+               placeholder="操作类型"
+               clearable
+               style="width: 240px"
+            >
+               <el-option
+                  v-for="dict in sys_oper_type"
+                  :key="dict.value"
+                  :label="dict.label"
+                  :value="dict.value"
+               />
+            </el-select>
+         </el-form-item>
+         <el-form-item label="状态" prop="status">
+            <el-select
+               v-model="queryParams.status"
+               placeholder="操作状态"
+               clearable
+               style="width: 240px"
+            >
+               <el-option
+                  v-for="dict in sys_common_status"
+                  :key="dict.value"
+                  :label="dict.label"
+                  :value="dict.value"
+               />
+            </el-select>
+         </el-form-item>
+         <el-form-item label="操作时间" style="width: 308px">
+            <el-date-picker
+               v-model="dateRange"
+               value-format="YYYY-MM-DD HH:mm:ss"
+               type="daterange"
+               range-separator="-"
+               start-placeholder="开始日期"
+               end-placeholder="结束日期"
+               :default-time="[new Date(2000, 1, 1, 0, 0, 0), new Date(2000, 1, 1, 23, 59, 59)]"
+            ></el-date-picker>
+         </el-form-item>
+         <el-form-item>
+            <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
+            <el-button icon="Refresh" @click="resetQuery">重置</el-button>
+         </el-form-item>
+      </el-form>
+
+      <el-row :gutter="10" class="mb8">
+         <el-col :span="1.5">
+            <el-button
+               type="danger"
+               plain
+               icon="Delete"
+               :disabled="multiple"
+               @click="handleDelete"
+               v-hasPermi="['monitor:operlog:remove']"
+            >删除</el-button>
+         </el-col>
+         <el-col :span="1.5">
+            <el-button
+               type="danger"
+               plain
+               icon="Delete"
+               @click="handleClean"
+               v-hasPermi="['monitor:operlog:remove']"
+            >清空</el-button>
+         </el-col>
+         <el-col :span="1.5">
+            <el-button
+               type="warning"
+               plain
+               icon="Download"
+               @click="handleExport"
+               v-hasPermi="['monitor:operlog:export']"
+            >导出</el-button>
+         </el-col>
+         <right-toolbar v-model:showSearch="showSearch" @queryTable="getList"></right-toolbar>
+      </el-row>
+
+      <el-table ref="operlogRef" v-loading="loading" :data="operlogList" @selection-change="handleSelectionChange" :default-sort="defaultSort" @sort-change="handleSortChange">
+         <el-table-column type="selection" width="50" align="center" />
+         <el-table-column label="日志编号" align="center" prop="operId" />
+         <el-table-column label="系统模块" align="center" prop="title" :show-overflow-tooltip="true" />
+         <el-table-column label="操作类型" align="center" prop="businessType">
+            <template #default="scope">
+               <dict-tag :options="sys_oper_type" :value="scope.row.businessType" />
+            </template>
+         </el-table-column>
+         <el-table-column label="操作人员" align="center" width="110" prop="operName" :show-overflow-tooltip="true" sortable="custom" :sort-orders="['descending', 'ascending']" />
+         <el-table-column label="操作地址" align="center" prop="operIp" width="130" :show-overflow-tooltip="true" />
+         <el-table-column label="操作状态" align="center" prop="status">
+            <template #default="scope">
+               <dict-tag :options="sys_common_status" :value="scope.row.status" />
+            </template>
+         </el-table-column>
+         <el-table-column label="操作日期" align="center" prop="operTime" width="180" sortable="custom" :sort-orders="['descending', 'ascending']">
+            <template #default="scope">
+               <span>{{ parseTime(scope.row.operTime) }}</span>
+            </template>
+         </el-table-column>
+         <el-table-column label="消耗时间" align="center" prop="costTime" width="110" :show-overflow-tooltip="true" sortable="custom" :sort-orders="['descending', 'ascending']">
+            <template #default="scope">
+               <span>{{ scope.row.costTime }}毫秒</span>
+            </template>
+         </el-table-column>
+         <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
+            <template #default="scope">
+               <el-button link type="primary" icon="View" @click="handleView(scope.row, scope.index)" v-hasPermi="['monitor:operlog:query']">详细</el-button>
+            </template>
+         </el-table-column>
+      </el-table>
+
+      <pagination
+         v-show="total > 0"
+         :total="total"
+         v-model:page="queryParams.pageNum"
+         v-model:limit="queryParams.pageSize"
+         @pagination="getList"
+      />
+
+      <!-- 操作日志详细 -->
+      <el-dialog title="操作日志详细" v-model="open" width="800px" append-to-body>
+         <el-form :model="form" label-width="100px">
+            <el-row>
+               <el-col :span="12">
+                  <el-form-item label="操作模块：">{{ form.title }} / {{ typeFormat(form) }}</el-form-item>
+                  <el-form-item
+                    label="登录信息："
+                  >{{ form.operName }} / {{ form.operIp }} / {{ form.operLocation }}</el-form-item>
+               </el-col>
+               <el-col :span="12">
+                  <el-form-item label="请求地址：">{{ form.operUrl }}</el-form-item>
+                  <el-form-item label="请求方式：">{{ form.requestMethod }}</el-form-item>
+               </el-col>
+               <el-col :span="24">
+                  <el-form-item label="操作方法：">{{ form.method }}</el-form-item>
+               </el-col>
+               <el-col :span="24">
+                  <el-form-item label="请求参数：">{{ form.operParam }}</el-form-item>
+               </el-col>
+               <el-col :span="24">
+                  <el-form-item label="返回参数：">{{ form.jsonResult }}</el-form-item>
+               </el-col>
+               <el-col :span="8">
+                  <el-form-item label="操作状态：">
+                     <div v-if="form.status === 0">正常</div>
+                     <div v-else-if="form.status === 1">失败</div>
+                  </el-form-item>
+               </el-col>
+               <el-col :span="8">
+                  <el-form-item label="消耗时间：">{{ form.costTime }}毫秒</el-form-item>
+               </el-col>
+               <el-col :span="8">
+                  <el-form-item label="操作时间：">{{ parseTime(form.operTime) }}</el-form-item>
+               </el-col>
+               <el-col :span="24">
+                  <el-form-item label="异常信息：" v-if="form.status === 1">{{ form.errorMsg }}</el-form-item>
+               </el-col>
+            </el-row>
+         </el-form>
+         <template #footer>
+            <div class="dialog-footer">
+               <el-button @click="open = false">关 闭</el-button>
+            </div>
+         </template>
+      </el-dialog>
+   </div>
+</template>
+
+<script setup name="Operlog">
+import { list, delOperlog, cleanOperlog } from "@/api/monitor/operlog"
+
+const { proxy } = getCurrentInstance()
+const { sys_oper_type, sys_common_status } = proxy.useDict("sys_oper_type", "sys_common_status")
+
+const operlogList = ref([])
+const open = ref(false)
+const loading = ref(true)
+const showSearch = ref(true)
+const ids = ref([])
+const single = ref(true)
+const multiple = ref(true)
+const total = ref(0)
+const title = ref("")
+const dateRange = ref([])
+const defaultSort = ref({ prop: "operTime", order: "descending" })
+
+const data = reactive({
+  form: {},
+  queryParams: {
+    pageNum: 1,
+    pageSize: 10,
+    operIp: undefined,
+    title: undefined,
+    operName: undefined,
+    businessType: undefined,
+    status: undefined
+  }
+})
+
+const { queryParams, form } = toRefs(data)
+
+/** 查询登录日志 */
+function getList() {
+  loading.value = true
+  list(proxy.addDateRange(queryParams.value, dateRange.value)).then(response => {
+    operlogList.value = response.rows
+    total.value = response.total
+    loading.value = false
+  })
+}
+
+/** 操作日志类型字典翻译 */
+function typeFormat(row, column) {
+  return proxy.selectDictLabel(sys_oper_type.value, row.businessType)
+}
+
+/** 搜索按钮操作 */
+function handleQuery() {
+  queryParams.value.pageNum = 1
+  getList()
+}
+
+/** 重置按钮操作 */
+function resetQuery() {
+  dateRange.value = []
+  proxy.resetForm("queryRef")
+  queryParams.value.pageNum = 1
+  proxy.$refs["operlogRef"].sort(defaultSort.value.prop, defaultSort.value.order)
+}
+
+/** 多选框选中数据 */
+function handleSelectionChange(selection) {
+  ids.value = selection.map(item => item.operId)
+  multiple.value = !selection.length
+}
+
+/** 排序触发事件 */
+function handleSortChange(column, prop, order) {
+  queryParams.value.orderByColumn = column.prop
+  queryParams.value.isAsc = column.order
+  getList()
+}
+
+/** 详细按钮操作 */
+function handleView(row) {
+  open.value = true
+  form.value = row
+}
+
+/** 删除按钮操作 */
+function handleDelete(row) {
+  const operIds = row.operId || ids.value
+  proxy.$modal.confirm('是否确认删除日志编号为"' + operIds + '"的数据项?').then(function () {
+    return delOperlog(operIds)
+  }).then(() => {
+    getList()
+    proxy.$modal.msgSuccess("删除成功")
+  }).catch(() => {})
+}
+
+/** 清空按钮操作 */
+function handleClean() {
+  proxy.$modal.confirm("是否确认清空所有操作日志数据项?").then(function () {
+    return cleanOperlog()
+  }).then(() => {
+    getList()
+    proxy.$modal.msgSuccess("清空成功")
+  }).catch(() => {})
+}
+
+/** 导出按钮操作 */
+function handleExport() {
+  proxy.download("monitor/operlog/export",{
+    ...queryParams.value,
+  }, `config_${new Date().getTime()}.xlsx`)
+}
+
+getList()
+</script>

src/views/monitor/server/index.vue

@@ -0,0 +1,187 @@
+<template>
+  <div class="app-container">
+    <el-row :gutter="10">
+      <el-col :span="12" class="card-box">
+        <el-card>
+          <template #header><Cpu style="width: 1em; height: 1em; vertical-align: middle;" /> <span style="vertical-align: middle;">CPU</span></template>
+          <div class="el-table el-table--enable-row-hover el-table--medium">
+            <table cellspacing="0" style="width: 100%;">
+              <thead>
+                <tr>
+                  <th class="el-table__cell is-leaf"><div class="cell">属性</div></th>
+                  <th class="el-table__cell is-leaf"><div class="cell">值</div></th>
+                </tr>
+              </thead>
+              <tbody>
+                <tr>
+                  <td class="el-table__cell is-leaf"><div class="cell">核心数</div></td>
+                  <td class="el-table__cell is-leaf"><div class="cell" v-if="server.cpu">{{ server.cpu.cpuNum }}</div></td>
+                </tr>
+                <tr>
+                  <td class="el-table__cell is-leaf"><div class="cell">用户使用率</div></td>
+                  <td class="el-table__cell is-leaf"><div class="cell" v-if="server.cpu">{{ server.cpu.used }}%</div></td>
+                </tr>
+                <tr>
+                  <td class="el-table__cell is-leaf"><div class="cell">系统使用率</div></td>
+                  <td class="el-table__cell is-leaf"><div class="cell" v-if="server.cpu">{{ server.cpu.sys }}%</div></td>
+                </tr>
+                <tr>
+                  <td class="el-table__cell is-leaf"><div class="cell">当前空闲率</div></td>
+                  <td class="el-table__cell is-leaf"><div class="cell" v-if="server.cpu">{{ server.cpu.free }}%</div></td>
+                </tr>
+              </tbody>
+            </table>
+          </div>
+        </el-card>
+      </el-col>
+
+      <el-col :span="12" class="card-box">
+        <el-card>
+          <template #header><Tickets style="width: 1em; height: 1em; vertical-align: middle;" /> <span style="vertical-align: middle;">内存</span></template>
+          <div class="el-table el-table--enable-row-hover el-table--medium">
+            <table cellspacing="0" style="width: 100%;">
+              <thead>
+                <tr>
+                  <th class="el-table__cell is-leaf"><div class="cell">属性</div></th>
+                  <th class="el-table__cell is-leaf"><div class="cell">内存</div></th>
+                  <th class="el-table__cell is-leaf"><div class="cell">JVM</div></th>
+                </tr>
+              </thead>
+              <tbody>
+                <tr>
+                  <td class="el-table__cell is-leaf"><div class="cell">总内存</div></td>
+                  <td class="el-table__cell is-leaf"><div class="cell" v-if="server.mem">{{ server.mem.total }}G</div></td>
+                  <td class="el-table__cell is-leaf"><div class="cell" v-if="server.jvm">{{ server.jvm.total }}M</div></td>
+                </tr>
+                <tr>
+                  <td class="el-table__cell is-leaf"><div class="cell">已用内存</div></td>
+                  <td class="el-table__cell is-leaf"><div class="cell" v-if="server.mem">{{ server.mem.used}}G</div></td>
+                  <td class="el-table__cell is-leaf"><div class="cell" v-if="server.jvm">{{ server.jvm.used}}M</div></td>
+                </tr>
+                <tr>
+                  <td class="el-table__cell is-leaf"><div class="cell">剩余内存</div></td>
+                  <td class="el-table__cell is-leaf"><div class="cell" v-if="server.mem">{{ server.mem.free }}G</div></td>
+                  <td class="el-table__cell is-leaf"><div class="cell" v-if="server.jvm">{{ server.jvm.free }}M</div></td>
+                </tr>
+                <tr>
+                  <td class="el-table__cell is-leaf"><div class="cell">使用率</div></td>
+                  <td class="el-table__cell is-leaf"><div class="cell" v-if="server.mem" :class="{'text-danger': server.mem.usage > 80}">{{ server.mem.usage }}%</div></td>
+                  <td class="el-table__cell is-leaf"><div class="cell" v-if="server.jvm" :class="{'text-danger': server.jvm.usage > 80}">{{ server.jvm.usage }}%</div></td>
+                </tr>
+              </tbody>
+            </table>
+          </div>
+        </el-card>
+      </el-col>
+
+      <el-col :span="24" class="card-box">
+        <el-card>
+          <template #header><Monitor style="width: 1em; height: 1em; vertical-align: middle;" /> <span style="vertical-align: middle;">服务器信息</span></template>
+          <div class="el-table el-table--enable-row-hover el-table--medium">
+            <table cellspacing="0" style="width: 100%;">
+              <tbody>
+                <tr>
+                  <td class="el-table__cell is-leaf"><div class="cell">服务器名称</div></td>
+                  <td class="el-table__cell is-leaf"><div class="cell" v-if="server.sys">{{ server.sys.computerName }}</div></td>
+                  <td class="el-table__cell is-leaf"><div class="cell">操作系统</div></td>
+                  <td class="el-table__cell is-leaf"><div class="cell" v-if="server.sys">{{ server.sys.osName }}</div></td>
+                </tr>
+                <tr>
+                  <td class="el-table__cell is-leaf"><div class="cell">服务器IP</div></td>
+                  <td class="el-table__cell is-leaf"><div class="cell" v-if="server.sys">{{ server.sys.computerIp }}</div></td>
+                  <td class="el-table__cell is-leaf"><div class="cell">系统架构</div></td>
+                  <td class="el-table__cell is-leaf"><div class="cell" v-if="server.sys">{{ server.sys.osArch }}</div></td>
+                </tr>
+              </tbody>
+            </table>
+          </div>
+        </el-card>
+      </el-col>
+
+      <el-col :span="24" class="card-box">
+        <el-card>
+          <template #header><CoffeeCup style="width: 1em; height: 1em; vertical-align: middle;" /> <span style="vertical-align: middle;">Java虚拟机信息</span></template>
+          <div class="el-table el-table--enable-row-hover el-table--medium">
+            <table cellspacing="0" style="width: 100%;table-layout:fixed;">
+              <tbody>
+                <tr>
+                  <td class="el-table__cell is-leaf"><div class="cell">Java名称</div></td>
+                  <td class="el-table__cell is-leaf"><div class="cell" v-if="server.jvm">{{ server.jvm.name }}</div></td>
+                  <td class="el-table__cell is-leaf"><div class="cell">Java版本</div></td>
+                  <td class="el-table__cell is-leaf"><div class="cell" v-if="server.jvm">{{ server.jvm.version }}</div></td>
+                </tr>
+                <tr>
+                  <td class="el-table__cell is-leaf"><div class="cell">启动时间</div></td>
+                  <td class="el-table__cell is-leaf"><div class="cell" v-if="server.jvm">{{ server.jvm.startTime }}</div></td>
+                  <td class="el-table__cell is-leaf"><div class="cell">运行时长</div></td>
+                  <td class="el-table__cell is-leaf"><div class="cell" v-if="server.jvm">{{ server.jvm.runTime }}</div></td>
+                </tr>
+                <tr>
+                  <td colspan="1" class="el-table__cell is-leaf"><div class="cell">安装路径</div></td>
+                  <td colspan="3" class="el-table__cell is-leaf"><div class="cell" v-if="server.jvm">{{ server.jvm.home }}</div></td>
+                </tr>
+                <tr>
+                  <td colspan="1" class="el-table__cell is-leaf"><div class="cell">项目路径</div></td>
+                  <td colspan="3" class="el-table__cell is-leaf"><div class="cell" v-if="server.sys">{{ server.sys.userDir }}</div></td>
+                </tr>
+                <tr>
+                  <td colspan="1" class="el-table__cell is-leaf"><div class="cell">运行参数</div></td>
+                  <td colspan="3" class="el-table__cell is-leaf"><div class="cell" v-if="server.jvm">{{ server.jvm.inputArgs }}</div></td>
+                </tr>
+              </tbody>
+            </table>
+          </div>
+        </el-card>
+      </el-col>
+
+      <el-col :span="24" class="card-box">
+        <el-card>
+          <template #header><MessageBox style="width: 1em; height: 1em; vertical-align: middle;" /> <span style="vertical-align: middle;">磁盘状态</span></template>
+          <div class="el-table el-table--enable-row-hover el-table--medium">
+            <table cellspacing="0" style="width: 100%;">
+              <thead>
+                <tr>
+                  <th class="el-table__cell el-table__cell is-leaf"><div class="cell">盘符路径</div></th>
+                  <th class="el-table__cell is-leaf"><div class="cell">文件系统</div></th>
+                  <th class="el-table__cell is-leaf"><div class="cell">盘符类型</div></th>
+                  <th class="el-table__cell is-leaf"><div class="cell">总大小</div></th>
+                  <th class="el-table__cell is-leaf"><div class="cell">可用大小</div></th>
+                  <th class="el-table__cell is-leaf"><div class="cell">已用大小</div></th>
+                  <th class="el-table__cell is-leaf"><div class="cell">已用百分比</div></th>
+                </tr>
+              </thead>
+              <tbody v-if="server.sysFiles">
+                <tr v-for="(sysFile, index) in server.sysFiles" :key="index">
+                  <td class="el-table__cell is-leaf"><div class="cell">{{ sysFile.dirName }}</div></td>
+                  <td class="el-table__cell is-leaf"><div class="cell">{{ sysFile.sysTypeName }}</div></td>
+                  <td class="el-table__cell is-leaf"><div class="cell">{{ sysFile.typeName }}</div></td>
+                  <td class="el-table__cell is-leaf"><div class="cell">{{ sysFile.total }}</div></td>
+                  <td class="el-table__cell is-leaf"><div class="cell">{{ sysFile.free }}</div></td>
+                  <td class="el-table__cell is-leaf"><div class="cell">{{ sysFile.used }}</div></td>
+                  <td class="el-table__cell is-leaf"><div class="cell" :class="{'text-danger': sysFile.usage > 80}">{{ sysFile.usage }}%</div></td>
+                </tr>
+              </tbody>
+            </table>
+          </div>
+        </el-card>
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script setup>
+import { getServer } from '@/api/monitor/server'
+
+const server = ref([])
+const { proxy } = getCurrentInstance()
+
+function getList() {
+  proxy.$modal.loading("正在加载服务监控数据，请稍候！")
+  getServer().then(response => {
+    server.value = response.data
+    proxy.$modal.closeLoading()
+  })
+}
+
+getList()
+</script>

src/views/redirect/index.vue

@@ -0,0 +1,14 @@
+<template>
+  <div></div>
+</template>
+
+<script setup>
+import { useRoute, useRouter } from 'vue-router'
+
+const route = useRoute()
+const router = useRouter()
+const { params, query } = route
+const { path } = params
+
+router.replace({ path: '/' + path, query })
+</script>

src/views/register.vue

@@ -0,0 +1,220 @@
+<template>
+  <div class="register">
+    <el-form ref="registerRef" :model="registerForm" :rules="registerRules" class="register-form">
+      <h3 class="title">{{ title }}</h3>
+      <el-form-item prop="username">
+        <el-input 
+          v-model="registerForm.username" 
+          type="text" 
+          size="large" 
+          auto-complete="off" 
+          placeholder="账号"
+        >
+          <template #prefix><svg-icon icon-class="user" class="el-input__icon input-icon" /></template>
+        </el-input>
+      </el-form-item>
+      <el-form-item prop="password">
+        <el-input
+          v-model="registerForm.password"
+          type="password"
+          size="large" 
+          auto-complete="off"
+          placeholder="密码"
+          @keyup.enter="handleRegister"
+        >
+          <template #prefix><svg-icon icon-class="password" class="el-input__icon input-icon" /></template>
+        </el-input>
+      </el-form-item>
+      <el-form-item prop="confirmPassword">
+        <el-input
+          v-model="registerForm.confirmPassword"
+          type="password"
+          size="large" 
+          auto-complete="off"
+          placeholder="确认密码"
+          @keyup.enter="handleRegister"
+        >
+          <template #prefix><svg-icon icon-class="password" class="el-input__icon input-icon" /></template>
+        </el-input>
+      </el-form-item>
+      <el-form-item prop="code" v-if="captchaEnabled">
+        <el-input
+          size="large" 
+          v-model="registerForm.code"
+          auto-complete="off"
+          placeholder="验证码"
+          style="width: 63%"
+          @keyup.enter="handleRegister"
+        >
+          <template #prefix><svg-icon icon-class="validCode" class="el-input__icon input-icon" /></template>
+        </el-input>
+        <div class="register-code">
+          <img :src="codeUrl" @click="getCode" class="register-code-img"/>
+        </div>
+      </el-form-item>
+      <el-form-item style="width:100%;">
+        <el-button
+          :loading="loading"
+          size="large" 
+          type="primary"
+          style="width:100%;"
+          @click.prevent="handleRegister"
+        >
+          <span v-if="!loading">注 册</span>
+          <span v-else>注 册 中...</span>
+        </el-button>
+        <div style="float: right;">
+          <router-link class="link-type" :to="'/login'">使用已有账户登录</router-link>
+        </div>
+      </el-form-item>
+    </el-form>
+    <!--  底部  -->
+    <div class="el-register-footer">
+      <span></span>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ElMessageBox } from "element-plus"
+import { getCodeImg, register } from "@/api/login"
+
+const title = import.meta.env.VITE_APP_TITLE
+const router = useRouter()
+const { proxy } = getCurrentInstance()
+
+const registerForm = ref({
+  username: "",
+  password: "",
+  confirmPassword: "",
+  code: "",
+  uuid: ""
+})
+
+const equalToPassword = (rule, value, callback) => {
+  if (registerForm.value.password !== value) {
+    callback(new Error("两次输入的密码不一致"))
+  } else {
+    callback()
+  }
+}
+
+const registerRules = {
+  username: [
+    { required: true, trigger: "blur", message: "请输入您的账号" },
+    { min: 2, max: 20, message: "用户账号长度必须介于 2 和 20 之间", trigger: "blur" }
+  ],
+  password: [
+    { required: true, trigger: "blur", message: "请输入您的密码" },
+    { min: 5, max: 20, message: "用户密码长度必须介于 5 和 20 之间", trigger: "blur" },
+    { pattern: /^[^<>"'|\\]+$/, message: "不能包含非法字符：< > \" ' \\\ |", trigger: "blur" }
+  ],
+  confirmPassword: [
+    { required: true, trigger: "blur", message: "请再次输入您的密码" },
+    { required: true, validator: equalToPassword, trigger: "blur" }
+  ],
+  code: [{ required: true, trigger: "change", message: "请输入验证码" }]
+}
+
+const codeUrl = ref("")
+const loading = ref(false)
+const captchaEnabled = ref(true)
+
+function handleRegister() {
+  proxy.$refs.registerRef.validate(valid => {
+    if (valid) {
+      loading.value = true
+      register(registerForm.value).then(res => {
+        const username = registerForm.value.username
+        ElMessageBox.alert("<font color='red'>恭喜你，您的账号 " + username + " 注册成功！</font>", "系统提示", {
+          dangerouslyUseHTMLString: true,
+          type: "success",
+        }).then(() => {
+          router.push("/login")
+        }).catch(() => {})
+      }).catch(() => {
+        loading.value = false
+        if (captchaEnabled) {
+          getCode()
+        }
+      })
+    }
+  })
+}
+
+function getCode() {
+  getCodeImg().then(res => {
+    captchaEnabled.value = res.captchaEnabled === undefined ? true : res.captchaEnabled
+    if (captchaEnabled.value) {
+      codeUrl.value = "data:image/gif;base64," + res.img
+      registerForm.value.uuid = res.uuid
+    }
+  })
+}
+
+getCode()
+</script>
+
+<style lang='scss' scoped>
+.register {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 100%;
+  background-image: url("../assets/images/login-background.jpg");
+  background-size: cover;
+}
+.title {
+  margin: 0px auto 30px auto;
+  text-align: center;
+  color: #707070;
+}
+
+.register-form {
+  border-radius: 6px;
+  background: #ffffff;
+  width: 400px;
+  padding: 25px 25px 5px 25px;
+  .el-input {
+    height: 40px;
+    input {
+      height: 40px;
+    }
+  }
+  .input-icon {
+    height: 39px;
+    width: 14px;
+    margin-left: 0px;
+  }
+}
+.register-tip {
+  font-size: 13px;
+  text-align: center;
+  color: #bfbfbf;
+}
+.register-code {
+  width: 33%;
+  height: 40px;
+  float: right;
+  img {
+    cursor: pointer;
+    vertical-align: middle;
+  }
+}
+.el-register-footer {
+  height: 40px;
+  line-height: 40px;
+  position: fixed;
+  bottom: 0;
+  width: 100%;
+  text-align: center;
+  color: #fff;
+  font-family: Arial;
+  font-size: 12px;
+  letter-spacing: 1px;
+}
+.register-code-img {
+  height: 40px;
+  padding-left: 12px;
+}
+</style>

src/views/system/category/index.vue

@@ -0,0 +1,272 @@
+<template>
+  <div class="app-container">
+    <el-form :model="queryParams" ref="queryRef" :inline="true" v-show="showSearch" label-width="68px">
+      <el-form-item label="分类名称" prop="name">
+        <el-input
+          v-model="queryParams.name"
+          placeholder="请输入分类名称"
+          clearable
+          @keyup.enter="handleQuery"
+        />
+      </el-form-item>
+      <el-form-item label="编码" prop="code">
+        <el-input
+          v-model="queryParams.code"
+          placeholder="请输入编码"
+          clearable
+          @keyup.enter="handleQuery"
+        />
+      </el-form-item>
+      <el-form-item>
+        <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
+        <el-button icon="Refresh" @click="resetQuery">重置</el-button>
+      </el-form-item>
+    </el-form>
+
+    <el-row :gutter="10" class="mb8">
+      <el-col :span="1.5">
+        <el-button
+          type="primary"
+          plain
+          icon="Plus"
+          @click="handleAdd"
+          v-hasPermi="['system:category:add']"
+        >新增</el-button>
+      </el-col>
+      <el-col :span="1.5">
+        <el-button
+          type="info"
+          plain
+          icon="Sort"
+          @click="toggleExpandAll"
+        >展开/折叠</el-button>
+      </el-col>
+      <right-toolbar v-model:showSearch="showSearch" @queryTable="getList"></right-toolbar>
+    </el-row>
+
+    <el-table
+      v-if="refreshTable"
+      v-loading="loading"
+      :data="categoryList"
+      row-key="id"
+      :default-expand-all="isExpandAll"
+      :tree-props="{children: 'children', hasChildren: 'hasChildren'}"
+    >
+      <el-table-column label="编码" align="center" prop="code" />
+      <el-table-column label="分类名称" align="center" prop="name" />
+      <!-- <el-table-column label="层级" align="center" prop="level" /> -->
+      <el-table-column label="显示顺序" align="center" prop="orderNum" />
+      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
+        <template #default="scope">
+          <el-button link type="primary" icon="Edit" @click="handleUpdate(scope.row)" v-hasPermi="['system:category:edit']">修改</el-button>
+          <el-button link type="primary" icon="Plus" @click="handleAdd(scope.row)" v-hasPermi="['system:category:add']">新增</el-button>
+          <el-button link type="primary" icon="Delete" @click="handleDelete(scope.row)" v-hasPermi="['system:category:remove']">删除</el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+
+    <!-- 添加或修改查获物品分类对话框 -->
+    <el-dialog :title="title" v-model="open" width="500px" append-to-body>
+      <el-form ref="categoryRef" :model="form" :rules="rules" label-width="80px">
+        <el-form-item label="分类编码" prop="code" v-if="form.id">
+          <el-input v-model="form.code" disabled  />
+        </el-form-item>
+        <el-form-item label="分类名称" prop="name">
+          <el-input v-model="form.name" placeholder="请输入分类名称" />
+        </el-form-item>
+        <el-form-item label="上级类型" prop="parentId">
+          <el-tree-select
+            v-model="form.parentId"
+            :data="categoryOptions"
+            :props="{ value: 'id', label: 'name', children: 'children' }"
+            value-key="id"
+            placeholder="请选择上级类型"
+            check-strictly
+          />
+        </el-form-item>
+        <!-- <el-form-item label="层级" prop="level">
+          <el-input v-model="form.level" placeholder="请输入层级" />
+        </el-form-item> -->
+        <el-form-item label="显示顺序" prop="orderNum">
+          <el-input v-model="form.orderNum" placeholder="请输入显示顺序" />
+        </el-form-item>
+      </el-form>
+      <template #footer>
+        <div class="dialog-footer">
+          <el-button type="primary" @click="submitForm">确 定</el-button>
+          <el-button @click="cancel">取 消</el-button>
+        </div>
+      </template>
+    </el-dialog>
+  </div>
+</template>
+
+<script setup name="Category">
+import { listCategory, getCategory, delCategory, addCategory, updateCategory } from "@/api/system/category"
+
+const { proxy } = getCurrentInstance()
+
+const categoryList = ref([])
+const categoryOptions = ref([])
+const open = ref(false)
+const loading = ref(true)
+const showSearch = ref(true)
+const title = ref("")
+const isExpandAll = ref(true)
+const refreshTable = ref(true)
+
+const data = reactive({
+  form: {},
+  queryParams: {
+    name: null,
+    parentId: null,
+    level: null,
+    orderNum: null,
+    code: null
+  },
+  rules: {
+    name: [
+      { required: true, message: "分类名称不能为空", trigger: "blur" }
+    ],
+    parentId: [
+      { required: true, message: "上级类型不能为空", trigger: "blur" }
+    ],
+    level: [
+      { required: true, message: "层级不能为空", trigger: "blur" }
+    ],
+    orderNum: [
+      { required: true, message: "显示顺序不能为空", trigger: "blur" }
+    ],
+    code: [
+      { required: true, message: "编码不能为空", trigger: "blur" }
+    ]
+  }
+})
+
+const { queryParams, form, rules } = toRefs(data)
+
+/** 查询查获物品分类列表 */
+function getList() {
+  loading.value = true
+  listCategory(queryParams.value).then(response => {
+    categoryList.value = proxy.handleTree(response.data, "id", "parentId")
+    loading.value = false
+  })
+}
+
+/** 查询查获物品分类下拉树结构 */
+function getTreeselect() {
+  listCategory().then(response => {
+    categoryOptions.value = []
+    const data = { id: 0, name: '顶级节点', children: [] }
+    data.children = proxy.handleTree(response.data, "id", "parentId")
+    categoryOptions.value.push(data)
+  })
+}
+	
+// 取消按钮
+function cancel() {
+  open.value = false
+  reset()
+}
+
+// 表单重置
+function reset() {
+  form.value = {
+    tenantId: null,
+    revision: null,
+    createBy: null,
+    createTime: null,
+    updateBy: null,
+    updateTime: null,
+    name: null,
+    id: null,
+    parentId: null,
+    ancestors: null,
+    level: null,
+    orderNum: null,
+    code: null
+  }
+  proxy.resetForm("categoryRef")
+}
+
+/** 搜索按钮操作 */
+function handleQuery() {
+  getList()
+}
+
+/** 重置按钮操作 */
+function resetQuery() {
+  proxy.resetForm("queryRef")
+  handleQuery()
+}
+
+/** 新增按钮操作 */
+function handleAdd(row) {
+  reset()
+  getTreeselect()
+  if (row != null && row.id) {
+    form.value.parentId = row.id
+  } else {
+    form.value.parentId = 0
+  }
+  open.value = true
+  title.value = "添加查获物品分类"
+}
+
+/** 展开/折叠操作 */
+function toggleExpandAll() {
+  refreshTable.value = false
+  isExpandAll.value = !isExpandAll.value
+  nextTick(() => {
+    refreshTable.value = true
+  })
+}
+
+/** 修改按钮操作 */
+async function handleUpdate(row) {
+  reset()
+  await getTreeselect()
+  if (row != null) {
+    form.value.parentId = row.parentId
+  }
+  getCategory(row.id).then(response => {
+    form.value = response.data
+    open.value = true
+    title.value = "修改查获物品分类"
+  })
+}
+
+/** 提交按钮 */
+function submitForm() {
+  proxy.$refs["categoryRef"].validate(valid => {
+    if (valid) {
+      if (form.value.id != null) {
+        updateCategory(form.value).then(response => {
+          proxy.$modal.msgSuccess("修改成功")
+          open.value = false
+          getList()
+        })
+      } else {
+        addCategory(form.value).then(response => {
+          proxy.$modal.msgSuccess("新增成功")
+          open.value = false
+          getList()
+        })
+      }
+    }
+  })
+}
+
+/** 删除按钮操作 */
+function handleDelete(row) {
+  proxy.$modal.confirm('是否确认删除数据项？').then(function() {
+    return delCategory(row.id)
+  }).then(() => {
+    getList()
+    proxy.$modal.msgSuccess("删除成功")
+  }).catch(() => {})
+}
+
+getList()
+</script>

src/views/system/checkCategory/index.vue

@@ -0,0 +1,276 @@
+<template>
+  <div class="app-container">
+    <el-form :model="queryParams" ref="queryRef" :inline="true" v-show="showSearch" label-width="68px">
+      <el-form-item label="编码" prop="code">
+        <el-input
+          v-model="queryParams.code"
+          placeholder="请输入编码"
+          clearable
+          @keyup.enter="handleQuery"
+        />
+      </el-form-item>
+      <el-form-item label="分类名称" prop="name">
+        <el-input
+          v-model="queryParams.name"
+          placeholder="请输入分类名称"
+          clearable
+          @keyup.enter="handleQuery"
+        />
+      </el-form-item>
+      <el-form-item>
+        <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
+        <el-button icon="Refresh" @click="resetQuery">重置</el-button>
+      </el-form-item>
+    </el-form>
+
+    <el-row :gutter="10" class="mb8">
+      <el-col :span="1.5">
+        <el-button
+          type="primary"
+          plain
+          icon="Plus"
+          @click="handleAdd"
+          v-hasPermi="['system:checkCategory:add']"
+        >新增</el-button>
+      </el-col>
+      <el-col :span="1.5">
+        <el-button
+          type="info"
+          plain
+          icon="Sort"
+          @click="toggleExpandAll"
+        >展开/折叠</el-button>
+      </el-col>
+      <right-toolbar v-model:showSearch="showSearch" @queryTable="getList"></right-toolbar>
+    </el-row>
+
+    <el-table
+      v-if="refreshTable"
+      v-loading="loading"
+      :data="checkCategoryList"
+      row-key="id"
+      :default-expand-all="isExpandAll"
+      :tree-props="{children: 'children', hasChildren: 'hasChildren'}"
+    >
+      <el-table-column label="编码" align="center" prop="code" />
+      <el-table-column label="分类名称" align="center" prop="name" />
+      <el-table-column label="显示顺序" align="center" prop="orderNum" />
+      <el-table-column label="备注" align="center" prop="remark" />
+      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
+        <template #default="scope">
+          <el-button link type="primary" icon="Edit" @click="handleUpdate(scope.row)" v-hasPermi="['system:checkCategory:edit']">修改</el-button>
+          <el-button link type="primary" icon="Plus" @click="handleAdd(scope.row)" v-hasPermi="['system:checkCategory:add']">新增</el-button>
+          <el-button link type="primary" icon="Delete" @click="handleDelete(scope.row)" v-hasPermi="['system:checkCategory:remove']">删除</el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+
+    <!-- 添加或修改检查项分类对话框 -->
+    <el-dialog :title="title" v-model="open" width="500px" append-to-body>
+      <el-form ref="checkCategoryRef" :model="form" :rules="rules" label-width="80px">
+        <el-form-item label="编码" prop="code" v-if="form.id">
+          <el-input v-model="form.code" placeholder="请输入编码" disabled/>
+        </el-form-item>
+        <el-form-item label="分类名称" prop="name">
+          <el-input v-model="form.name" placeholder="请输入分类名称" />
+        </el-form-item>
+        <el-form-item label="上级分类" prop="parentId">
+          <el-tree-select
+            v-model="form.parentId"
+            :data="checkCategoryOptions"
+            :props="{ value: 'id', label: 'name', children: 'children' }"
+            value-key="id"
+            placeholder="请选择上级分类"
+            check-strictly
+          />
+        </el-form-item>
+        <el-form-item label="显示顺序" prop="orderNum">
+          <el-input v-model="form.orderNum" placeholder="请输入显示顺序" />
+        </el-form-item>
+
+        <el-form-item label="备注" prop="remark">
+          <el-input v-model="form.remark" type="textarea" placeholder="请输入内容" />
+        </el-form-item>
+      </el-form>
+      <template #footer>
+        <div class="dialog-footer">
+          <el-button type="primary" @click="submitForm">确 定</el-button>
+          <el-button @click="cancel">取 消</el-button>
+        </div>
+      </template>
+    </el-dialog>
+  </div>
+</template>
+
+<script setup name="CheckCategory">
+import { listCheckCategory, getCheckCategory, delCheckCategory, addCheckCategory, updateCheckCategory } from "@/api/system/checkCategory"
+
+const { proxy } = getCurrentInstance()
+
+const checkCategoryList = ref([])
+const checkCategoryOptions = ref([])
+const open = ref(false)
+const loading = ref(true)
+const showSearch = ref(true)
+const title = ref("")
+const isExpandAll = ref(true)
+const refreshTable = ref(true)
+
+const data = reactive({
+  form: {},
+  queryParams: {
+    name: null,
+    parentId: null,
+    orderNum: null,
+    code: null,
+  },
+  rules: {
+    name: [
+      { required: true, message: "分类名称不能为空", trigger: "blur" }
+    ],
+    parentId: [
+      { required: true, message: "上级分类不能为空", trigger: "blur" }
+    ],
+    ancestors: [
+      { required: true, message: "祖级列表不能为空", trigger: "blur" }
+    ],
+    level: [
+      { required: true, message: "层级不能为空", trigger: "blur" }
+    ],
+    orderNum: [
+      { required: true, message: "显示顺序不能为空", trigger: "blur" }
+    ],
+    code: [
+      { required: true, message: "编码不能为空", trigger: "blur" }
+    ],
+  }
+})
+
+const { queryParams, form, rules } = toRefs(data)
+
+/** 查询检查项分类列表 */
+function getList() {
+  loading.value = true
+  listCheckCategory(queryParams.value).then(response => {
+    checkCategoryList.value = proxy.handleTree(response.data, "id", "parentId")
+    loading.value = false
+  })
+}
+
+/** 查询检查项分类下拉树结构 */
+function getTreeselect() {
+  listCheckCategory().then(response => {
+    checkCategoryOptions.value = []
+    const data = { id: 0, name: '顶级节点', children: [] }
+    data.children = proxy.handleTree(response.data, "id", "parentId")
+    checkCategoryOptions.value.push(data)
+  })
+}
+	
+// 取消按钮
+function cancel() {
+  open.value = false
+  reset()
+}
+
+// 表单重置
+function reset() {
+  form.value = {
+    tenantId: null,
+    revision: null,
+    createBy: null,
+    createTime: null,
+    updateBy: null,
+    updateTime: null,
+    id: null,
+    name: null,
+    parentId: null,
+    ancestors: null,
+    level: null,
+    orderNum: null,
+    code: null,
+    remark: null
+  }
+  proxy.resetForm("checkCategoryRef")
+}
+
+/** 搜索按钮操作 */
+function handleQuery() {
+  getList()
+}
+
+/** 重置按钮操作 */
+function resetQuery() {
+  proxy.resetForm("queryRef")
+  handleQuery()
+}
+
+/** 新增按钮操作 */
+function handleAdd(row) {
+  reset()
+  getTreeselect()
+  if (row != null && row.id) {
+    form.value.parentId = row.id
+  } else {
+    form.value.parentId = 0
+  }
+  open.value = true
+  title.value = "添加检查项分类"
+}
+
+/** 展开/折叠操作 */
+function toggleExpandAll() {
+  refreshTable.value = false
+  isExpandAll.value = !isExpandAll.value
+  nextTick(() => {
+    refreshTable.value = true
+  })
+}
+
+/** 修改按钮操作 */
+async function handleUpdate(row) {
+  reset()
+  await getTreeselect()
+  if (row != null) {
+    form.value.parentId = row.parentId
+  }
+  getCheckCategory(row.id).then(response => {
+    form.value = response.data
+    open.value = true
+    title.value = "修改检查项分类"
+  })
+}
+
+/** 提交按钮 */
+function submitForm() {
+  proxy.$refs["checkCategoryRef"].validate(valid => {
+    if (valid) {
+      if (form.value.id != null) {
+        updateCheckCategory(form.value).then(response => {
+          proxy.$modal.msgSuccess("修改成功")
+          open.value = false
+          getList()
+        })
+      } else {
+        addCheckCategory(form.value).then(response => {
+          proxy.$modal.msgSuccess("新增成功")
+          open.value = false
+          getList()
+        })
+      }
+    }
+  })
+}
+
+/** 删除按钮操作 */
+function handleDelete(row) {
+  proxy.$modal.confirm('是否确认删除数据项？').then(function() {
+    return delCheckCategory(row.id)
+  }).then(() => {
+    getList()
+    proxy.$modal.msgSuccess("删除成功")
+  }).catch(() => {})
+}
+
+getList()
+</script>

src/views/system/config/index.vue

@@ -0,0 +1,316 @@
+<template>
+   <div class="app-container">
+      <el-form :model="queryParams" ref="queryRef" :inline="true" v-show="showSearch" label-width="68px">
+         <el-form-item label="参数名称" prop="configName">
+            <el-input
+               v-model="queryParams.configName"
+               placeholder="请输入参数名称"
+               clearable
+               style="width: 240px"
+               @keyup.enter="handleQuery"
+            />
+         </el-form-item>
+         <el-form-item label="参数键名" prop="configKey">
+            <el-input
+               v-model="queryParams.configKey"
+               placeholder="请输入参数键名"
+               clearable
+               style="width: 240px"
+               @keyup.enter="handleQuery"
+            />
+         </el-form-item>
+         <el-form-item label="系统内置" prop="configType">
+            <el-select v-model="queryParams.configType" placeholder="系统内置" clearable style="width: 240px">
+               <el-option
+                  v-for="dict in sys_yes_no"
+                  :key="dict.value"
+                  :label="dict.label"
+                  :value="dict.value"
+               />
+            </el-select>
+         </el-form-item>
+         <el-form-item label="创建时间" style="width: 308px;">
+            <el-date-picker
+               v-model="dateRange"
+               value-format="YYYY-MM-DD"
+               type="daterange"
+               range-separator="-"
+               start-placeholder="开始日期"
+               end-placeholder="结束日期"
+            ></el-date-picker>
+         </el-form-item>
+         <el-form-item>
+            <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
+            <el-button icon="Refresh" @click="resetQuery">重置</el-button>
+         </el-form-item>
+      </el-form>
+
+      <el-row :gutter="10" class="mb8">
+         <el-col :span="1.5">
+            <el-button
+               type="primary"
+               plain
+               icon="Plus"
+               @click="handleAdd"
+               v-hasPermi="['system:config:add']"
+            >新增</el-button>
+         </el-col>
+         <el-col :span="1.5">
+            <el-button
+               type="success"
+               plain
+               icon="Edit"
+               :disabled="single"
+               @click="handleUpdate"
+               v-hasPermi="['system:config:edit']"
+            >修改</el-button>
+         </el-col>
+         <el-col :span="1.5">
+            <el-button
+               type="danger"
+               plain
+               icon="Delete"
+               :disabled="multiple"
+               @click="handleDelete"
+               v-hasPermi="['system:config:remove']"
+            >删除</el-button>
+         </el-col>
+         <el-col :span="1.5">
+            <el-button
+               type="warning"
+               plain
+               icon="Download"
+               @click="handleExport"
+               v-hasPermi="['system:config:export']"
+            >导出</el-button>
+         </el-col>
+         <el-col :span="1.5">
+            <el-button
+               type="danger"
+               plain
+               icon="Refresh"
+               @click="handleRefreshCache"
+               v-hasPermi="['system:config:remove']"
+            >刷新缓存</el-button>
+         </el-col>
+         <right-toolbar v-model:showSearch="showSearch" @queryTable="getList"></right-toolbar>
+      </el-row>
+
+      <el-table v-loading="loading" :data="configList" @selection-change="handleSelectionChange">
+         <el-table-column type="selection" width="55" align="center" />
+         <el-table-column label="参数主键" align="center" prop="configId" />
+         <el-table-column label="参数名称" align="center" prop="configName" :show-overflow-tooltip="true" />
+         <el-table-column label="参数键名" align="center" prop="configKey" :show-overflow-tooltip="true" />
+         <el-table-column label="参数键值" align="center" prop="configValue" :show-overflow-tooltip="true" />
+         <el-table-column label="系统内置" align="center" prop="configType">
+            <template #default="scope">
+               <dict-tag :options="sys_yes_no" :value="scope.row.configType" />
+            </template>
+         </el-table-column>
+         <el-table-column label="备注" align="center" prop="remark" :show-overflow-tooltip="true" />
+         <el-table-column label="创建时间" align="center" prop="createTime" width="180">
+            <template #default="scope">
+               <span>{{ parseTime(scope.row.createTime) }}</span>
+            </template>
+         </el-table-column>
+         <el-table-column label="操作" align="center" width="150" class-name="small-padding fixed-width">
+            <template #default="scope">
+               <el-button link type="primary" icon="Edit" @click="handleUpdate(scope.row)" v-hasPermi="['system:config:edit']" >修改</el-button>
+               <el-button link type="primary" icon="Delete" @click="handleDelete(scope.row)" v-hasPermi="['system:config:remove']">删除</el-button>
+            </template>
+         </el-table-column>
+      </el-table>
+
+      <pagination
+         v-show="total > 0"
+         :total="total"
+         v-model:page="queryParams.pageNum"
+         v-model:limit="queryParams.pageSize"
+         @pagination="getList"
+      />
+
+      <!-- 添加或修改参数配置对话框 -->
+      <el-dialog :title="title" v-model="open" width="500px" append-to-body>
+         <el-form ref="configRef" :model="form" :rules="rules" label-width="80px">
+            <el-form-item label="参数名称" prop="configName">
+               <el-input v-model="form.configName" placeholder="请输入参数名称" />
+            </el-form-item>
+            <el-form-item label="参数键名" prop="configKey">
+               <el-input v-model="form.configKey" placeholder="请输入参数键名" />
+            </el-form-item>
+            <el-form-item label="参数键值" prop="configValue">
+               <el-input v-model="form.configValue" type="textarea" placeholder="请输入参数键值" />
+            </el-form-item>
+            <el-form-item label="系统内置" prop="configType">
+               <el-radio-group v-model="form.configType">
+                  <el-radio
+                     v-for="dict in sys_yes_no"
+                     :key="dict.value"
+                     :value="dict.value"
+                  >{{ dict.label }}</el-radio>
+               </el-radio-group>
+            </el-form-item>
+            <el-form-item label="备注" prop="remark">
+               <el-input v-model="form.remark" type="textarea" placeholder="请输入内容" />
+            </el-form-item>
+         </el-form>
+         <template #footer>
+            <div class="dialog-footer">
+               <el-button type="primary" @click="submitForm">确 定</el-button>
+               <el-button @click="cancel">取 消</el-button>
+            </div>
+         </template>
+      </el-dialog>
+   </div>
+</template>
+
+<script setup name="Config">
+import { listConfig, getConfig, delConfig, addConfig, updateConfig, refreshCache } from "@/api/system/config"
+
+const { proxy } = getCurrentInstance()
+const { sys_yes_no } = proxy.useDict("sys_yes_no")
+
+const configList = ref([])
+const open = ref(false)
+const loading = ref(true)
+const showSearch = ref(true)
+const ids = ref([])
+const single = ref(true)
+const multiple = ref(true)
+const total = ref(0)
+const title = ref("")
+const dateRange = ref([])
+
+const data = reactive({
+  form: {},
+  queryParams: {
+    pageNum: 1,
+    pageSize: 10,
+    configName: undefined,
+    configKey: undefined,
+    configType: undefined
+  },
+  rules: {
+    configName: [{ required: true, message: "参数名称不能为空", trigger: "blur" }],
+    configKey: [{ required: true, message: "参数键名不能为空", trigger: "blur" }],
+    configValue: [{ required: true, message: "参数键值不能为空", trigger: "blur" }]
+  }
+})
+
+const { queryParams, form, rules } = toRefs(data)
+
+/** 查询参数列表 */
+function getList() {
+  loading.value = true
+  listConfig(proxy.addDateRange(queryParams.value, dateRange.value)).then(response => {
+    configList.value = response.rows
+    total.value = response.total
+    loading.value = false
+  })
+}
+
+/** 取消按钮 */
+function cancel() {
+  open.value = false
+  reset()
+}
+
+/** 表单重置 */
+function reset() {
+  form.value = {
+    configId: undefined,
+    configName: undefined,
+    configKey: undefined,
+    configValue: undefined,
+    configType: "Y",
+    remark: undefined
+  }
+  proxy.resetForm("configRef")
+}
+
+/** 搜索按钮操作 */
+function handleQuery() {
+  queryParams.value.pageNum = 1
+  getList()
+}
+
+/** 重置按钮操作 */
+function resetQuery() {
+  dateRange.value = []
+  proxy.resetForm("queryRef")
+  handleQuery()
+}
+
+/** 多选框选中数据 */
+function handleSelectionChange(selection) {
+  ids.value = selection.map(item => item.configId)
+  single.value = selection.length != 1
+  multiple.value = !selection.length
+}
+
+/** 新增按钮操作 */
+function handleAdd() {
+  reset()
+  open.value = true
+  title.value = "添加参数"
+}
+
+/** 修改按钮操作 */
+function handleUpdate(row) {
+  reset()
+  const configId = row.configId || ids.value
+  getConfig(configId).then(response => {
+    form.value = response.data
+    open.value = true
+    title.value = "修改参数"
+  })
+}
+
+/** 提交按钮 */
+function submitForm() {
+  proxy.$refs["configRef"].validate(valid => {
+    if (valid) {
+      if (form.value.configId != undefined) {
+        updateConfig(form.value).then(response => {
+          proxy.$modal.msgSuccess("修改成功")
+          open.value = false
+          getList()
+        })
+      } else {
+        addConfig(form.value).then(response => {
+          proxy.$modal.msgSuccess("新增成功")
+          open.value = false
+          getList()
+        })
+      }
+    }
+  })
+}
+
+/** 删除按钮操作 */
+function handleDelete(row) {
+  const configIds = row.configId || ids.value
+  proxy.$modal.confirm('是否确认删除参数编号为"' + configIds + '"的数据项？').then(function () {
+    return delConfig(configIds)
+  }).then(() => {
+    getList()
+    proxy.$modal.msgSuccess("删除成功")
+  }).catch(() => {})
+}
+
+/** 导出按钮操作 */
+function handleExport() {
+  proxy.download("system/config/export", {
+    ...queryParams.value
+  }, `config_${new Date().getTime()}.xlsx`)
+}
+
+/** 刷新缓存按钮操作 */
+function handleRefreshCache() {
+  refreshCache().then(() => {
+    proxy.$modal.msgSuccess("刷新缓存成功")
+  })
+}
+
+getList()
+</script>

src/views/system/dept/index.vue

@@ -0,0 +1,314 @@
+<template>
+   <div class="app-container">
+      <el-form :model="queryParams" ref="queryRef" :inline="true" v-show="showSearch">
+         <el-form-item label="部门名称" prop="deptName">
+            <el-input
+               v-model="queryParams.deptName"
+               placeholder="请输入部门名称"
+               clearable
+               style="width: 200px"
+               @keyup.enter="handleQuery"
+            />
+         </el-form-item>
+         <el-form-item label="部门类型" prop="deptType">
+            <el-select v-model="queryParams.deptType" placeholder="请选择部门类型" clearable style="width: 200px">
+               <el-option
+                  v-for="dict in base_dept_type"
+                  :key="dict.value"
+                  :label="dict.label"
+                  :value="dict.value"
+               />
+            </el-select>
+         </el-form-item>
+         <el-form-item label="状态" prop="status">
+            <el-select v-model="queryParams.status" placeholder="部门状态" clearable style="width: 200px">
+               <el-option
+                  v-for="dict in sys_normal_disable"
+                  :key="dict.value"
+                  :label="dict.label"
+                  :value="dict.value"
+               />
+            </el-select>
+         </el-form-item>
+         <el-form-item>
+            <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
+            <el-button icon="Refresh" @click="resetQuery">重置</el-button>
+         </el-form-item>
+      </el-form>
+
+      <el-row :gutter="10" class="mb8">
+         <el-col :span="1.5">
+            <el-button
+               type="primary"
+               plain
+               icon="Plus"
+               @click="handleAdd"
+               v-hasPermi="['system:dept:add']"
+            >新增</el-button>
+         </el-col>
+         <el-col :span="1.5">
+            <el-button
+               type="info"
+               plain
+               icon="Sort"
+               @click="toggleExpandAll"
+            >展开/折叠</el-button>
+         </el-col>
+         <right-toolbar v-model:showSearch="showSearch" @queryTable="getList"></right-toolbar>
+      </el-row>
+
+      <el-table
+         v-if="refreshTable"
+         v-loading="loading"
+         :data="deptList"
+         row-key="deptId"
+         :default-expand-all="isExpandAll"
+         :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
+      >
+         <el-table-column prop="deptName" label="部门名称" width="260"></el-table-column>
+         <el-table-column prop="orderNum" label="排序" width="200"></el-table-column>
+         <el-table-column prop="status" label="状态" width="100">
+            <template #default="scope">
+               <dict-tag :options="sys_normal_disable" :value="scope.row.status" />
+            </template>
+         </el-table-column>
+         <el-table-column prop="status" label="部门类型" width="200">
+            <template #default="scope">
+               <dict-tag :options="base_dept_type" :value="scope.row.deptType" />
+            </template>
+         </el-table-column>
+         <el-table-column label="创建时间" align="center" prop="createTime" width="200">
+            <template #default="scope">
+               <span>{{ parseTime(scope.row.createTime) }}</span>
+            </template>
+         </el-table-column>
+         <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
+            <template #default="scope">
+               <el-button link type="primary" icon="Edit" @click="handleUpdate(scope.row)" v-hasPermi="['system:dept:edit']">修改</el-button>
+               <el-button link type="primary" icon="Plus" @click="handleAdd(scope.row)" v-hasPermi="['system:dept:add']">新增</el-button>
+               <el-button v-if="scope.row.parentId != 0" link type="primary" icon="Delete" @click="handleDelete(scope.row)" v-hasPermi="['system:dept:remove']">删除</el-button>
+            </template>
+         </el-table-column>
+      </el-table>
+
+      <!-- 添加或修改部门对话框 -->
+      <el-dialog :title="title" v-model="open" width="600px" append-to-body>
+         <el-form ref="deptRef" :model="form" :rules="rules" label-width="80px">
+            <el-row>
+               <el-col :span="24" v-if="form.parentId !== 0">
+                  <el-form-item label="上级部门" prop="parentId">
+                     <el-tree-select
+                        v-model="form.parentId"
+                        :data="deptOptions"
+                        :props="{ value: 'deptId', label: 'deptName', children: 'children' }"
+                        value-key="deptId"
+                        placeholder="选择上级部门"
+                        check-strictly
+                     />
+                  </el-form-item>
+               </el-col>
+               <el-col :span="12">
+                  <el-form-item label="部门名称" prop="deptName">
+                     <el-input v-model="form.deptName" placeholder="请输入部门名称" />
+                  </el-form-item>
+               </el-col>
+               <el-col :span="12"> 
+                  <el-form-item label="部门类型" prop="deptType">
+                     <el-select v-model="form.deptType" placeholder="请选择部门类型">
+                        <el-option
+                        v-for="dict in base_dept_type"
+                        :key="dict.value"
+                        :label="dict.label"
+                        :value="dict.value"
+                        ></el-option>
+                     </el-select>
+                  </el-form-item>
+               </el-col>
+               <el-col :span="12">
+                  <el-form-item label="显示排序" prop="orderNum">
+                     <el-input-number v-model="form.orderNum" controls-position="right" :min="0" />
+                  </el-form-item>
+               </el-col>
+               <el-col :span="12">
+                  <el-form-item label="负责人" prop="leader">
+                     <el-input v-model="form.leader" placeholder="请输入负责人" maxlength="20" />
+                  </el-form-item>
+               </el-col>
+               <el-col :span="12">
+                  <el-form-item label="联系电话" prop="phone">
+                     <el-input v-model="form.phone" placeholder="请输入联系电话" maxlength="11" />
+                  </el-form-item>
+               </el-col>
+               <el-col :span="12">
+                  <el-form-item label="邮箱" prop="email">
+                     <el-input v-model="form.email" placeholder="请输入邮箱" maxlength="50" />
+                  </el-form-item>
+               </el-col>
+               <el-col :span="12">
+                  <el-form-item label="部门状态">
+                     <el-radio-group v-model="form.status">
+                        <el-radio
+                           v-for="dict in sys_normal_disable"
+                           :key="dict.value"
+                           :value="dict.value"
+                        >{{ dict.label }}</el-radio>
+                     </el-radio-group>
+                  </el-form-item>
+               </el-col>
+            </el-row>
+         </el-form>
+         <template #footer>
+            <div class="dialog-footer">
+               <el-button type="primary" @click="submitForm">确 定</el-button>
+               <el-button @click="cancel">取 消</el-button>
+            </div>
+         </template>
+      </el-dialog>
+   </div>
+</template>
+
+<script setup name="Dept">
+import { listDept, getDept, delDept, addDept, updateDept, listDeptExcludeChild } from "@/api/system/dept"
+
+const { proxy } = getCurrentInstance()
+const { sys_normal_disable } = proxy.useDict("sys_normal_disable")
+const { base_dept_type } = proxy.useDict('base_dept_type')
+const deptList = ref([])
+const open = ref(false)
+const loading = ref(true)
+const showSearch = ref(true)
+const title = ref("")
+const deptOptions = ref([])
+const isExpandAll = ref(true)
+const refreshTable = ref(true)
+
+const data = reactive({
+  form: {},
+  queryParams: {
+    deptName: undefined,
+    status: undefined
+  },
+  rules: {
+    parentId: [{ required: true, message: "上级部门不能为空", trigger: "blur" }],
+    deptName: [{ required: true, message: "部门名称不能为空", trigger: "blur" }],
+    orderNum: [{ required: true, message: "显示排序不能为空", trigger: "blur" }],
+    email: [{ type: "email", message: "请输入正确的邮箱地址", trigger: ["blur", "change"] }],
+    deptType: [{ required: true, message: "请选择部门类型", trigger: ["blur", "change"] }],
+    phone: [{ pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/, message: "请输入正确的手机号码", trigger: "blur" }]
+  },
+})
+
+const { queryParams, form, rules } = toRefs(data)
+
+/** 查询部门列表 */
+function getList() {
+  loading.value = true
+  listDept(queryParams.value).then(response => {
+    deptList.value = proxy.handleTree(response.data, "deptId")
+    loading.value = false
+  })
+}
+
+/** 取消按钮 */
+function cancel() {
+  open.value = false
+  reset()
+}
+
+/** 表单重置 */
+function reset() {
+  form.value = {
+    deptId: undefined,
+    parentId: undefined,
+    deptName: undefined,
+    deptType: undefined,
+    orderNum: 0,
+    leader: undefined,
+    phone: undefined,
+    email: undefined,
+    status: "0"
+  }
+  proxy.resetForm("deptRef")
+}
+
+/** 搜索按钮操作 */
+function handleQuery() {
+  getList()
+}
+
+/** 重置按钮操作 */
+function resetQuery() {
+  proxy.resetForm("queryRef")
+  handleQuery()
+}
+
+/** 新增按钮操作 */
+function handleAdd(row) {
+  reset()
+  listDept().then(response => {
+    const data = { deptId: 0, deptName: '顶级节点', children: [] }
+    data.children = proxy.handleTree(response.data, "deptId")
+    deptOptions.value.push(data)
+  })
+  if (row != undefined) {
+    form.value.parentId = row.deptId
+  }
+  open.value = true
+  title.value = "添加部门"
+}
+
+/** 展开/折叠操作 */
+function toggleExpandAll() {
+  refreshTable.value = false
+  isExpandAll.value = !isExpandAll.value
+  nextTick(() => {
+    refreshTable.value = true
+  })
+}
+
+/** 修改按钮操作 */
+function handleUpdate(row) {
+  reset()
+  listDeptExcludeChild(row.deptId).then(response => {
+    deptOptions.value = proxy.handleTree(response.data, "deptId")
+  })
+  getDept(row.deptId).then(response => {
+    form.value = response.data
+    open.value = true
+    title.value = "修改部门"
+  })
+}
+
+/** 提交按钮 */
+function submitForm() {
+  proxy.$refs["deptRef"].validate(valid => {
+    if (valid) {
+      if (form.value.deptId != undefined) {
+        updateDept(form.value).then(response => {
+          proxy.$modal.msgSuccess("修改成功")
+          open.value = false
+          getList()
+        })
+      } else {
+        addDept(form.value).then(response => {
+          proxy.$modal.msgSuccess("新增成功")
+          open.value = false
+          getList()
+        })
+      }
+    }
+  })
+}
+
+/** 删除按钮操作 */
+function handleDelete(row) {
+  proxy.$modal.confirm('是否确认删除名称为"' + row.deptName + '"的数据项?').then(function() {
+    return delDept(row.deptId)
+  }).then(() => {
+    getList()
+    proxy.$modal.msgSuccess("删除成功")
+  }).catch(() => {})
+}
+
+getList()
+</script>

src/views/system/dict/data.vue

@@ -0,0 +1,362 @@
+<template>
+   <div class="app-container">
+      <el-form :model="queryParams" ref="queryRef" :inline="true" v-show="showSearch">
+         <el-form-item label="字典名称" prop="dictType">
+            <el-select v-model="queryParams.dictType" style="width: 200px">
+               <el-option
+                  v-for="item in typeOptions"
+                  :key="item.dictId"
+                  :label="item.dictName"
+                  :value="item.dictType"
+               />
+            </el-select>
+         </el-form-item>
+         <el-form-item label="字典标签" prop="dictLabel">
+            <el-input
+               v-model="queryParams.dictLabel"
+               placeholder="请输入字典标签"
+               clearable
+               style="width: 200px"
+               @keyup.enter="handleQuery"
+            />
+         </el-form-item>
+         <el-form-item label="状态" prop="status">
+            <el-select v-model="queryParams.status" placeholder="数据状态" clearable style="width: 200px">
+               <el-option
+                  v-for="dict in sys_normal_disable"
+                  :key="dict.value"
+                  :label="dict.label"
+                  :value="dict.value"
+               />
+            </el-select>
+         </el-form-item>
+         <el-form-item>
+            <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
+            <el-button icon="Refresh" @click="resetQuery">重置</el-button>
+         </el-form-item>
+      </el-form>
+
+      <el-row :gutter="10" class="mb8">
+         <el-col :span="1.5">
+            <el-button
+               type="primary"
+               plain
+               icon="Plus"
+               @click="handleAdd"
+               v-hasPermi="['system:dict:add']"
+            >新增</el-button>
+         </el-col>
+         <el-col :span="1.5">
+            <el-button
+               type="success"
+               plain
+               icon="Edit"
+               :disabled="single"
+               @click="handleUpdate"
+               v-hasPermi="['system:dict:edit']"
+            >修改</el-button>
+         </el-col>
+         <el-col :span="1.5">
+            <el-button
+               type="danger"
+               plain
+               icon="Delete"
+               :disabled="multiple"
+               @click="handleDelete"
+               v-hasPermi="['system:dict:remove']"
+            >删除</el-button>
+         </el-col>
+         <el-col :span="1.5">
+            <el-button
+               type="warning"
+               plain
+               icon="Download"
+               @click="handleExport"
+               v-hasPermi="['system:dict:export']"
+            >导出</el-button>
+         </el-col>
+         <el-col :span="1.5">
+            <el-button
+               type="warning"
+               plain
+               icon="Close"
+               @click="handleClose"
+            >关闭</el-button>
+         </el-col>
+         <right-toolbar v-model:showSearch="showSearch" @queryTable="getList"></right-toolbar>
+      </el-row>
+
+      <el-table v-loading="loading" :data="dataList" @selection-change="handleSelectionChange">
+         <el-table-column type="selection" width="55" align="center" />
+         <el-table-column label="字典编码" align="center" prop="dictCode" />
+         <el-table-column label="字典标签" align="center" prop="dictLabel">
+            <template #default="scope">
+               <span v-if="(scope.row.listClass == '' || scope.row.listClass == 'default') && (scope.row.cssClass == '' || scope.row.cssClass == null)">{{ scope.row.dictLabel }}</span>
+               <el-tag v-else :type="scope.row.listClass == 'primary' ? '' : scope.row.listClass" :class="scope.row.cssClass">{{ scope.row.dictLabel }}</el-tag>
+            </template>
+         </el-table-column>
+         <el-table-column label="字典键值" align="center" prop="dictValue" />
+         <el-table-column label="字典排序" align="center" prop="dictSort" />
+         <el-table-column label="状态" align="center" prop="status">
+            <template #default="scope">
+               <dict-tag :options="sys_normal_disable" :value="scope.row.status" />
+            </template>
+         </el-table-column>
+         <el-table-column label="备注" align="center" prop="remark" :show-overflow-tooltip="true" />
+         <el-table-column label="创建时间" align="center" prop="createTime" width="180">
+            <template #default="scope">
+               <span>{{ parseTime(scope.row.createTime) }}</span>
+            </template>
+         </el-table-column>
+         <el-table-column label="操作" align="center" width="160" class-name="small-padding fixed-width">
+            <template #default="scope">
+               <el-button link type="primary" icon="Edit" @click="handleUpdate(scope.row)" v-hasPermi="['system:dict:edit']">修改</el-button>
+               <el-button link type="primary" icon="Delete" @click="handleDelete(scope.row)" v-hasPermi="['system:dict:remove']">删除</el-button>
+            </template>
+         </el-table-column>
+      </el-table>
+
+      <pagination
+         v-show="total > 0"
+         :total="total"
+         v-model:page="queryParams.pageNum"
+         v-model:limit="queryParams.pageSize"
+         @pagination="getList"
+      />
+
+      <!-- 添加或修改参数配置对话框 -->
+      <el-dialog :title="title" v-model="open" width="500px" append-to-body>
+         <el-form ref="dataRef" :model="form" :rules="rules" label-width="80px">
+            <el-form-item label="字典类型">
+               <el-input v-model="form.dictType" :disabled="true" />
+            </el-form-item>
+            <el-form-item label="数据标签" prop="dictLabel">
+               <el-input v-model="form.dictLabel" placeholder="请输入数据标签" />
+            </el-form-item>
+            <el-form-item label="数据键值" prop="dictValue">
+               <el-input v-model="form.dictValue" placeholder="请输入数据键值" />
+            </el-form-item>
+            <el-form-item label="样式属性" prop="cssClass">
+               <el-input v-model="form.cssClass" placeholder="请输入样式属性" />
+            </el-form-item>
+            <el-form-item label="显示排序" prop="dictSort">
+               <el-input-number v-model="form.dictSort" controls-position="right" :min="0" />
+            </el-form-item>
+            <el-form-item label="回显样式" prop="listClass">
+               <el-select v-model="form.listClass">
+                  <el-option
+                     v-for="item in listClassOptions"
+                     :key="item.value"
+                     :label="item.label + '(' + item.value + ')'"
+                     :value="item.value"
+                  ></el-option>
+               </el-select>
+            </el-form-item>
+            <el-form-item label="状态" prop="status">
+               <el-radio-group v-model="form.status">
+                  <el-radio
+                     v-for="dict in sys_normal_disable"
+                     :key="dict.value"
+                     :value="dict.value"
+                  >{{ dict.label }}</el-radio>
+               </el-radio-group>
+            </el-form-item>
+            <el-form-item label="备注" prop="remark">
+               <el-input v-model="form.remark" type="textarea" placeholder="请输入内容"></el-input>
+            </el-form-item>
+         </el-form>
+         <template #footer>
+            <div class="dialog-footer">
+               <el-button type="primary" @click="submitForm">确 定</el-button>
+               <el-button @click="cancel">取 消</el-button>
+            </div>
+         </template>
+      </el-dialog>
+   </div>
+</template>
+
+<script setup name="Data">
+import useDictStore from '@/store/modules/dict'
+import { optionselect as getDictOptionselect, getType } from "@/api/system/dict/type"
+import { listData, getData, delData, addData, updateData } from "@/api/system/dict/data"
+
+const { proxy } = getCurrentInstance()
+const { sys_normal_disable } = proxy.useDict("sys_normal_disable")
+
+const dataList = ref([])
+const open = ref(false)
+const loading = ref(true)
+const showSearch = ref(true)
+const ids = ref([])
+const single = ref(true)
+const multiple = ref(true)
+const total = ref(0)
+const title = ref("")
+const defaultDictType = ref("")
+const typeOptions = ref([])
+const route = useRoute()
+// 数据标签回显样式
+const listClassOptions = ref([
+  { value: "default", label: "默认" }, 
+  { value: "primary", label: "主要" }, 
+  { value: "success", label: "成功" },
+  { value: "info", label: "信息" },
+  { value: "warning", label: "警告" },
+  { value: "danger", label: "危险" }
+])
+
+const data = reactive({
+  form: {},
+  queryParams: {
+    pageNum: 1,
+    pageSize: 10,
+    dictType: undefined,
+    dictLabel: undefined,
+    status: undefined
+  },
+  rules: {
+    dictLabel: [{ required: true, message: "数据标签不能为空", trigger: "blur" }],
+    dictValue: [{ required: true, message: "数据键值不能为空", trigger: "blur" }],
+    dictSort: [{ required: true, message: "数据顺序不能为空", trigger: "blur" }]
+  }
+})
+
+const { queryParams, form, rules } = toRefs(data)
+
+/** 查询字典类型详细 */
+function getTypes(dictId) {
+  getType(dictId).then(response => {
+    queryParams.value.dictType = response.data.dictType
+    defaultDictType.value = response.data.dictType
+    getList()
+  })
+}
+
+/** 查询字典类型列表 */
+function getTypeList() {
+  getDictOptionselect().then(response => {
+    typeOptions.value = response.data
+  })
+}
+
+/** 查询字典数据列表 */
+function getList() {
+  loading.value = true
+  listData(queryParams.value).then(response => {
+    dataList.value = response.rows
+    total.value = response.total
+    loading.value = false
+  })
+}
+
+/** 取消按钮 */
+function cancel() {
+  open.value = false
+  reset()
+}
+
+/** 表单重置 */
+function reset() {
+  form.value = {
+    dictCode: undefined,
+    dictLabel: undefined,
+    dictValue: undefined,
+    cssClass: undefined,
+    listClass: "default",
+    dictSort: 0,
+    status: "0",
+    remark: undefined
+  }
+  proxy.resetForm("dataRef")
+}
+
+/** 搜索按钮操作 */
+function handleQuery() {
+  queryParams.value.pageNum = 1
+  getList()
+}
+
+/** 返回按钮操作 */
+function handleClose() {
+  const obj = { path: "/system/dict" }
+  proxy.$tab.closeOpenPage(obj)
+}
+
+/** 重置按钮操作 */
+function resetQuery() {
+  proxy.resetForm("queryRef")
+  queryParams.value.dictType = defaultDictType.value
+  handleQuery()
+}
+
+/** 新增按钮操作 */
+function handleAdd() {
+  reset()
+  open.value = true
+  title.value = "添加字典数据"
+  form.value.dictType = queryParams.value.dictType
+}
+
+/** 多选框选中数据 */
+function handleSelectionChange(selection) {
+  ids.value = selection.map(item => item.dictCode)
+  single.value = selection.length != 1
+  multiple.value = !selection.length
+}
+
+/** 修改按钮操作 */
+function handleUpdate(row) {
+  reset()
+  const dictCode = row.dictCode || ids.value
+  getData(dictCode).then(response => {
+    form.value = response.data
+    open.value = true
+    title.value = "修改字典数据"
+  })
+}
+
+/** 提交按钮 */
+function submitForm() {
+  proxy.$refs["dataRef"].validate(valid => {
+    if (valid) {
+      if (form.value.dictCode != undefined) {
+        updateData(form.value).then(response => {
+          useDictStore().removeDict(queryParams.value.dictType)
+          proxy.$modal.msgSuccess("修改成功")
+          open.value = false
+          getList()
+        })
+      } else {
+        addData(form.value).then(response => {
+          useDictStore().removeDict(queryParams.value.dictType)
+          proxy.$modal.msgSuccess("新增成功")
+          open.value = false
+          getList()
+        })
+      }
+    }
+  })
+}
+
+/** 删除按钮操作 */
+function handleDelete(row) {
+  const dictCodes = row.dictCode || ids.value
+  proxy.$modal.confirm('是否确认删除字典编码为"' + dictCodes + '"的数据项？').then(function() {
+    return delData(dictCodes)
+  }).then(() => {
+    getList()
+    proxy.$modal.msgSuccess("删除成功")
+    useDictStore().removeDict(queryParams.value.dictType)
+  }).catch(() => {})
+}
+
+/** 导出按钮操作 */
+function handleExport() {
+  proxy.download("system/dict/data/export", {
+    ...queryParams.value
+  }, `dict_data_${new Date().getTime()}.xlsx`)
+}
+
+getTypes(route.params && route.params.dictId)
+getTypeList()
+</script>

src/views/system/dict/index.vue

@@ -0,0 +1,323 @@
+<template>
+   <div class="app-container">
+      <el-form :model="queryParams" ref="queryRef" :inline="true" v-show="showSearch" label-width="68px">
+         <el-form-item label="字典名称" prop="dictName">
+            <el-input
+               v-model="queryParams.dictName"
+               placeholder="请输入字典名称"
+               clearable
+               style="width: 240px"
+               @keyup.enter="handleQuery"
+            />
+         </el-form-item>
+         <el-form-item label="字典类型" prop="dictType">
+            <el-input
+               v-model="queryParams.dictType"
+               placeholder="请输入字典类型"
+               clearable
+               style="width: 240px"
+               @keyup.enter="handleQuery"
+            />
+         </el-form-item>
+         <el-form-item label="状态" prop="status">
+            <el-select
+               v-model="queryParams.status"
+               placeholder="字典状态"
+               clearable
+               style="width: 240px"
+            >
+               <el-option
+                  v-for="dict in sys_normal_disable"
+                  :key="dict.value"
+                  :label="dict.label"
+                  :value="dict.value"
+               />
+            </el-select>
+         </el-form-item>
+         <el-form-item label="创建时间" style="width: 308px">
+            <el-date-picker
+               v-model="dateRange"
+               value-format="YYYY-MM-DD"
+               type="daterange"
+               range-separator="-"
+               start-placeholder="开始日期"
+               end-placeholder="结束日期"
+            ></el-date-picker>
+         </el-form-item>
+         <el-form-item>
+            <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
+            <el-button icon="Refresh" @click="resetQuery">重置</el-button>
+         </el-form-item>
+      </el-form>
+
+      <el-row :gutter="10" class="mb8">
+         <el-col :span="1.5">
+            <el-button
+               type="primary"
+               plain
+               icon="Plus"
+               @click="handleAdd"
+               v-hasPermi="['system:dict:add']"
+            >新增</el-button>
+         </el-col>
+         <el-col :span="1.5">
+            <el-button
+               type="success"
+               plain
+               icon="Edit"
+               :disabled="single"
+               @click="handleUpdate"
+               v-hasPermi="['system:dict:edit']"
+            >修改</el-button>
+         </el-col>
+         <el-col :span="1.5">
+            <el-button
+               type="danger"
+               plain
+               icon="Delete"
+               :disabled="multiple"
+               @click="handleDelete"
+               v-hasPermi="['system:dict:remove']"
+            >删除</el-button>
+         </el-col>
+         <el-col :span="1.5">
+            <el-button
+               type="warning"
+               plain
+               icon="Download"
+               @click="handleExport"
+               v-hasPermi="['system:dict:export']"
+            >导出</el-button>
+         </el-col>
+         <el-col :span="1.5">
+            <el-button
+               type="danger"
+               plain
+               icon="Refresh"
+               @click="handleRefreshCache"
+               v-hasPermi="['system:dict:remove']"
+            >刷新缓存</el-button>
+         </el-col>
+         <right-toolbar v-model:showSearch="showSearch" @queryTable="getList"></right-toolbar>
+      </el-row>
+
+      <el-table v-loading="loading" :data="typeList" @selection-change="handleSelectionChange">
+         <el-table-column type="selection" width="55" align="center" />
+         <el-table-column label="字典编号" align="center" prop="dictId" />
+         <el-table-column label="字典名称" align="center" prop="dictName" :show-overflow-tooltip="true"/>
+         <el-table-column label="字典类型" align="center" :show-overflow-tooltip="true">
+            <template #default="scope">
+               <router-link :to="'/system/dict-data/index/' + scope.row.dictId" class="link-type">
+                  <span>{{ scope.row.dictType }}</span>
+               </router-link>
+            </template>
+         </el-table-column>
+         <el-table-column label="状态" align="center" prop="status">
+            <template #default="scope">
+               <dict-tag :options="sys_normal_disable" :value="scope.row.status" />
+            </template>
+         </el-table-column>
+         <el-table-column label="备注" align="center" prop="remark" :show-overflow-tooltip="true" />
+         <el-table-column label="创建时间" align="center" prop="createTime" width="180">
+            <template #default="scope">
+               <span>{{ parseTime(scope.row.createTime) }}</span>
+            </template>
+         </el-table-column>
+         <el-table-column label="操作" align="center" width="160" class-name="small-padding fixed-width">
+            <template #default="scope">
+               <el-button link type="primary" icon="Edit" @click="handleUpdate(scope.row)" v-hasPermi="['system:dict:edit']">修改</el-button>
+               <el-button link type="primary" icon="Delete" @click="handleDelete(scope.row)" v-hasPermi="['system:dict:remove']">删除</el-button>
+            </template>
+         </el-table-column>
+      </el-table>
+
+      <pagination
+         v-show="total > 0"
+         :total="total"
+         v-model:page="queryParams.pageNum"
+         v-model:limit="queryParams.pageSize"
+         @pagination="getList"
+      />
+
+      <!-- 添加或修改参数配置对话框 -->
+      <el-dialog :title="title" v-model="open" width="500px" append-to-body>
+         <el-form ref="dictRef" :model="form" :rules="rules" label-width="80px">
+            <el-form-item label="字典名称" prop="dictName">
+               <el-input v-model="form.dictName" placeholder="请输入字典名称" />
+            </el-form-item>
+            <el-form-item label="字典类型" prop="dictType">
+               <el-input v-model="form.dictType" placeholder="请输入字典类型" />
+            </el-form-item>
+            <el-form-item label="状态" prop="status">
+               <el-radio-group v-model="form.status">
+                  <el-radio
+                     v-for="dict in sys_normal_disable"
+                     :key="dict.value"
+                     :value="dict.value"
+                  >{{ dict.label }}</el-radio>
+               </el-radio-group>
+            </el-form-item>
+            <el-form-item label="备注" prop="remark">
+               <el-input v-model="form.remark" type="textarea" placeholder="请输入内容"></el-input>
+            </el-form-item>
+         </el-form>
+         <template #footer>
+            <div class="dialog-footer">
+               <el-button type="primary" @click="submitForm">确 定</el-button>
+               <el-button @click="cancel">取 消</el-button>
+            </div>
+         </template>
+      </el-dialog>
+   </div>
+</template>
+
+<script setup name="Dict">
+import useDictStore from '@/store/modules/dict'
+import { listType, getType, delType, addType, updateType, refreshCache } from "@/api/system/dict/type"
+
+const { proxy } = getCurrentInstance()
+const { sys_normal_disable } = proxy.useDict("sys_normal_disable")
+
+const typeList = ref([])
+const open = ref(false)
+const loading = ref(true)
+const showSearch = ref(true)
+const ids = ref([])
+const single = ref(true)
+const multiple = ref(true)
+const total = ref(0)
+const title = ref("")
+const dateRange = ref([])
+
+const data = reactive({
+  form: {},
+  queryParams: {
+    pageNum: 1,
+    pageSize: 10,
+    dictName: undefined,
+    dictType: undefined,
+    status: undefined
+  },
+  rules: {
+    dictName: [{ required: true, message: "字典名称不能为空", trigger: "blur" }],
+    dictType: [{ required: true, message: "字典类型不能为空", trigger: "blur" }]
+  },
+})
+
+const { queryParams, form, rules } = toRefs(data)
+
+/** 查询字典类型列表 */
+function getList() {
+  loading.value = true
+  listType(proxy.addDateRange(queryParams.value, dateRange.value)).then(response => {
+    typeList.value = response.rows
+    total.value = response.total
+    loading.value = false
+  })
+}
+
+/** 取消按钮 */
+function cancel() {
+  open.value = false
+  reset()
+}
+
+/** 表单重置 */
+function reset() {
+  form.value = {
+    dictId: undefined,
+    dictName: undefined,
+    dictType: undefined,
+    status: "0",
+    remark: undefined
+  }
+  proxy.resetForm("dictRef")
+}
+
+/** 搜索按钮操作 */
+function handleQuery() {
+  queryParams.value.pageNum = 1
+  getList()
+}
+
+/** 重置按钮操作 */
+function resetQuery() {
+  dateRange.value = []
+  proxy.resetForm("queryRef")
+  handleQuery()
+}
+
+/** 新增按钮操作 */
+function handleAdd() {
+  reset()
+  open.value = true
+  title.value = "添加字典类型"
+}
+
+/** 多选框选中数据 */
+function handleSelectionChange(selection) {
+  ids.value = selection.map(item => item.dictId)
+  single.value = selection.length != 1
+  multiple.value = !selection.length
+}
+
+/** 修改按钮操作 */
+function handleUpdate(row) {
+  reset()
+  const dictId = row.dictId || ids.value
+  getType(dictId).then(response => {
+    form.value = response.data
+    open.value = true
+    title.value = "修改字典类型"
+  })
+}
+
+/** 提交按钮 */
+function submitForm() {
+  proxy.$refs["dictRef"].validate(valid => {
+    if (valid) {
+      if (form.value.dictId != undefined) {
+        updateType(form.value).then(response => {
+          proxy.$modal.msgSuccess("修改成功")
+          open.value = false
+          getList()
+        })
+      } else {
+        addType(form.value).then(response => {
+          proxy.$modal.msgSuccess("新增成功")
+          open.value = false
+          getList()
+        })
+      }
+    }
+  })
+}
+
+/** 删除按钮操作 */
+function handleDelete(row) {
+  const dictIds = row.dictId || ids.value
+  proxy.$modal.confirm('是否确认删除字典编号为"' + dictIds + '"的数据项？').then(function() {
+    return delType(dictIds)
+  }).then(() => {
+    getList()
+    proxy.$modal.msgSuccess("删除成功")
+  }).catch(() => {})
+}
+
+/** 导出按钮操作 */
+function handleExport() {
+  proxy.download("system/dict/type/export", {
+    ...queryParams.value
+  }, `dict_${new Date().getTime()}.xlsx`)
+}
+
+/** 刷新缓存按钮操作 */
+function handleRefreshCache() {
+  refreshCache().then(() => {
+    proxy.$modal.msgSuccess("刷新成功")
+    useDictStore().cleanDict()
+  })
+}
+
+getList()
+</script>

src/views/system/generator/index.vue

@@ -0,0 +1,230 @@
+<template>
+  <div class="app-container">
+    <el-form :model="queryParams" ref="queryRef" :inline="true" v-show="showSearch" label-width="68px">
+      <el-form-item label="标识" prop="stub">
+        <el-input
+          v-model="queryParams.stub"
+          placeholder="请输入标识"
+          clearable
+          @keyup.enter="handleQuery"
+        />
+      </el-form-item>
+      <el-form-item>
+        <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
+        <el-button icon="Refresh" @click="resetQuery">重置</el-button>
+      </el-form-item>
+    </el-form>
+
+    <el-row :gutter="10" class="mb8">
+      <el-col :span="1.5">
+        <el-button
+          type="primary"
+          plain
+          icon="Plus"
+          @click="handleAdd"
+          v-hasPermi="['system:generator:add']"
+        >新增</el-button>
+      </el-col>
+      <el-col :span="1.5">
+        <el-button
+          type="success"
+          plain
+          icon="Edit"
+          :disabled="single"
+          @click="handleUpdate"
+          v-hasPermi="['system:generator:edit']"
+        >修改</el-button>
+      </el-col>
+      <el-col :span="1.5">
+        <el-button
+          type="danger"
+          plain
+          icon="Delete"
+          :disabled="multiple"
+          @click="handleDelete"
+          v-hasPermi="['system:generator:remove']"
+        >删除</el-button>
+      </el-col>
+      <el-col :span="1.5">
+        <el-button
+          type="warning"
+          plain
+          icon="Download"
+          @click="handleExport"
+          v-hasPermi="['system:generator:export']"
+        >导出</el-button>
+      </el-col>
+      <right-toolbar v-model:showSearch="showSearch" @queryTable="getList"></right-toolbar>
+    </el-row>
+
+    <el-table v-loading="loading" :data="generatorList" @selection-change="handleSelectionChange">
+      <el-table-column type="selection" width="55" align="center" />
+      <el-table-column label="主键" align="center" prop="id" />
+      <el-table-column label="标识" align="center" prop="stub" />
+      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
+        <template #default="scope">
+          <el-button link type="primary" icon="Edit" @click="handleUpdate(scope.row)" v-hasPermi="['system:generator:edit']">修改</el-button>
+          <el-button link type="primary" icon="Delete" @click="handleDelete(scope.row)" v-hasPermi="['system:generator:remove']">删除</el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+    
+    <pagination
+      v-show="total>0"
+      :total="total"
+      v-model:page="queryParams.pageNum"
+      v-model:limit="queryParams.pageSize"
+      @pagination="getList"
+    />
+
+    <!-- 添加或修改编码code自增对话框 -->
+    <el-dialog :title="title" v-model="open" width="500px" append-to-body>
+      <el-form ref="generatorRef" :model="form" :rules="rules" label-width="80px">
+        <el-form-item label="标识" prop="stub">
+          <el-input v-model="form.stub" placeholder="请输入标识" />
+        </el-form-item>
+      </el-form>
+      <template #footer>
+        <div class="dialog-footer">
+          <el-button type="primary" @click="submitForm">确 定</el-button>
+          <el-button @click="cancel">取 消</el-button>
+        </div>
+      </template>
+    </el-dialog>
+  </div>
+</template>
+
+<script setup name="Generator">
+import { listGenerator, getGenerator, delGenerator, addGenerator, updateGenerator } from "@/api/system/generator"
+
+const { proxy } = getCurrentInstance()
+
+const generatorList = ref([])
+const open = ref(false)
+const loading = ref(true)
+const showSearch = ref(true)
+const ids = ref([])
+const single = ref(true)
+const multiple = ref(true)
+const total = ref(0)
+const title = ref("")
+
+const data = reactive({
+  form: {},
+  queryParams: {
+    pageNum: 1,
+    pageSize: 10,
+    stub: null
+  },
+  rules: {
+    stub: [
+      { required: true, message: "标识不能为空", trigger: "blur" }
+    ]
+  }
+})
+
+const { queryParams, form, rules } = toRefs(data)
+
+/** 查询编码code自增列表 */
+function getList() {
+  loading.value = true
+  listGenerator(queryParams.value).then(response => {
+    generatorList.value = response.rows
+    total.value = response.total
+    loading.value = false
+  })
+}
+
+// 取消按钮
+function cancel() {
+  open.value = false
+  reset()
+}
+
+// 表单重置
+function reset() {
+  form.value = {
+    id: null,
+    stub: null
+  }
+  proxy.resetForm("generatorRef")
+}
+
+/** 搜索按钮操作 */
+function handleQuery() {
+  queryParams.value.pageNum = 1
+  getList()
+}
+
+/** 重置按钮操作 */
+function resetQuery() {
+  proxy.resetForm("queryRef")
+  handleQuery()
+}
+
+// 多选框选中数据
+function handleSelectionChange(selection) {
+  ids.value = selection.map(item => item.id)
+  single.value = selection.length != 1
+  multiple.value = !selection.length
+}
+
+/** 新增按钮操作 */
+function handleAdd() {
+  reset()
+  open.value = true
+  title.value = "添加编码code自增"
+}
+
+/** 修改按钮操作 */
+function handleUpdate(row) {
+  reset()
+  const _id = row.id || ids.value
+  getGenerator(_id).then(response => {
+    form.value = response.data
+    open.value = true
+    title.value = "修改编码code自增"
+  })
+}
+
+/** 提交按钮 */
+function submitForm() {
+  proxy.$refs["generatorRef"].validate(valid => {
+    if (valid) {
+      if (form.value.id != null) {
+        updateGenerator(form.value).then(response => {
+          proxy.$modal.msgSuccess("修改成功")
+          open.value = false
+          getList()
+        })
+      } else {
+        addGenerator(form.value).then(response => {
+          proxy.$modal.msgSuccess("新增成功")
+          open.value = false
+          getList()
+        })
+      }
+    }
+  })
+}
+
+/** 删除按钮操作 */
+function handleDelete(row) {
+  const _ids = row.id || ids.value
+  proxy.$modal.confirm('是否确认删除编码code自增编号为"' + _ids + '"的数据项？').then(function() {
+    return delGenerator(_ids)
+  }).then(() => {
+    getList()
+    proxy.$modal.msgSuccess("删除成功")
+  }).catch(() => {})
+}
+
+/** 导出按钮操作 */
+function handleExport() {
+  proxy.download('system/generator/export', {
+    ...queryParams.value
+  }, `generator_${new Date().getTime()}.xlsx`)
+}
+
+getList()
+</script>

src/views/system/item/index.vue

@@ -0,0 +1,338 @@
+<template>
+  <div class="app-container">
+    <el-form :model="queryParams" ref="queryRef" :inline="true" v-show="showSearch" label-width="68px">
+      <el-form-item label="物品编码" prop="code">
+        <el-input
+          v-model="queryParams.code"
+          placeholder="请输入编码"
+          clearable
+          @keyup.enter="handleQuery"
+        />
+      </el-form-item>
+      <el-form-item label="物品名称" prop="name">
+        <el-input
+          v-model="queryParams.name"
+          placeholder="请输入物品名称"
+          clearable
+          @keyup.enter="handleQuery"
+        />
+      </el-form-item>
+      <el-form-item label="危险等级" prop="dangerLevel">
+        <el-select v-model="queryParams.dangerLevel" placeholder="请选择危险等级" clearable style="width: 150px">
+          <el-option
+            v-for="dict in base_item_danger_level"
+            :key="dict.value"
+            :label="dict.label"
+            :value="dict.value"
+          />
+        </el-select>
+      </el-form-item>
+      <el-form-item label="分类名称" prop="categoryName">
+        <el-input
+          v-model="queryParams.categoryName"
+          placeholder="请输入分类名称"
+          clearable
+          @keyup.enter="handleQuery"
+        />
+      </el-form-item>
+
+      <el-form-item>
+        <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
+        <el-button icon="Refresh" @click="resetQuery">重置</el-button>
+      </el-form-item>
+    </el-form>
+
+    <el-row :gutter="10" class="mb8">
+      <el-col :span="1.5">
+        <el-button
+          type="primary"
+          plain
+          icon="Plus"
+          @click="handleAdd"
+          v-hasPermi="['system:item:add']"
+        >新增</el-button>
+      </el-col>
+      <el-col :span="1.5">
+        <el-button
+          type="success"
+          plain
+          icon="Edit"
+          :disabled="single"
+          @click="handleUpdate"
+          v-hasPermi="['system:item:edit']"
+        >修改</el-button>
+      </el-col>
+      <el-col :span="1.5">
+        <el-button
+          type="danger"
+          plain
+          icon="Delete"
+          :disabled="multiple"
+          @click="handleDelete"
+          v-hasPermi="['system:item:remove']"
+        >删除</el-button>
+      </el-col>
+      <el-col :span="1.5">
+        <el-button
+          type="warning"
+          plain
+          icon="Download"
+          @click="handleExport"
+          v-hasPermi="['system:item:export']"
+        >导出</el-button>
+      </el-col>
+      <right-toolbar v-model:showSearch="showSearch" @queryTable="getList"></right-toolbar>
+    </el-row>
+
+    <el-table v-loading="loading" :data="itemList" @selection-change="handleSelectionChange">
+      <el-table-column type="selection" width="55" align="center" />
+      <el-table-column label="物品编码" align="center" prop="code" />
+      <el-table-column label="物品名称" align="center" prop="name" />
+      <el-table-column label="分类名称" align="center" prop="categoryName" />
+      <el-table-column label="危险等级" align="center" prop="dangerLevel">
+        <template #default="scope">
+          <dict-tag :options="base_item_danger_level" :value="scope.row.dangerLevel"/>
+        </template>
+      </el-table-column>
+      <el-table-column label="备注" align="center" prop="remark" />
+      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
+        <template #default="scope">
+          <el-button link type="primary" icon="Edit" @click="handleUpdate(scope.row)" v-hasPermi="['system:item:edit']">修改</el-button>
+          <el-button link type="primary" icon="Delete" @click="handleDelete(scope.row)" v-hasPermi="['system:item:remove']">删除</el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+    
+    <pagination
+      v-show="total>0"
+      :total="total"
+      v-model:page="queryParams.pageNum"
+      v-model:limit="queryParams.pageSize"
+      @pagination="getList"
+    />
+
+    <!-- 添加或修改查获物品对话框 -->
+    <el-dialog :title="title" v-model="open" width="500px" append-to-body>
+      <el-form ref="itemRef" :model="form" :rules="rules" label-width="80px">
+        <el-form-item label="物品编码" prop="code" v-if="form.id">
+          <el-input v-model="form.code" placeholder="请输入编码" disabled/>
+        </el-form-item>
+        <el-form-item label="物品名称" prop="name">
+          <el-input v-model="form.name" placeholder="请输入物品名称" />
+        </el-form-item>
+        <el-form-item label="危险等级" prop="dangerLevel">
+          <el-select v-model="form.dangerLevel" placeholder="请选择危险等级">
+            <el-option
+              v-for="dict in base_item_danger_level"
+              :key="dict.value"
+              :label="dict.label"
+              :value="dict.value"
+            ></el-option>
+          </el-select>
+        </el-form-item>
+        <el-form-item label="所属分类" prop="categoryCode">
+          <el-tree-select v-model="form.categoryCode"  
+            :data="enableCategoryOptions" 
+            :props="{ value: 'code', label: 'label', children: 'children' }" 
+            value-key="id" 
+            placeholder="请选择所属分类" 
+            @node-click="handleNodeClick"
+
+           />
+        </el-form-item>
+        <el-form-item label="备注" prop="remark">
+          <el-input v-model="form.remark" type="textarea" placeholder="请输入内容" />
+        </el-form-item>
+
+      </el-form>
+      <template #footer>
+        <div class="dialog-footer">
+          <el-button type="primary" @click="submitForm">确 定</el-button>
+          <el-button @click="cancel">取 消</el-button>
+        </div>
+      </template>
+    </el-dialog>
+  </div>
+</template>
+
+<script setup name="Item">
+import { listItem, getItem, delItem, addItem, updateItem } from "@/api/system/item"
+import { treeSelectByType } from "@/api/system/common"
+
+const { proxy } = getCurrentInstance()
+const { base_item_danger_level } = proxy.useDict('base_item_danger_level')
+
+const itemList = ref([])
+const open = ref(false)
+const loading = ref(true)
+const showSearch = ref(true)
+const ids = ref([])
+const single = ref(true)
+const multiple = ref(true)
+const total = ref(0)
+const title = ref("")
+const enableCategoryOptions = ref(undefined)
+
+const data = reactive({
+  form: {},
+  queryParams: {
+    pageNum: 1,
+    pageSize: 10,
+    name: null,
+    categoryCode: null,
+    dangerLevel: null,
+    categoryName: null,
+    code: null,
+  },
+  rules: {
+    name: [
+      { required: true, message: "物品名称不能为空", trigger: "blur" }
+    ],
+    categoryCode: [
+      { required: true, message: "分类编码不能为空", trigger: "change" }
+    ],
+    dangerLevel: [
+      { required: true, message: "危险等级不能为空", trigger: "change" }
+    ],
+    categoryName: [
+      { required: true, message: "分类名称不能为空", trigger: "blur" }
+    ],
+    code: [
+      { required: true, message: "编码不能为空", trigger: "blur" }
+    ],
+    dangerLevelDesc: [
+      { required: true, message: "危险等级名称不能为空", trigger: "blur" }
+    ]
+  }
+})
+
+const { queryParams, form, rules } = toRefs(data)
+
+/** 查询查获物品列表 */
+function getList() {
+  loading.value = true
+  listItem(queryParams.value).then(response => {
+    itemList.value = response.rows
+    total.value = response.total
+    loading.value = false
+  })
+}
+
+// 取消按钮
+function cancel() {
+  open.value = false
+  reset()
+}
+
+// 表单重置
+function reset() {
+  form.value = {
+    tenantId: null,
+    revision: null,
+    createBy: null,
+    createTime: null,
+    updateBy: null,
+    updateTime: null,
+    name: null,
+    categoryCode: null,
+    dangerLevel: null,
+    id: null,
+    categoryName: null,
+    remark: null,
+    code: null,
+    dangerLevelDesc: null
+  }
+  proxy.resetForm("itemRef")
+}
+
+/** 搜索按钮操作 */
+function handleQuery() {
+  queryParams.value.pageNum = 1
+  getList()
+}
+
+/** 重置按钮操作 */
+function resetQuery() {
+  proxy.resetForm("queryRef")
+  handleQuery()
+}
+
+// 多选框选中数据
+function handleSelectionChange(selection) {
+  ids.value = selection.map(item => item.id)
+  single.value = selection.length != 1
+  multiple.value = !selection.length
+}
+
+/** 新增按钮操作 */
+function handleAdd() {
+  reset()
+  open.value = true
+  title.value = "添加查获物品"
+}
+
+/** 修改按钮操作 */
+function handleUpdate(row) {
+  reset()
+  const _id = row.id || ids.value
+  getItem(_id).then(response => {
+    form.value = response.data
+    open.value = true
+    title.value = "修改查获物品"
+  })
+}
+
+/** 提交按钮 */
+function submitForm() {
+  proxy.$refs["itemRef"].validate(valid => {
+    if (valid) {
+      if (form.value.id != null) {
+        updateItem(form.value).then(response => {
+          proxy.$modal.msgSuccess("修改成功")
+          open.value = false
+          getList()
+        })
+      } else {
+        addItem(form.value).then(response => {
+          proxy.$modal.msgSuccess("新增成功")
+          open.value = false
+          getList()
+        })
+      }
+    }
+  })
+}
+
+/** 删除按钮操作 */
+function handleDelete(row) {
+  const _ids = row.id || ids.value
+  proxy.$modal.confirm('是否确认删除数据项？').then(function() {
+    return delItem(_ids)
+  }).then(() => {
+    getList()
+    proxy.$modal.msgSuccess("删除成功")
+  }).catch(() => {})
+}
+
+/** 导出按钮操作 */
+function handleExport() {
+  proxy.download('system/item/export', {
+    ...queryParams.value
+  }, `item_${new Date().getTime()}.xlsx`)
+}
+
+/** 查询分类下拉树结构 */
+function getCategoryTree() {
+  treeSelectByType("ITEM_CATEGORY",2).then(response => {
+    enableCategoryOptions.value = response.data
+  })
+}
+
+function handleNodeClick(data) {
+  form.value.categoryName=data.label;
+}
+
+getCategoryTree()
+getList()
+
+</script>

src/views/system/menu/index.vue

@@ -0,0 +1,452 @@
+<template>
+   <div class="app-container">
+      <el-form :model="queryParams" ref="queryRef" :inline="true" v-show="showSearch">
+         <el-form-item label="菜单名称" prop="menuName">
+            <el-input
+               v-model="queryParams.menuName"
+               placeholder="请输入菜单名称"
+               clearable
+               style="width: 200px"
+               @keyup.enter="handleQuery"
+            />
+         </el-form-item>
+         <el-form-item label="状态" prop="status">
+            <el-select v-model="queryParams.status" placeholder="菜单状态" clearable style="width: 200px">
+               <el-option
+                  v-for="dict in sys_normal_disable"
+                  :key="dict.value"
+                  :label="dict.label"
+                  :value="dict.value"
+               />
+            </el-select>
+         </el-form-item>
+         <el-form-item>
+            <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
+            <el-button icon="Refresh" @click="resetQuery">重置</el-button>
+         </el-form-item>
+      </el-form>
+
+      <el-row :gutter="10" class="mb8">
+         <el-col :span="1.5">
+            <el-button
+               type="primary"
+               plain
+               icon="Plus"
+               @click="handleAdd"
+               v-hasPermi="['system:menu:add']"
+            >新增</el-button>
+         </el-col>
+         <el-col :span="1.5">
+            <el-button 
+               type="info"
+               plain
+               icon="Sort"
+               @click="toggleExpandAll"
+            >展开/折叠</el-button>
+         </el-col>
+         <right-toolbar v-model:showSearch="showSearch" @queryTable="getList"></right-toolbar>
+      </el-row>
+
+      <el-table
+         v-if="refreshTable"
+         v-loading="loading"
+         :data="menuList"
+         row-key="menuId"
+         :default-expand-all="isExpandAll"
+         :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
+      >
+         <el-table-column prop="menuName" label="菜单名称" :show-overflow-tooltip="true" width="160"></el-table-column>
+         <el-table-column prop="icon" label="图标" align="center" width="100">
+            <template #default="scope">
+               <svg-icon :icon-class="scope.row.icon" />
+            </template>
+         </el-table-column>
+         <el-table-column prop="orderNum" label="排序" width="60"></el-table-column>
+         <el-table-column prop="perms" label="权限标识" :show-overflow-tooltip="true"></el-table-column>
+         <el-table-column prop="component" label="组件路径" :show-overflow-tooltip="true"></el-table-column>
+         <el-table-column prop="status" label="状态" width="80">
+            <template #default="scope">
+               <dict-tag :options="sys_normal_disable" :value="scope.row.status" />
+            </template>
+         </el-table-column>
+         <el-table-column label="创建时间" align="center" width="160" prop="createTime">
+            <template #default="scope">
+               <span>{{ parseTime(scope.row.createTime) }}</span>
+            </template>
+         </el-table-column>
+         <el-table-column label="操作" align="center" width="210" class-name="small-padding fixed-width">
+            <template #default="scope">
+               <el-button link type="primary" icon="Edit" @click="handleUpdate(scope.row)" v-hasPermi="['system:menu:edit']">修改</el-button>
+               <el-button link type="primary" icon="Plus" @click="handleAdd(scope.row)" v-hasPermi="['system:menu:add']">新增</el-button>
+               <el-button link type="primary" icon="Delete" @click="handleDelete(scope.row)" v-hasPermi="['system:menu:remove']">删除</el-button>
+            </template>
+         </el-table-column>
+      </el-table>
+
+      <!-- 添加或修改菜单对话框 -->
+      <el-dialog :title="title" v-model="open" width="680px" append-to-body>
+         <el-form ref="menuRef" :model="form" :rules="rules" label-width="100px">
+            <el-row>
+               <el-col :span="24">
+                  <el-form-item label="上级菜单">
+                     <el-tree-select
+                        v-model="form.parentId"
+                        :data="menuOptions"
+                        :props="{ value: 'menuId', label: 'menuName', children: 'children' }"
+                        value-key="menuId"
+                        placeholder="选择上级菜单"
+                        check-strictly
+                     />
+                  </el-form-item>
+               </el-col>
+               <el-col :span="24">
+                  <el-form-item label="菜单类型" prop="menuType">
+                     <el-radio-group v-model="form.menuType">
+                        <el-radio value="M">目录</el-radio>
+                        <el-radio value="C">菜单</el-radio>
+                        <el-radio value="F">按钮</el-radio>
+                     </el-radio-group>
+                  </el-form-item>
+               </el-col>
+               <el-col :span="12" v-if="form.menuType != 'F'">
+                  <el-form-item label="菜单图标" prop="icon">
+                     <el-popover
+                        placement="bottom-start"
+                        :width="540"
+                        trigger="click"
+                     >
+                        <template #reference>
+                           <el-input v-model="form.icon" placeholder="点击选择图标" @blur="showSelectIcon" readonly>
+                              <template #prefix>
+                                 <svg-icon
+                                    v-if="form.icon"
+                                    :icon-class="form.icon"
+                                    class="el-input__icon"
+                                    style="height: 32px;width: 16px;"
+                                 />
+                                 <el-icon v-else style="height: 32px;width: 16px;"><search /></el-icon>
+                              </template>
+                           </el-input>
+                        </template>
+                        <icon-select ref="iconSelectRef" @selected="selected" :active-icon="form.icon" />
+                     </el-popover>
+                  </el-form-item>
+               </el-col>
+               <el-col :span="12">
+                  <el-form-item label="显示排序" prop="orderNum">
+                     <el-input-number v-model="form.orderNum" controls-position="right" :min="0" />
+                  </el-form-item>
+               </el-col>
+               <el-col :span="12">
+                  <el-form-item label="菜单名称" prop="menuName">
+                     <el-input v-model="form.menuName" placeholder="请输入菜单名称" />
+                  </el-form-item>
+               </el-col>
+               <el-col :span="12" v-if="form.menuType == 'C'">
+                  <el-form-item prop="routeName">
+                     <template #label>
+                        <span>
+                           <el-tooltip content="默认不填则和路由地址相同：如地址为：`user`，则名称为`User`（注意：因为router会删除名称相同路由，为避免名字的冲突，特殊情况下请自定义，保证唯一性）" placement="top">
+                              <el-icon><question-filled /></el-icon>
+                           </el-tooltip>
+                           路由名称
+                        </span>
+                     </template>
+                     <el-input v-model="form.routeName" placeholder="请输入路由名称" />
+                  </el-form-item>
+               </el-col>
+               <el-col :span="12" v-if="form.menuType != 'F'">
+                  <el-form-item>
+                     <template #label>
+                        <span>
+                           <el-tooltip content="选择是外链则路由地址需要以`http(s)://`开头" placement="top">
+                              <el-icon><question-filled /></el-icon>
+                           </el-tooltip>是否外链
+                        </span>
+                     </template>
+                     <el-radio-group v-model="form.isFrame">
+                        <el-radio value="0">是</el-radio>
+                        <el-radio value="1">否</el-radio>
+                     </el-radio-group>
+                  </el-form-item>
+               </el-col>
+               <el-col :span="12" v-if="form.menuType != 'F'">
+                  <el-form-item prop="path">
+                     <template #label>
+                        <span>
+                           <el-tooltip content="访问的路由地址，如：`user`，如外网地址需内链访问则以`http(s)://`开头" placement="top">
+                              <el-icon><question-filled /></el-icon>
+                           </el-tooltip>
+                           路由地址
+                        </span>
+                     </template>
+                     <el-input v-model="form.path" placeholder="请输入路由地址" />
+                  </el-form-item>
+               </el-col>
+               <el-col :span="12" v-if="form.menuType == 'C'">
+                  <el-form-item prop="component">
+                     <template #label>
+                        <span>
+                           <el-tooltip content="访问的组件路径，如：`system/user/index`，默认在`views`目录下" placement="top">
+                              <el-icon><question-filled /></el-icon>
+                           </el-tooltip>
+                           组件路径
+                        </span>
+                     </template>
+                     <el-input v-model="form.component" placeholder="请输入组件路径" />
+                  </el-form-item>
+               </el-col>
+               <el-col :span="12" v-if="form.menuType != 'M'">
+                  <el-form-item>
+                     <el-input v-model="form.perms" placeholder="请输入权限标识" maxlength="100" />
+                     <template #label>
+                        <span>
+                           <el-tooltip content="控制器中定义的权限字符，如：@PreAuthorize(`@ss.hasPermi('system:user:list')`)" placement="top">
+                              <el-icon><question-filled /></el-icon>
+                           </el-tooltip>
+                           权限字符
+                        </span>
+                     </template>
+                  </el-form-item>
+               </el-col>
+               <el-col :span="12" v-if="form.menuType == 'C'">
+                  <el-form-item>
+                     <el-input v-model="form.query" placeholder="请输入路由参数" maxlength="255" />
+                     <template #label>
+                        <span>
+                           <el-tooltip content='访问路由的默认传递参数，如：`{"id": 1, "name": "ry"}`' placement="top">
+                              <el-icon><question-filled /></el-icon>
+                           </el-tooltip>
+                           路由参数
+                        </span>
+                     </template>
+                  </el-form-item>
+               </el-col>
+               <el-col :span="12" v-if="form.menuType == 'C'">
+                  <el-form-item>
+                     <template #label>
+                        <span>
+                           <el-tooltip content="选择是则会被`keep-alive`缓存，需要匹配组件的`name`和地址保持一致" placement="top">
+                              <el-icon><question-filled /></el-icon>
+                           </el-tooltip>
+                           是否缓存
+                        </span>
+                     </template>
+                     <el-radio-group v-model="form.isCache">
+                        <el-radio value="0">缓存</el-radio>
+                        <el-radio value="1">不缓存</el-radio>
+                     </el-radio-group>
+                  </el-form-item>
+               </el-col>
+               <el-col :span="12" v-if="form.menuType != 'F'">
+                  <el-form-item>
+                     <template #label>
+                        <span>
+                           <el-tooltip content="选择隐藏则路由将不会出现在侧边栏，但仍然可以访问" placement="top">
+                              <el-icon><question-filled /></el-icon>
+                           </el-tooltip>
+                           显示状态
+                        </span>
+                     </template>
+                     <el-radio-group v-model="form.visible">
+                        <el-radio
+                           v-for="dict in sys_show_hide"
+                           :key="dict.value"
+                           :value="dict.value"
+                        >{{ dict.label }}</el-radio>
+                     </el-radio-group>
+                  </el-form-item>
+               </el-col>
+               <el-col :span="12">
+                  <el-form-item>
+                     <template #label>
+                        <span>
+                           <el-tooltip content="选择停用则路由将不会出现在侧边栏，也不能被访问" placement="top">
+                              <el-icon><question-filled /></el-icon>
+                           </el-tooltip>
+                           菜单状态
+                        </span>
+                     </template>
+                     <el-radio-group v-model="form.status">
+                        <el-radio
+                           v-for="dict in sys_normal_disable"
+                           :key="dict.value"
+                           :value="dict.value"
+                        >{{ dict.label }}</el-radio>
+                     </el-radio-group>
+                  </el-form-item>
+               </el-col>
+            </el-row>
+         </el-form>
+         <template #footer>
+            <div class="dialog-footer">
+               <el-button type="primary" @click="submitForm">确 定</el-button>
+               <el-button @click="cancel">取 消</el-button>
+            </div>
+         </template>
+      </el-dialog>
+   </div>
+</template>
+
+<script setup name="Menu">
+import { addMenu, delMenu, getMenu, listMenu, updateMenu } from "@/api/system/menu"
+import SvgIcon from "@/components/SvgIcon"
+import IconSelect from "@/components/IconSelect"
+
+const { proxy } = getCurrentInstance()
+const { sys_show_hide, sys_normal_disable } = proxy.useDict("sys_show_hide", "sys_normal_disable")
+
+const menuList = ref([])
+const open = ref(false)
+const loading = ref(true)
+const showSearch = ref(true)
+const title = ref("")
+const menuOptions = ref([])
+const isExpandAll = ref(false)
+const refreshTable = ref(true)
+const iconSelectRef = ref(null)
+
+const data = reactive({
+  form: {},
+  queryParams: {
+    menuName: undefined,
+    visible: undefined
+  },
+  rules: {
+    menuName: [{ required: true, message: "菜单名称不能为空", trigger: "blur" }],
+    orderNum: [{ required: true, message: "菜单顺序不能为空", trigger: "blur" }],
+    path: [{ required: true, message: "路由地址不能为空", trigger: "blur" }]
+  },
+})
+
+const { queryParams, form, rules } = toRefs(data)
+
+/** 查询菜单列表 */
+function getList() {
+  loading.value = true
+  listMenu(queryParams.value).then(response => {
+    menuList.value = proxy.handleTree(response.data, "menuId")
+    loading.value = false
+  })
+}
+
+/** 查询菜单下拉树结构 */
+function getTreeselect() {
+  menuOptions.value = []
+  listMenu().then(response => {
+    const menu = { menuId: 0, menuName: "主类目", children: [] }
+    menu.children = proxy.handleTree(response.data, "menuId")
+    menuOptions.value.push(menu)
+  })
+}
+
+/** 取消按钮 */
+function cancel() {
+  open.value = false
+  reset()
+}
+
+/** 表单重置 */
+function reset() {
+  form.value = {
+    menuId: undefined,
+    parentId: 0,
+    menuName: undefined,
+    icon: undefined,
+    menuType: "M",
+    orderNum: undefined,
+    isFrame: "1",
+    isCache: "0",
+    visible: "0",
+    status: "0"
+  }
+  proxy.resetForm("menuRef")
+}
+
+/** 展示下拉图标 */
+function showSelectIcon() {
+  iconSelectRef.value.reset()
+}
+
+/** 选择图标 */
+function selected(name) {
+  form.value.icon = name
+}
+
+/** 搜索按钮操作 */
+function handleQuery() {
+  getList()
+}
+
+/** 重置按钮操作 */
+function resetQuery() {
+  proxy.resetForm("queryRef")
+  handleQuery()
+}
+
+/** 新增按钮操作 */
+function handleAdd(row) {
+  reset()
+  getTreeselect()
+  if (row != null && row.menuId) {
+    form.value.parentId = row.menuId
+  } else {
+    form.value.parentId = 0
+  }
+  open.value = true
+  title.value = "添加菜单"
+}
+
+/** 展开/折叠操作 */
+function toggleExpandAll() {
+  refreshTable.value = false
+  isExpandAll.value = !isExpandAll.value
+  nextTick(() => {
+    refreshTable.value = true
+  })
+}
+
+/** 修改按钮操作 */
+async function handleUpdate(row) {
+  reset()
+  await getTreeselect()
+  getMenu(row.menuId).then(response => {
+    form.value = response.data
+    open.value = true
+    title.value = "修改菜单"
+  })
+}
+
+/** 提交按钮 */
+function submitForm() {
+  proxy.$refs["menuRef"].validate(valid => {
+    if (valid) {
+      if (form.value.menuId != undefined) {
+        updateMenu(form.value).then(response => {
+          proxy.$modal.msgSuccess("修改成功")
+          open.value = false
+          getList()
+        })
+      } else {
+        addMenu(form.value).then(response => {
+          proxy.$modal.msgSuccess("新增成功")
+          open.value = false
+          getList()
+        })
+      }
+    }
+  })
+}
+
+/** 删除按钮操作 */
+function handleDelete(row) {
+  proxy.$modal.confirm('是否确认删除名称为"' + row.menuName + '"的数据项?').then(function() {
+    return delMenu(row.menuId)
+  }).then(() => {
+    getList()
+    proxy.$modal.msgSuccess("删除成功")
+  }).catch(() => {})
+}
+
+getList()
+</script>

src/views/system/notice/index.vue

@@ -0,0 +1,292 @@
+<template>
+   <div class="app-container">
+      <el-form :model="queryParams" ref="queryRef" :inline="true" v-show="showSearch">
+         <el-form-item label="公告标题" prop="noticeTitle">
+            <el-input
+               v-model="queryParams.noticeTitle"
+               placeholder="请输入公告标题"
+               clearable
+               style="width: 200px"
+               @keyup.enter="handleQuery"
+            />
+         </el-form-item>
+         <el-form-item label="操作人员" prop="createBy">
+            <el-input
+               v-model="queryParams.createBy"
+               placeholder="请输入操作人员"
+               clearable
+               style="width: 200px"
+               @keyup.enter="handleQuery"
+            />
+         </el-form-item>
+         <el-form-item label="类型" prop="noticeType">
+            <el-select v-model="queryParams.noticeType" placeholder="公告类型" clearable style="width: 200px">
+               <el-option
+                  v-for="dict in sys_notice_type"
+                  :key="dict.value"
+                  :label="dict.label"
+                  :value="dict.value"
+               />
+            </el-select>
+         </el-form-item>
+         <el-form-item>
+            <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
+            <el-button icon="Refresh" @click="resetQuery">重置</el-button>
+         </el-form-item>
+      </el-form>
+
+      <el-row :gutter="10" class="mb8">
+         <el-col :span="1.5">
+            <el-button
+               type="primary"
+               plain
+               icon="Plus"
+               @click="handleAdd"
+               v-hasPermi="['system:notice:add']"
+            >新增</el-button>
+         </el-col>
+         <el-col :span="1.5">
+            <el-button
+               type="success"
+               plain
+               icon="Edit"
+               :disabled="single"
+               @click="handleUpdate"
+               v-hasPermi="['system:notice:edit']"
+            >修改</el-button>
+         </el-col>
+         <el-col :span="1.5">
+            <el-button
+               type="danger"
+               plain
+               icon="Delete"
+               :disabled="multiple"
+               @click="handleDelete"
+               v-hasPermi="['system:notice:remove']"
+            >删除</el-button>
+         </el-col>
+         <right-toolbar v-model:showSearch="showSearch" @queryTable="getList"></right-toolbar>
+      </el-row>
+
+      <el-table v-loading="loading" :data="noticeList" @selection-change="handleSelectionChange">
+         <el-table-column type="selection" width="55" align="center" />
+         <el-table-column label="序号" align="center" prop="noticeId" width="100" />
+         <el-table-column
+            label="公告标题"
+            align="center"
+            prop="noticeTitle"
+            :show-overflow-tooltip="true"
+         />
+         <el-table-column label="公告类型" align="center" prop="noticeType" width="100">
+            <template #default="scope">
+               <dict-tag :options="sys_notice_type" :value="scope.row.noticeType" />
+            </template>
+         </el-table-column>
+         <el-table-column label="状态" align="center" prop="status" width="100">
+            <template #default="scope">
+               <dict-tag :options="sys_notice_status" :value="scope.row.status" />
+            </template>
+         </el-table-column>
+         <el-table-column label="创建者" align="center" prop="createBy" width="100" />
+         <el-table-column label="创建时间" align="center" prop="createTime" width="100">
+            <template #default="scope">
+               <span>{{ parseTime(scope.row.createTime, '{y}-{m}-{d}') }}</span>
+            </template>
+         </el-table-column>
+         <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
+            <template #default="scope">
+               <el-button link type="primary" icon="Edit" @click="handleUpdate(scope.row)" v-hasPermi="['system:notice:edit']">修改</el-button>
+               <el-button link type="primary" icon="Delete" @click="handleDelete(scope.row)" v-hasPermi="['system:notice:remove']" >删除</el-button>
+            </template>
+         </el-table-column>
+      </el-table>
+
+      <pagination
+         v-show="total > 0"
+         :total="total"
+         v-model:page="queryParams.pageNum"
+         v-model:limit="queryParams.pageSize"
+         @pagination="getList"
+      />
+
+      <!-- 添加或修改公告对话框 -->
+      <el-dialog :title="title" v-model="open" width="780px" append-to-body>
+         <el-form ref="noticeRef" :model="form" :rules="rules" label-width="80px">
+            <el-row>
+               <el-col :span="12">
+                  <el-form-item label="公告标题" prop="noticeTitle">
+                     <el-input v-model="form.noticeTitle" placeholder="请输入公告标题" />
+                  </el-form-item>
+               </el-col>
+               <el-col :span="12">
+                  <el-form-item label="公告类型" prop="noticeType">
+                     <el-select v-model="form.noticeType" placeholder="请选择">
+                        <el-option
+                           v-for="dict in sys_notice_type"
+                           :key="dict.value"
+                           :label="dict.label"
+                           :value="dict.value"
+                        ></el-option>
+                     </el-select>
+                  </el-form-item>
+               </el-col>
+               <el-col :span="24">
+                  <el-form-item label="状态">
+                     <el-radio-group v-model="form.status">
+                        <el-radio
+                           v-for="dict in sys_notice_status"
+                           :key="dict.value"
+                           :value="dict.value"
+                        >{{ dict.label }}</el-radio>
+                     </el-radio-group>
+                  </el-form-item>
+               </el-col>
+               <el-col :span="24">
+                  <el-form-item label="内容">
+                    <editor v-model="form.noticeContent" :min-height="192"/>
+                  </el-form-item>
+               </el-col>
+            </el-row>
+         </el-form>
+         <template #footer>
+            <div class="dialog-footer">
+               <el-button type="primary" @click="submitForm">确 定</el-button>
+               <el-button @click="cancel">取 消</el-button>
+            </div>
+         </template>
+      </el-dialog>
+   </div>
+</template>
+
+<script setup name="Notice">
+import { listNotice, getNotice, delNotice, addNotice, updateNotice } from "@/api/system/notice"
+
+const { proxy } = getCurrentInstance()
+const { sys_notice_status, sys_notice_type } = proxy.useDict("sys_notice_status", "sys_notice_type")
+
+const noticeList = ref([])
+const open = ref(false)
+const loading = ref(true)
+const showSearch = ref(true)
+const ids = ref([])
+const single = ref(true)
+const multiple = ref(true)
+const total = ref(0)
+const title = ref("")
+
+const data = reactive({
+  form: {},
+  queryParams: {
+    pageNum: 1,
+    pageSize: 10,
+    noticeTitle: undefined,
+    createBy: undefined,
+    status: undefined
+  },
+  rules: {
+    noticeTitle: [{ required: true, message: "公告标题不能为空", trigger: "blur" }],
+    noticeType: [{ required: true, message: "公告类型不能为空", trigger: "change" }]
+  },
+})
+
+const { queryParams, form, rules } = toRefs(data)
+
+/** 查询公告列表 */
+function getList() {
+  loading.value = true
+  listNotice(queryParams.value).then(response => {
+    noticeList.value = response.rows
+    total.value = response.total
+    loading.value = false
+  })
+}
+
+/** 取消按钮 */
+function cancel() {
+  open.value = false
+  reset()
+}
+
+/** 表单重置 */
+function reset() {
+  form.value = {
+    noticeId: undefined,
+    noticeTitle: undefined,
+    noticeType: undefined,
+    noticeContent: undefined,
+    status: "0"
+  }
+  proxy.resetForm("noticeRef")
+}
+
+/** 搜索按钮操作 */
+function handleQuery() {
+  queryParams.value.pageNum = 1
+  getList()
+}
+
+/** 重置按钮操作 */
+function resetQuery() {
+  proxy.resetForm("queryRef")
+  handleQuery()
+}
+
+/** 多选框选中数据 */
+function handleSelectionChange(selection) {
+  ids.value = selection.map(item => item.noticeId)
+  single.value = selection.length != 1
+  multiple.value = !selection.length
+}
+
+/** 新增按钮操作 */
+function handleAdd() {
+  reset()
+  open.value = true
+  title.value = "添加公告"
+}
+
+/**修改按钮操作 */
+function handleUpdate(row) {
+  reset()
+  const noticeId = row.noticeId || ids.value
+  getNotice(noticeId).then(response => {
+    form.value = response.data
+    open.value = true
+    title.value = "修改公告"
+  })
+}
+
+/** 提交按钮 */
+function submitForm() {
+  proxy.$refs["noticeRef"].validate(valid => {
+    if (valid) {
+      if (form.value.noticeId != undefined) {
+        updateNotice(form.value).then(response => {
+          proxy.$modal.msgSuccess("修改成功")
+          open.value = false
+          getList()
+        })
+      } else {
+        addNotice(form.value).then(response => {
+          proxy.$modal.msgSuccess("新增成功")
+          open.value = false
+          getList()
+        })
+      }
+    }
+  })
+}
+
+/** 删除按钮操作 */
+function handleDelete(row) {
+  const noticeIds = row.noticeId || ids.value
+  proxy.$modal.confirm('是否确认删除公告编号为"' + noticeIds + '"的数据项？').then(function() {
+    return delNotice(noticeIds)
+  }).then(() => {
+    getList()
+    proxy.$modal.msgSuccess("删除成功")
+  }).catch(() => {})
+}
+
+getList()
+</script>

src/views/system/point/index.vue

@@ -0,0 +1,280 @@
+<template>
+  <div class="app-container">
+    <el-form :model="queryParams" ref="queryRef" :inline="true" v-show="showSearch" label-width="68px">
+           
+      <el-form-item label="部位编码" prop="code">
+        <el-input
+          v-model="queryParams.code"
+          placeholder="请输入编码"
+          clearable
+          @keyup.enter="handleQuery"
+        />
+      </el-form-item>
+      <el-form-item label="部位名称" prop="name">
+        <el-input
+          v-model="queryParams.name"
+          placeholder="请输入部位名称"
+          clearable
+          @keyup.enter="handleQuery"
+        />
+      </el-form-item>
+      <el-form-item>
+        <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
+        <el-button icon="Refresh" @click="resetQuery">重置</el-button>
+      </el-form-item>
+    </el-form>
+
+    <el-row :gutter="10" class="mb8">
+      <el-col :span="1.5">
+        <el-button
+          type="primary"
+          plain
+          icon="Plus"
+          @click="handleAdd"
+          v-hasPermi="['system:point:add']"
+        >新增</el-button>
+      </el-col>
+      <el-col :span="1.5">
+        <el-button
+          type="info"
+          plain
+          icon="Sort"
+          @click="toggleExpandAll"
+        >展开/折叠</el-button>
+      </el-col>
+      <right-toolbar v-model:showSearch="showSearch" @queryTable="getList"></right-toolbar>
+    </el-row>
+
+    <el-table
+      v-if="refreshTable"
+      v-loading="loading"
+      :data="pointList"
+      row-key="id"
+      :default-expand-all="isExpandAll"
+      :tree-props="{children: 'children', hasChildren: 'hasChildren'}"
+    >
+      <el-table-column label="部位编码" align="center" prop="code" />
+      <el-table-column label="部位名称" align="center" prop="name" />
+      <el-table-column label="显示顺序" align="center" prop="orderNum" />
+      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
+        <template #default="scope">
+          <el-button link type="primary" icon="Edit" @click="handleUpdate(scope.row)" v-hasPermi="['system:point:edit']">修改</el-button>
+          <el-button link type="primary" icon="Plus" @click="handleAdd(scope.row)" v-hasPermi="['system:point:add']">新增</el-button>
+          <el-button link type="primary" icon="Delete" @click="handleDelete(scope.row)" v-hasPermi="['system:point:remove']">删除</el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+
+    <!-- 添加或修改检查部位对话框 -->
+    <el-dialog :title="title" v-model="open" width="500px" append-to-body>
+      <el-form ref="pointRef" :model="form" :rules="rules" label-width="80px">
+        <el-row>
+          <el-col :span="24" v-if="form.id">
+            <el-form-item label="部位编码" prop="code" >
+              <el-input v-model="form.code" placeholder="请输入编码" disabled/>
+            </el-form-item>
+          </el-col>
+          <el-col :span="24">
+            <el-form-item label="上级部位" prop="parentId">
+              <el-tree-select
+                v-model="form.parentId"
+                :data="pointOptions"
+                :props="{ value: 'id', label: 'name', children: 'children' }"
+                value-key="id"
+                placeholder="请选择上级部位"
+                check-strictly
+              />
+            </el-form-item>
+          </el-col>
+          <el-col :span="24">
+            <el-form-item label="部位名称" prop="name">
+              <el-input v-model="form.name" placeholder="请输入部位名称" />
+            </el-form-item>
+          </el-col>
+
+          <el-col :span="24">
+            <el-form-item label="显示顺序" prop="orderNum">
+              <el-input v-model="form.orderNum" placeholder="请输入显示顺序" />
+            </el-form-item>
+          </el-col>
+        </el-row>
+      </el-form>
+      <template #footer>
+        <div class="dialog-footer">
+          <el-button type="primary" @click="submitForm">确 定</el-button>
+          <el-button @click="cancel">取 消</el-button>
+        </div>
+      </template>
+    </el-dialog>
+  </div>
+</template>
+
+<script setup name="Point">
+import { listPoint, getPoint, delPoint, addPoint, updatePoint } from "@/api/system/point"
+
+const { proxy } = getCurrentInstance()
+
+const pointList = ref([])
+const pointOptions = ref([])
+const open = ref(false)
+const loading = ref(true)
+const showSearch = ref(true)
+const title = ref("")
+const isExpandAll = ref(true)
+const refreshTable = ref(true)
+
+const data = reactive({
+  form: {},
+  queryParams: {
+    name: null,
+    level: null,
+    orderNum: null,
+    code: null
+  },
+  rules: {
+    name: [
+      { required: true, message: "部位名称不能为空", trigger: "blur" }
+    ],
+    parentId: [
+      { required: true, message: "上级部位不能为空", trigger: "blur" }
+    ],
+    ancestors: [
+      { required: true, message: "祖级列表不能为空", trigger: "blur" }
+    ],
+    level: [
+      { required: true, message: "层级不能为空", trigger: "blur" }
+    ],
+    orderNum: [
+      { required: true, message: "显示顺序不能为空", trigger: "blur" }
+    ],
+  }
+})
+
+const { queryParams, form, rules } = toRefs(data)
+
+/** 查询检查部位列表 */
+function getList() {
+  loading.value = true
+  listPoint(queryParams.value).then(response => {
+    pointList.value = proxy.handleTree(response.data, "id", "parentId")
+    loading.value = false
+  })
+}
+
+/** 查询检查部位下拉树结构 */
+function getTreeselect() {
+  listPoint().then(response => {
+    pointOptions.value = []
+    const data = { id: 0, name: '顶级节点', children: [] }
+    data.children = proxy.handleTree(response.data, "id", "parentId")
+    pointOptions.value.push(data)
+  })
+}
+	
+// 取消按钮
+function cancel() {
+  open.value = false
+  reset()
+}
+
+// 表单重置
+function reset() {
+  form.value = {
+    tenantId: null,
+    revision: null,
+    createBy: null,
+    createTime: null,
+    updateBy: null,
+    updateTime: null,
+    id: null,
+    name: null,
+    parentId: null,
+    ancestors: null,
+    level: null,
+    orderNum: null,
+    code: null
+  }
+  proxy.resetForm("pointRef")
+}
+
+/** 搜索按钮操作 */
+function handleQuery() {
+  getList()
+}
+
+/** 重置按钮操作 */
+function resetQuery() {
+  proxy.resetForm("queryRef")
+  handleQuery()
+}
+
+/** 新增按钮操作 */
+function handleAdd(row) {
+  reset()
+  getTreeselect()
+  if (row != null && row.id) {
+    form.value.parentId = row.id
+  } else {
+    form.value.parentId = 0
+  }
+  open.value = true
+  title.value = "添加检查部位"
+}
+
+/** 展开/折叠操作 */
+function toggleExpandAll() {
+  refreshTable.value = false
+  isExpandAll.value = !isExpandAll.value
+  nextTick(() => {
+    refreshTable.value = true
+  })
+}
+
+/** 修改按钮操作 */
+async function handleUpdate(row) {
+  reset()
+  await getTreeselect()
+  if (row != null) {
+    form.value.parentId = row.parentId
+  }
+  getPoint(row.id).then(response => {
+    form.value = response.data
+    open.value = true
+    title.value = "修改检查部位"
+  })
+}
+
+/** 提交按钮 */
+function submitForm() {
+  proxy.$refs["pointRef"].validate(valid => {
+    if (valid) {
+      if (form.value.id != null) {
+        updatePoint(form.value).then(response => {
+          proxy.$modal.msgSuccess("修改成功")
+          open.value = false
+          getList()
+        })
+      } else {
+        addPoint(form.value).then(response => {
+          proxy.$modal.msgSuccess("新增成功")
+          open.value = false
+          getList()
+        })
+      }
+    }
+  })
+}
+
+/** 删除按钮操作 */
+function handleDelete(row) {
+  console.log("row",row)
+  proxy.$modal.confirm('是否确认删除检查部位编号为"' + row.code + '"的数据项？').then(function() {
+    return delPoint(row.id)
+  }).then(() => {
+    getList()
+    proxy.$modal.msgSuccess("删除成功")
+  }).catch(() => {})
+}
+
+getList()
+</script>

src/views/system/position/index.vue

@@ -0,0 +1,366 @@
+<template>
+  <div class="app-container">
+    <el-form :model="queryParams" ref="queryRef" :inline="true" v-show="showSearch" label-width="68px">
+      <el-form-item label="编码" prop="code">
+        <el-input
+          v-model="queryParams.code"
+          placeholder="请输入编码"
+          clearable
+          @keyup.enter="handleQuery"
+        />
+      </el-form-item>
+      <el-form-item label="名称" prop="name">
+        <el-input
+          v-model="queryParams.name"
+          placeholder="请输入名称"
+          clearable
+          @keyup.enter="handleQuery"
+        />
+      </el-form-item>
+
+      <el-form-item label="位置类型" prop="positionType">
+        <el-select v-model="queryParams.positionType" placeholder="请选择位置类型" @change="onPositionTypeChange" clearable style="width: 150px">
+          <el-option
+            v-for="dict in base_position_type"
+            :key="dict.value"
+            :label="dict.label"
+            :value="dict.value"
+          />
+        </el-select>
+      </el-form-item>
+      <el-form-item label="通道类型" prop="channelType">
+        <el-select v-model="queryParams.channelType" placeholder="请选择通道类型" clearable style="width: 150px">
+          <el-option
+            v-for="dict in base_channel_type"
+            :key="dict.value"
+            :label="dict.label"
+            :value="dict.value"
+          />
+        </el-select>
+      </el-form-item>
+      <el-form-item>
+        <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
+        <el-button icon="Refresh" @click="resetQuery">重置</el-button>
+      </el-form-item>
+    </el-form>
+
+    <el-row :gutter="10" class="mb8">
+      <el-col :span="1.5">
+        <el-button
+          type="primary"
+          plain
+          icon="Plus"
+          @click="handleAdd"
+          v-hasPermi="['system:position:add']"
+        >新增</el-button>
+      </el-col>
+      <el-col :span="1.5">
+        <el-button
+          type="info"
+          plain
+          icon="Sort"
+          @click="toggleExpandAll"
+        >展开/折叠</el-button>
+      </el-col>
+      <right-toolbar v-model:showSearch="showSearch" @queryTable="getList"></right-toolbar>
+    </el-row>
+
+    <el-table
+      v-if="refreshTable"
+      v-loading="loading"
+      :data="positionList"
+      row-key="id"
+      :default-expand-all="isExpandAll"
+      :tree-props="{children: 'children', hasChildren: 'hasChildren'}"
+    >
+      <el-table-column label="编码" align="center" prop="code" />
+      <el-table-column label="名称" align="center" prop="name" />
+      <!-- <el-table-column label="层级" align="center" prop="level" /> -->
+      <el-table-column label="显示顺序" align="center" prop="orderNum" />
+      <el-table-column label="位置类型" align="center" prop="positionType">
+        <template #default="scope">
+          <dict-tag :options="base_position_type" :value="scope.row.positionType"/>
+        </template>
+      </el-table-column>
+      <el-table-column label="通道类型" align="center" prop="channelType">
+        <template #default="scope">
+          <dict-tag :options="base_channel_type" :value="scope.row.channelType"/>
+        </template>
+      </el-table-column>
+      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
+        <template #default="scope">
+          <el-button link type="primary" icon="Edit" @click="handleUpdate(scope.row)" v-hasPermi="['system:position:edit']">修改</el-button>
+          <el-button link type="primary" icon="Plus" @click="handleAdd(scope.row)" v-hasPermi="['system:position:add']">新增</el-button>
+          <el-button link type="primary" icon="Delete" @click="handleDelete(scope.row)" v-hasPermi="['system:position:remove']">删除</el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+
+    <!-- 添加或修改位置对话框 -->
+    <el-dialog :title="title" v-model="open" width="500px" append-to-body>
+      <el-form ref="positionRef" :model="form" :rules="rules" label-width="80px">
+        <el-form-item label="编码" prop="code" v-if="form.id">
+          <el-input v-model="form.code" placeholder="请输入编码"  disabled/>
+        </el-form-item>
+        <el-form-item label="名称" prop="name">
+          <el-input v-model="form.name" placeholder="请输入名称" />
+        </el-form-item>
+        <el-form-item label="上级位置" prop="parentId">
+          <el-tree-select
+            v-model="form.parentId"
+            :data="positionOptions"
+            :props="{ value: 'id', label: 'name', children: 'children' }"
+            value-key="id"
+            placeholder="请选择上级位置"
+            check-strictly
+          />
+        </el-form-item>
+        <!-- <el-form-item label="层级" prop="level">
+          <el-input v-model="form.level" placeholder="请输入层级" />
+        </el-form-item> -->
+        <el-form-item label="显示顺序" prop="orderNum">
+          <el-input v-model="form.orderNum" placeholder="请输入显示顺序" />
+        </el-form-item>
+        <el-form-item label="位置类型" prop="positionType">
+          <el-select v-model="form.positionType" placeholder="请选择位置类型" @change="onPositionTypeChange">
+            <el-option
+              v-for="dict in base_position_type"
+              :key="dict.value"
+              :label="dict.label"
+              :value="dict.value"
+            ></el-option>
+          </el-select>
+        </el-form-item>
+        <el-form-item label="通道类型" prop="channelType" v-if="form.positionType === 'CHANNEL'">
+          <el-select v-model="form.channelType" placeholder="请选择通道类型" >
+            <el-option
+              v-for="dict in base_channel_type"
+              :key="dict.value"
+              :label="dict.label"
+              :value="dict.value"
+            ></el-option>
+          </el-select>
+        </el-form-item>
+
+        <!-- <el-form-item label="位置类型名称" prop="positionTypeDesc">
+          <el-input v-model="form.positionTypeDesc" placeholder="请输入位置类型名称" />
+        </el-form-item>
+        <el-form-item label="通道类型名称" prop="channelTypeDesc">
+          <el-input v-model="form.channelTypeDesc" placeholder="请输入通道类型名称" />
+        </el-form-item> -->
+      </el-form>
+      <template #footer>
+        <div class="dialog-footer">
+          <el-button type="primary" @click="submitForm">确 定</el-button>
+          <el-button @click="cancel">取 消</el-button>
+        </div>
+      </template>
+    </el-dialog>
+  </div>
+</template>
+
+<script setup name="Position">
+import { listPosition, getPosition, delPosition, addPosition, updatePosition } from "@/api/system/position"
+
+const { proxy } = getCurrentInstance()
+const { base_position_type, base_channel_type } = proxy.useDict('base_position_type', 'base_channel_type')
+
+const positionList = ref([])
+const positionOptions = ref([])
+const open = ref(false)
+const loading = ref(true)
+const showSearch = ref(true)
+const title = ref("")
+const isExpandAll = ref(true)
+const refreshTable = ref(true)
+
+const data = reactive({
+  form: {},
+  queryParams: {
+    name: null,
+    level: null,
+    orderNum: null,
+    positionType: null,
+    channelType: null,
+    code: null,
+    positionTypeDesc: null,
+    channelTypeDesc: null
+  },
+  rules: {
+    name: [
+      { required: true, message: "名称不能为空", trigger: "blur" }
+    ],
+    parentId: [
+      { required: true, message: "上级位置不能为空", trigger: "blur" }
+    ],
+    ancestors: [
+      { required: true, message: "祖级列表不能为空", trigger: "blur" }
+    ],
+    level: [
+      { required: true, message: "层级不能为空", trigger: "blur" }
+    ],
+    orderNum: [
+      { required: true, message: "显示顺序不能为空", trigger: "blur" }
+    ],
+    positionType: [
+      { required: true, message: "位置类型不能为空", trigger: "change" }
+    ],
+    channelType: [
+      { required: true, message: "通道类型不能为空", trigger: "change" }
+    ],
+    code: [
+      { required: true, message: "编码不能为空", trigger: "blur" }
+    ],
+    positionTypeDesc: [
+      { required: true, message: "位置类型名称不能为空", trigger: "blur" }
+    ],
+    channelTypeDesc: [
+      { required: true, message: "通道类型名称不能为空", trigger: "blur" }
+    ]
+  }
+})
+
+const { queryParams, form, rules } = toRefs(data)
+
+/** 查询位置列表 */
+function getList() {
+  loading.value = true
+  listPosition(queryParams.value).then(response => {
+    positionList.value = proxy.handleTree(response.data, "id", "parentId")
+    loading.value = false
+  })
+}
+
+/** 查询位置下拉树结构 */
+function getTreeselect() {
+  listPosition().then(response => {
+    positionOptions.value = []
+    const data = { id: 0, name: '顶级节点', children: [] }
+    data.children = proxy.handleTree(response.data, "id", "parentId")
+    positionOptions.value.push(data)
+  })
+}
+	
+// 取消按钮
+function cancel() {
+  open.value = false
+  reset()
+}
+
+// 表单重置
+function reset() {
+  form.value = {
+    tenantId: null,
+    revision: null,
+    createBy: null,
+    createTime: null,
+    updateBy: null,
+    updateTime: null,
+    id: null,
+    name: null,
+    parentId: null,
+    ancestors: null,
+    level: null,
+    orderNum: null,
+    positionType: null,
+    channelType: null,
+    code: null,
+    positionTypeDesc: null,
+    channelTypeDesc: null
+  }
+  proxy.resetForm("positionRef")
+}
+
+/** 搜索按钮操作 */
+function handleQuery() {
+  getList()
+}
+
+/** 重置按钮操作 */
+function resetQuery() {
+  proxy.resetForm("queryRef")
+  handleQuery()
+}
+
+/** 新增按钮操作 */
+function handleAdd(row) {
+  reset()
+  getTreeselect()
+  if (row != null && row.id) {
+    form.value.parentId = row.id
+  } else {
+    form.value.parentId = 0
+  }
+  open.value = true
+  title.value = "添加位置"
+}
+
+/** 展开/折叠操作 */
+function toggleExpandAll() {
+  refreshTable.value = false
+  isExpandAll.value = !isExpandAll.value
+  nextTick(() => {
+    refreshTable.value = true
+  })
+}
+
+/** 修改按钮操作 */
+async function handleUpdate(row) {
+  reset()
+  await getTreeselect()
+  if (row != null) {
+    form.value.parentId = row.parentId
+  }
+  getPosition(row.id).then(response => {
+    form.value = response.data
+    open.value = true
+    title.value = "修改位置"
+  })
+}
+
+/** 提交按钮 */
+function submitForm() {
+  proxy.$refs["positionRef"].validate(valid => {
+    if (valid) {
+      // 类型名称转换
+      form.value.positionTypeDesc = base_position_type.value.find(item => item.value === form.value.positionType).label;
+      if(form.value.channelType){
+        form.value.channelTypeDesc = base_channel_type.value.find(item => item.value === form.value.channelType).label;
+      }
+      if (form.value.id != null) {
+        updatePosition(form.value).then(response => {
+          proxy.$modal.msgSuccess("修改成功")
+          open.value = false
+          getList()
+        })
+      } else {
+        addPosition(form.value).then(response => {
+          proxy.$modal.msgSuccess("新增成功")
+          open.value = false
+          getList()
+        })
+      }
+    }
+  })
+}
+
+function onPositionTypeChange(val) {
+  // 只要不是 CHANNEL，就清空通道类型
+  if (val !== 'CHANNEL') {
+    form.value.channelType = null
+    form.value.channelTypeDesc = ''
+  }
+}
+
+/** 删除按钮操作 */
+function handleDelete(row) {
+  proxy.$modal.confirm('是否确认删除数据项？').then(function() {
+    return delPosition(row.id)
+  }).then(() => {
+    getList()
+    proxy.$modal.msgSuccess("删除成功")
+  }).catch(() => {})
+}
+
+getList()
+</script>

src/views/system/post/index.vue

@@ -0,0 +1,285 @@
+<template>
+  <div class="app-container">
+    <el-form :model="queryParams" ref="queryRef" :inline="true" v-show="showSearch">
+      <el-form-item label="岗位编码" prop="postCode">
+        <el-input
+          v-model="queryParams.postCode"
+          placeholder="请输入岗位编码"
+          clearable
+          style="width: 200px"
+          @keyup.enter="handleQuery" />
+      </el-form-item>
+      <el-form-item label="岗位名称" prop="postName">
+        <el-input
+          v-model="queryParams.postName"
+          placeholder="请输入岗位名称"
+          clearable
+          style="width: 200px"
+          @keyup.enter="handleQuery" />
+      </el-form-item>
+      <el-form-item label="状态" prop="status">
+        <el-select v-model="queryParams.status" placeholder="岗位状态" clearable style="width: 200px">
+          <el-option
+            v-for=" dict in sys_normal_disable "
+            :key="dict.value"
+            :label="dict.label"
+            :value="dict.value" />
+        </el-select>
+      </el-form-item>
+      <el-form-item>
+        <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
+        <el-button icon="Refresh" @click="resetQuery">重置</el-button>
+      </el-form-item>
+    </el-form>
+
+    <el-row :gutter="10" class="mb8">
+      <el-col :span="1.5">
+        <el-button
+          type="primary"
+          plain
+          icon="Plus"
+          @click="handleAdd"
+          v-hasPermi="[ 'system:post:add' ]">新增</el-button>
+      </el-col>
+      <el-col :span="1.5">
+        <el-button
+          type="success"
+          plain
+          icon="Edit"
+          :disabled="single"
+          @click="handleUpdate"
+          v-hasPermi="[ 'system:post:edit' ]">修改</el-button>
+      </el-col>
+      <el-col :span="1.5">
+        <el-button
+          type="danger"
+          plain
+          icon="Delete"
+          :disabled="multiple"
+          @click="handleDelete"
+          v-hasPermi="[ 'system:post:remove' ]">删除</el-button>
+      </el-col>
+      <el-col :span="1.5">
+        <el-button
+          type="warning"
+          plain
+          icon="Download"
+          @click="handleExport"
+          v-hasPermi="[ 'system:post:export' ]">导出</el-button>
+      </el-col>
+      <right-toolbar v-model:showSearch="showSearch" @queryTable="getList"></right-toolbar>
+    </el-row>
+
+    <el-table 
+      v-loading="loading"
+      :data="postList"
+      :tree-props="treeProps"
+      row-key="postId"
+      default-expand-all 
+      @selection-change="handleSelectionChange"
+    >
+      <el-table-column type="selection" width="55" align="center" />
+      <el-table-column label="岗位编号" align="center" prop="postId" />
+      <el-table-column label="岗位编码" align="center" prop="postCode" />
+      <el-table-column label="岗位名称" align="center" prop="postName" />
+      <el-table-column label="岗位排序" align="center" prop="postSort" />
+      <el-table-column label="状态" align="center" prop="status">
+        <template #default=" scope ">
+          <dict-tag :options="sys_normal_disable" :value="scope.row.status" />
+        </template>
+      </el-table-column>
+      <el-table-column label="创建时间" align="center" prop="createTime" width="180">
+        <template #default=" scope ">
+          <span>{{ parseTime( scope.row.createTime ) }}</span>
+        </template>
+      </el-table-column>
+      <el-table-column label="操作" width="180" align="center" class-name="small-padding fixed-width">
+        <template #default=" scope ">
+          <el-button link type="primary" icon="Edit" @click="handleUpdate( scope.row )"
+            v-hasPermi="[ 'system:post:edit' ]">修改</el-button>
+          <el-button link type="primary" icon="Delete" @click="handleDelete( scope.row )"
+            v-hasPermi="[ 'system:post:remove' ]">删除</el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+
+    <!-- 添加或修改岗位对话框 -->
+    <el-dialog :title="title" v-model="open" width="500px" append-to-body>
+      <el-form ref="postRef" :model="form" :rules="rules" label-width="80px">
+        <el-form-item label="上级岗位" prop="parentId">
+          <el-select v-model="form.parentId" placeholder="请选择上级岗位" clearable>
+            <el-option v-for="(post, index) of postList" :key="index" :label="post.postName" :value="post.postId" />
+          </el-select>
+        </el-form-item>
+        <el-form-item label="岗位名称" prop="postName">
+          <el-input v-model="form.postName" placeholder="请输入岗位名称" />
+        </el-form-item>
+        <el-form-item label="岗位编码" prop="postCode">
+          <el-input v-model="form.postCode" placeholder="请输入编码名称" />
+        </el-form-item>
+        <el-form-item label="岗位顺序" prop="postSort">
+          <el-input-number v-model="form.postSort" controls-position="right" :min="0" />
+        </el-form-item>
+        <el-form-item label="岗位状态" prop="status">
+          <el-radio-group v-model="form.status">
+            <el-radio v-for=" dict in sys_normal_disable " :key="dict.value" :value="dict.value">{{ dict.label
+              }}</el-radio>
+          </el-radio-group>
+        </el-form-item>
+        <el-form-item label="备注" prop="remark">
+          <el-input v-model="form.remark" type="textarea" placeholder="请输入内容" />
+        </el-form-item>
+      </el-form>
+      <template #footer>
+        <div class="dialog-footer">
+          <el-button type="primary" @click="submitForm">确 定</el-button>
+          <el-button @click="cancel">取 消</el-button>
+        </div>
+      </template>
+    </el-dialog>
+  </div>
+</template>
+
+<script setup name="Post">
+import { addPost, delPost, getPost, updatePost, listAllTree } from "@/api/system/post"
+
+const { proxy } = getCurrentInstance()
+const { sys_normal_disable } = proxy.useDict("sys_normal_disable")
+
+const postList = ref([])
+const open = ref(false)
+const loading = ref(true)
+const showSearch = ref(true)
+const ids = ref([])
+const single = ref(true)
+const multiple = ref(true)
+const title = ref("")
+
+const data = reactive({
+  form: {},
+  queryParams: {
+    pageNum: 1,
+    pageSize: 10,
+    postCode: undefined,
+    postName: undefined,
+    status: undefined
+  },
+  rules: {
+    postName: [ { required: true, message: "岗位名称不能为空", trigger: "blur" } ],
+    postCode: [ { required: true, message: "岗位编码不能为空", trigger: "blur" } ],
+    postSort: [ { required: true, message: "岗位顺序不能为空", trigger: "blur" } ],
+  }
+})
+
+const { queryParams, form, rules } = toRefs(data)
+
+const treeProps = reactive({
+  checkStrictly: false,
+})
+
+/** 查询岗位列表 */
+function getList () {
+  loading.value = true
+  listAllTree(queryParams.value).then(response => {
+    postList.value = response.data
+    loading.value = false
+  })
+}
+
+/** 取消按钮 */
+function cancel () {
+  open.value = false
+  reset()
+}
+
+/** 表单重置 */
+function reset () {
+  form.value = {
+    postId: undefined,
+    postCode: undefined,
+    postName: undefined,
+    postSort: 0,
+    status: "0",
+    remark: undefined
+  }
+  proxy.resetForm("postRef")
+}
+
+/** 搜索按钮操作 */
+function handleQuery () {
+  queryParams.value.pageNum = 1
+  getList()
+}
+
+/** 重置按钮操作 */
+function resetQuery () {
+  proxy.resetForm("queryRef")
+  handleQuery()
+}
+
+/** 多选框选中数据 */
+function handleSelectionChange (selection) {
+  ids.value = selection.map(item => item.postId)
+  single.value = selection.length != 1
+  multiple.value = !selection.length
+}
+
+/** 新增按钮操作 */
+function handleAdd () {
+  reset()
+  open.value = true
+  title.value = "添加岗位"
+}
+
+/** 修改按钮操作 */
+function handleUpdate (row) {
+  reset()
+  const postId = row.postId || ids.value
+  getPost(postId).then(response => {
+    form.value = response.data
+    open.value = true
+    title.value = "修改岗位"
+  })
+}
+
+/** 提交按钮 */
+function submitForm () {
+  proxy.$refs[ "postRef" ].validate(valid => {
+    if (valid) {
+      if (form.value.postId != undefined) {
+        updatePost(form.value).then(response => {
+          proxy.$modal.msgSuccess("修改成功")
+          open.value = false
+          getList()
+        })
+      } else {
+        addPost(form.value).then(response => {
+          proxy.$modal.msgSuccess("新增成功")
+          open.value = false
+          getList()
+        })
+      }
+    }
+  })
+}
+
+/** 删除按钮操作 */
+function handleDelete (row) {
+  const postIds = row.postId || ids.value
+  proxy.$modal.confirm('是否确认删除数据项？').then(function () {
+    return delPost(postIds)
+  }).then(() => {
+    getList()
+    proxy.$modal.msgSuccess("删除成功")
+  }).catch(() => { })
+}
+
+/** 导出按钮操作 */
+function handleExport () {
+  proxy.download("system/post/export", {
+    ...queryParams.value
+  }, `post_${new Date().getTime()}.xlsx`)
+}
+
+getList()
+</script>

src/views/system/project/index.vue

@@ -0,0 +1,367 @@
+<template>
+  <div class="app-container">
+    <el-form :model="queryParams" ref="queryRef" :inline="true" v-show="showSearch" label-width="100px">
+      <el-form-item label="编码" prop="code">
+        <el-input
+          v-model="queryParams.code"
+          placeholder="请输入编码"
+          clearable
+          @keyup.enter="handleQuery"
+        />
+      </el-form-item>
+      <el-form-item label="检查项目名称" prop="name">
+        <el-input
+          v-model="queryParams.name"
+          placeholder="请输入检查项目名称"
+          clearable
+          @keyup.enter="handleQuery"
+        />
+      </el-form-item>
+
+      <el-form-item label="重要程度" prop="importance">
+        <el-select v-model="queryParams.importance" placeholder="请选择重要程度" clearable style="width: 180px;">
+          <el-option
+            v-for="dict in base_check_importance"
+            :key="dict.value"
+            :label="dict.label"
+            :value="dict.value"
+          />
+        </el-select>
+      </el-form-item>
+      <el-form-item>
+        <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
+        <el-button icon="Refresh" @click="resetQuery">重置</el-button>
+      </el-form-item>
+    </el-form>
+
+    <el-row :gutter="10" class="mb8">
+      <el-col :span="1.5">
+        <el-button
+          type="primary"
+          plain
+          icon="Plus"
+          @click="handleAdd"
+          v-hasPermi="['system:project:add']"
+        >新增</el-button>
+      </el-col>
+      <el-col :span="1.5">
+        <el-button
+          type="success"
+          plain
+          icon="Edit"
+          :disabled="single"
+          @click="handleUpdate"
+          v-hasPermi="['system:project:edit']"
+        >修改</el-button>
+      </el-col>
+      <el-col :span="1.5">
+        <el-button
+          type="danger"
+          plain
+          icon="Delete"
+          :disabled="multiple"
+          @click="handleDelete"
+          v-hasPermi="['system:project:remove']"
+        >删除</el-button>
+      </el-col>
+      <el-col :span="1.5">
+        <el-button
+          type="warning"
+          plain
+          icon="Download"
+          @click="handleExport"
+          v-hasPermi="['system:project:export']"
+        >导出</el-button>
+      </el-col>
+      <right-toolbar v-model:showSearch="showSearch" @queryTable="getList"></right-toolbar>
+    </el-row>
+
+    <el-table v-loading="loading" :data="projectList" @selection-change="handleSelectionChange">
+      <el-table-column type="selection" width="55" align="center" />
+      <el-table-column label="编码" align="center" prop="code" />
+      <el-table-column label="检查项目名称" align="center" prop="name" />
+      <el-table-column label="所属分类" align="center" prop="categoryName" />
+      <!-- <el-table-column label="检查标准" align="center" prop="checkStandard" />
+      <el-table-column label="检查方法" align="center" prop="checkMethod" /> -->
+      <el-table-column label="重要程度" align="center" prop="importance">
+        <template #default="scope">
+          <dict-tag :options="base_check_importance" :value="scope.row.importance"/>
+        </template>
+      </el-table-column>
+      <!-- <el-table-column label="状态" align="center" prop="status" >
+        <template #default="scope">
+          <dict-tag :options="base_check_status" :value="scope.row.status"/>
+        </template>
+      </el-table-column> -->
+      <!-- <el-table-column label="备注" align="center" prop="remark" /> -->
+      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
+        <template #default="scope">
+          <el-button link type="primary" icon="Edit" @click="handleUpdate(scope.row)" v-hasPermi="['system:project:edit']">修改</el-button>
+          <el-button link type="primary" icon="Delete" @click="handleDelete(scope.row)" v-hasPermi="['system:project:remove']">删除</el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+    
+    <pagination
+      v-show="total>0"
+      :total="total"
+      v-model:page="queryParams.pageNum"
+      v-model:limit="queryParams.pageSize"
+      @pagination="getList"
+    />
+
+    <!-- 添加或修改检查项目对话框 -->
+    <el-dialog :title="title" v-model="open" width="500px" append-to-body>
+      <el-form ref="projectRef" :model="form" :rules="rules" label-width="120px">
+        <el-form-item label="编码" prop="code" v-if="form.id">
+          <el-input v-model="form.code" placeholder="请输入编码" disabled/>
+        </el-form-item>
+        <el-form-item label="检查项目名称" prop="name">
+          <el-input v-model="form.name" placeholder="请输入检查项目名称" />
+        </el-form-item>
+        <el-form-item label="所属分类" prop="categoryCode">
+          <el-tree-select v-model="form.categoryCode"  
+            :data="enableCategoryOptions" 
+            :props="{ value: 'code', label: 'label', children: 'children' }" 
+            value-key="id" 
+            placeholder="请选择所属分类" 
+            @node-click="handleNodeClick"
+
+           />
+        </el-form-item>
+        <el-form-item label="检查级别" prop="checkLevel">
+          <el-select v-model="form.checkLevel" placeholder="请选择检查级别" multiple>
+            <el-option v-for="dict in check_level" :key="dict.value" :label="dict.label" :value="dict.value" />
+          </el-select>
+        </el-form-item>
+        <el-form-item label="检查标准" prop="checkStandard">
+          <el-input v-model="form.checkStandard" type="textarea" placeholder="请输入内容" />
+        </el-form-item>
+        <el-form-item label="检查方法" prop="checkMethod">
+          <el-input v-model="form.checkMethod" type="textarea" placeholder="请输入内容" />
+        </el-form-item>
+        <el-form-item label="重要程度" prop="importance">
+          <el-select v-model="form.importance" placeholder="请选择重要程度">
+            <el-option
+              v-for="dict in base_check_importance"
+              :key="dict.value"
+              :label="dict.label"
+              :value="dict.value"
+            ></el-option>
+          </el-select>
+        </el-form-item>
+
+        <el-form-item label="备注" prop="remark">
+          <el-input v-model="form.remark" type="textarea" placeholder="请输入内容" />
+        </el-form-item>
+      </el-form>
+      <template #footer>
+        <div class="dialog-footer">
+          <el-button type="primary" @click="submitForm">确 定</el-button>
+          <el-button @click="cancel">取 消</el-button>
+        </div>
+      </template>
+    </el-dialog>
+  </div>
+</template>
+
+<script setup name="Project">
+import { listProject, getProject, delProject, addProject, updateProject } from "@/api/system/project"
+import { treeSelectByType } from "@/api/system/common"
+
+const { proxy } = getCurrentInstance()
+const { base_check_importance,check_level,check_checked_level } = proxy.useDict('base_check_importance','check_level','check_checked_level')
+
+const projectList = ref([])
+const open = ref(false)
+const loading = ref(true)
+const showSearch = ref(true)
+const ids = ref([])
+const single = ref(true)
+const multiple = ref(true)
+const total = ref(0)
+const title = ref("")
+const base_check_status = ref([{"value": "0","label":"启用"},{"value": "1","label":"停用"}])
+const enableCategoryOptions = ref(undefined)
+
+const data = reactive({
+  form: {},
+  queryParams: {
+    pageNum: 1,
+    pageSize: 10,
+    name: null,
+    categoryCode: null,
+    checkStandard: null,
+    checkMethod: null,
+    importance: null,
+    status: null,
+    categoryName: null,
+    code: null,
+    importanceDesc: null
+  },
+  rules: {
+    name: [
+      { required: true, message: "检查项目名称不能为空", trigger: "blur" }
+    ],
+    categoryCode: [
+      { required: true, message: "分类编码不能为空", trigger: "blur" }
+    ],
+    importance: [
+      { required: true, message: "重要程度不能为空", trigger: "change" }
+    ],
+    status: [
+      { required: true, message: "状态不能为空", trigger: "change" }
+    ],
+    categoryName: [
+      { required: true, message: "分类名称不能为空", trigger: "blur" }
+    ],
+    code: [
+      { required: true, message: "编码不能为空", trigger: "blur" }
+    ],
+    importanceDesc: [
+      { required: true, message: "重要程度名称不能为空", trigger: "blur" }
+    ]
+  }
+})
+
+const { queryParams, form, rules } = toRefs(data)
+
+/** 查询检查项目列表 */
+function getList() {
+  loading.value = true
+  listProject(queryParams.value).then(response => {
+    projectList.value = response.rows
+    total.value = response.total
+    loading.value = false
+  })
+}
+
+// 取消按钮
+function cancel() {
+  open.value = false
+  reset()
+}
+
+// 表单重置
+function reset() {
+  form.value = {
+    tenantId: null,
+    revision: null,
+    createBy: null,
+    createTime: null,
+    updateBy: null,
+    updateTime: null,
+    id: null,
+    name: null,
+    categoryCode: null,
+    checkStandard: null,
+    checkMethod: null,
+    importance: null,
+    status: null,
+    categoryName: null,
+    remark: null,
+    code: null,
+    importanceDesc: null
+  }
+  proxy.resetForm("projectRef")
+}
+
+/** 搜索按钮操作 */
+function handleQuery() {
+  queryParams.value.pageNum = 1
+  getList()
+}
+
+/** 重置按钮操作 */
+function resetQuery() {
+  proxy.resetForm("queryRef")
+  handleQuery()
+}
+
+// 多选框选中数据
+function handleSelectionChange(selection) {
+  ids.value = selection.map(item => item.id)
+  single.value = selection.length != 1
+  multiple.value = !selection.length
+}
+
+/** 新增按钮操作 */
+function handleAdd() {
+  reset()
+  open.value = true
+  title.value = "添加检查项目"
+}
+
+/** 修改按钮操作 */
+function handleUpdate(row) {
+  reset()
+  const _id = row.id || ids.value
+  getProject(_id).then(response => {
+    form.value = {
+      ...response.data,
+      checkLevel: response.data?.checkLevel?.split(","),
+    }
+    open.value = true
+    title.value = "修改检查项目"
+  })
+}
+
+/** 提交按钮 */
+function submitForm() {
+  proxy.$refs["projectRef"].validate(valid => {
+    if (valid) {
+      // 名称转换
+      form.value.importanceDesc = base_check_importance.value.find(item => item.value === form.value.importance).label;
+      // form.value.checkLevelDesc = check_level.value.find(item => item.value === form.value.checkLevel).label;
+      let res = {
+        ...form.value,
+        checkLevel: form.value.checkLevel.join(","),
+      }
+      if (form.value.id != null) {
+        updateProject(res).then(response => {
+          proxy.$modal.msgSuccess("修改成功")
+          open.value = false
+          getList()
+        })
+      } else {
+        addProject(res).then(response => {
+          proxy.$modal.msgSuccess("新增成功")
+          open.value = false
+          getList()
+        })
+      }
+    }
+  })
+}
+
+/** 删除按钮操作 */
+function handleDelete(row) {
+  const _ids = row.id || ids.value
+  proxy.$modal.confirm('是否确认删除数据项？').then(function() {
+    return delProject(_ids)
+  }).then(() => {
+    getList()
+    proxy.$modal.msgSuccess("删除成功")
+  }).catch(() => {})
+}
+
+/** 导出按钮操作 */
+function handleExport() {
+  proxy.download('system/project/export', {
+    ...queryParams.value
+  }, `project_${new Date().getTime()}.xlsx`)
+}
+/** 查询分类下拉树结构 */
+function getCategoryTree() {
+  treeSelectByType("CHECK_CATEGORY",2).then(response => {
+    enableCategoryOptions.value = response.data
+  })
+}
+
+function handleNodeClick(data) {
+  form.value.categoryName=data.label;
+}
+
+getCategoryTree()
+getList()
+</script>

src/views/system/role/authUser.vue

@@ -0,0 +1,179 @@
+
+<template>
+   <div class="app-container">
+      <el-form :model="queryParams" ref="queryRef" v-show="showSearch" :inline="true">
+         <el-form-item label="用户名称" prop="userName">
+            <el-input
+               v-model="queryParams.userName"
+               placeholder="请输入用户名称"
+               clearable
+               style="width: 240px"
+               @keyup.enter="handleQuery"
+            />
+         </el-form-item>
+         <el-form-item label="手机号码" prop="phonenumber">
+            <el-input
+               v-model="queryParams.phonenumber"
+               placeholder="请输入手机号码"
+               clearable
+               style="width: 240px"
+               @keyup.enter="handleQuery"
+            />
+         </el-form-item>
+         <el-form-item>
+            <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
+            <el-button icon="Refresh" @click="resetQuery">重置</el-button>
+         </el-form-item>
+      </el-form>
+
+      <el-row :gutter="10" class="mb8">
+         <el-col :span="1.5">
+            <el-button
+               type="primary"
+               plain
+               icon="Plus"
+               @click="openSelectUser"
+               v-hasPermi="['system:role:add']"
+            >添加用户</el-button>
+         </el-col>
+         <el-col :span="1.5">
+            <el-button
+               type="danger"
+               plain
+               icon="CircleClose"
+               :disabled="multiple"
+               @click="cancelAuthUserAll"
+               v-hasPermi="['system:role:remove']"
+            >批量取消授权</el-button>
+         </el-col>
+         <el-col :span="1.5">
+            <el-button 
+               type="warning" 
+               plain 
+               icon="Close"
+               @click="handleClose"
+            >关闭</el-button>
+         </el-col>
+         <right-toolbar v-model:showSearch="showSearch" @queryTable="getList"></right-toolbar>
+      </el-row>
+
+      <el-table v-loading="loading" :data="userList" @selection-change="handleSelectionChange">
+         <el-table-column type="selection" width="55" align="center" />
+         <el-table-column label="用户名称" prop="userName" :show-overflow-tooltip="true" />
+         <el-table-column label="用户昵称" prop="nickName" :show-overflow-tooltip="true" />
+         <el-table-column label="邮箱" prop="email" :show-overflow-tooltip="true" />
+         <el-table-column label="手机" prop="phonenumber" :show-overflow-tooltip="true" />
+         <el-table-column label="状态" align="center" prop="status">
+            <template #default="scope">
+               <dict-tag :options="sys_normal_disable" :value="scope.row.status" />
+            </template>
+         </el-table-column>
+         <el-table-column label="创建时间" align="center" prop="createTime" width="180">
+            <template #default="scope">
+               <span>{{ parseTime(scope.row.createTime) }}</span>
+            </template>
+         </el-table-column>
+         <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
+            <template #default="scope">
+               <el-button link type="primary" icon="CircleClose" @click="cancelAuthUser(scope.row)" v-hasPermi="['system:role:remove']">取消授权</el-button>
+            </template>
+         </el-table-column>
+      </el-table>
+
+      <pagination
+         v-show="total > 0"
+         :total="total"
+         v-model:page="queryParams.pageNum"
+         v-model:limit="queryParams.pageSize"
+         @pagination="getList"
+      />
+      <select-user ref="selectRef" :roleId="queryParams.roleId" @ok="handleQuery" />
+   </div>
+</template>
+
+<script setup name="AuthUser">
+import selectUser from "./selectUser"
+import { allocatedUserList, authUserCancel, authUserCancelAll } from "@/api/system/role"
+
+const route = useRoute()
+const { proxy } = getCurrentInstance()
+const { sys_normal_disable } = proxy.useDict("sys_normal_disable")
+
+const userList = ref([])
+const loading = ref(true)
+const showSearch = ref(true)
+const multiple = ref(true)
+const total = ref(0)
+const userIds = ref([])
+
+const queryParams = reactive({
+  pageNum: 1,
+  pageSize: 10,
+  roleId: route.params.roleId,
+  userName: undefined,
+  phonenumber: undefined,
+})
+
+/** 查询授权用户列表 */
+function getList() {
+  loading.value = true
+  allocatedUserList(queryParams).then(response => {
+    userList.value = response.rows
+    total.value = response.total
+    loading.value = false
+  })
+}
+
+/** 返回按钮 */
+function handleClose() {
+  const obj = { path: "/system/role" }
+  proxy.$tab.closeOpenPage(obj)
+}
+
+/** 搜索按钮操作 */
+function handleQuery() {
+  queryParams.pageNum = 1
+  getList()
+}
+
+/** 重置按钮操作 */
+function resetQuery() {
+  proxy.resetForm("queryRef")
+  handleQuery()
+}
+
+/** 多选框选中数据 */
+function handleSelectionChange(selection) {
+  userIds.value = selection.map(item => item.userId)
+  multiple.value = !selection.length
+}
+
+/** 打开授权用户表弹窗 */
+function openSelectUser() {
+  proxy.$refs["selectRef"].show()
+}
+
+/** 取消授权按钮操作 */
+function cancelAuthUser(row) {
+  proxy.$modal.confirm('确认要取消该用户"' + row.userName + '"角色吗？').then(function () {
+    return authUserCancel({ userId: row.userId, roleId: queryParams.roleId })
+  }).then(() => {
+    getList()
+    proxy.$modal.msgSuccess("取消授权成功")
+  }).catch(() => {})
+}
+
+/** 批量取消授权按钮操作 */
+function cancelAuthUserAll(row) {
+  const roleId = queryParams.roleId
+  const uIds = userIds.value.join(",")
+  proxy.$modal.confirm("是否取消选中用户授权数据项?").then(function () {
+    return authUserCancelAll({ roleId: roleId, userIds: uIds })
+  }).then(() => {
+    getList()
+    proxy.$modal.msgSuccess("取消授权成功")
+  }).catch(() => {})
+}
+
+getList()
+</script>

src/views/system/role/index.vue

@@ -0,0 +1,584 @@
+<template>
+   <div class="app-container">
+      <el-form :model="queryParams" ref="queryRef" v-show="showSearch" :inline="true" label-width="68px">
+         <el-form-item label="角色名称" prop="roleName">
+            <el-input
+               v-model="queryParams.roleName"
+               placeholder="请输入角色名称"
+               clearable
+               style="width: 240px"
+               @keyup.enter="handleQuery"
+            />
+         </el-form-item>
+         <el-form-item label="权限字符" prop="roleKey">
+            <el-input
+               v-model="queryParams.roleKey"
+               placeholder="请输入权限字符"
+               clearable
+               style="width: 240px"
+               @keyup.enter="handleQuery"
+            />
+         </el-form-item>
+         <el-form-item label="状态" prop="status">
+            <el-select
+               v-model="queryParams.status"
+               placeholder="角色状态"
+               clearable
+               style="width: 240px"
+            >
+               <el-option
+                  v-for="dict in sys_normal_disable"
+                  :key="dict.value"
+                  :label="dict.label"
+                  :value="dict.value"
+               />
+            </el-select>
+         </el-form-item>
+         <el-form-item label="创建时间" style="width: 308px">
+            <el-date-picker
+               v-model="dateRange"
+               value-format="YYYY-MM-DD"
+               type="daterange"
+               range-separator="-"
+               start-placeholder="开始日期"
+               end-placeholder="结束日期"
+            ></el-date-picker>
+         </el-form-item>
+         <el-form-item>
+            <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
+            <el-button icon="Refresh" @click="resetQuery">重置</el-button>
+         </el-form-item>
+      </el-form>
+      <el-row :gutter="10" class="mb8">
+         <el-col :span="1.5">
+            <el-button
+               type="primary"
+               plain
+               icon="Plus"
+               @click="handleAdd"
+               v-hasPermi="['system:role:add']"
+            >新增</el-button>
+         </el-col>
+         <el-col :span="1.5">
+            <el-button
+               type="success"
+               plain
+               icon="Edit"
+               :disabled="single"
+               @click="handleUpdate"
+               v-hasPermi="['system:role:edit']"
+            >修改</el-button>
+         </el-col>
+         <el-col :span="1.5">
+            <el-button
+               type="danger"
+               plain
+               icon="Delete"
+               :disabled="multiple"
+               @click="handleDelete"
+               v-hasPermi="['system:role:remove']"
+            >删除</el-button>
+         </el-col>
+         <el-col :span="1.5">
+            <el-button
+               type="warning"
+               plain
+               icon="Download"
+               @click="handleExport"
+               v-hasPermi="['system:role:export']"
+            >导出</el-button>
+         </el-col>
+         <right-toolbar v-model:showSearch="showSearch" @queryTable="getList"></right-toolbar>
+      </el-row>
+
+      <!-- 表格数据 -->
+      <el-table v-loading="loading" :data="roleList" @selection-change="handleSelectionChange">
+         <el-table-column type="selection" width="55" align="center" />
+         <el-table-column label="角色编号" prop="roleId" width="120" />
+         <el-table-column label="角色名称" prop="roleName" :show-overflow-tooltip="true" width="150" />
+         <el-table-column label="权限字符" prop="roleKey" :show-overflow-tooltip="true" width="150" />
+         <el-table-column label="显示顺序" prop="roleSort" width="100" />
+         <el-table-column label="状态" align="center" width="100">
+            <template #default="scope">
+               <el-switch
+                  v-model="scope.row.status"
+                  active-value="0"
+                  inactive-value="1"
+                  @change="handleStatusChange(scope.row)"
+               ></el-switch>
+            </template>
+         </el-table-column>
+         <el-table-column label="创建时间" align="center" prop="createTime">
+            <template #default="scope">
+               <span>{{ parseTime(scope.row.createTime) }}</span>
+            </template>
+         </el-table-column>
+         <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
+            <template #default="scope">
+              <el-tooltip content="修改" placement="top" v-if="scope.row.roleId !== 1">
+                <el-button link type="primary" icon="Edit" @click="handleUpdate(scope.row)" v-hasPermi="['system:role:edit']"></el-button>
+              </el-tooltip>
+              <el-tooltip content="删除" placement="top" v-if="scope.row.roleId !== 1">
+                <el-button link type="primary" icon="Delete" @click="handleDelete(scope.row)" v-hasPermi="['system:role:remove']"></el-button>
+              </el-tooltip>
+              <el-tooltip content="数据权限" placement="top" v-if="scope.row.roleId !== 1">
+                <el-button link type="primary" icon="CircleCheck" @click="handleDataScope(scope.row)" v-hasPermi="['system:role:edit']"></el-button>
+              </el-tooltip>
+              <el-tooltip content="分配用户" placement="top" v-if="scope.row.roleId !== 1">
+                <el-button link type="primary" icon="User" @click="handleAuthUser(scope.row)" v-hasPermi="['system:role:edit']"></el-button>
+              </el-tooltip>
+            </template>
+         </el-table-column>
+      </el-table>
+
+      <pagination
+         v-show="total > 0"
+         :total="total"
+         v-model:page="queryParams.pageNum"
+         v-model:limit="queryParams.pageSize"
+         @pagination="getList"
+      />
+
+      <!-- 添加或修改角色配置对话框 -->
+      <el-dialog :title="title" v-model="open" width="500px" append-to-body>
+         <el-form ref="roleRef" :model="form" :rules="rules" label-width="100px">
+            <el-form-item label="角色名称" prop="roleName">
+               <el-input v-model="form.roleName" placeholder="请输入角色名称" />
+            </el-form-item>
+            <el-form-item prop="roleKey">
+               <template #label>
+                  <span>
+                     <el-tooltip content="控制器中定义的权限字符，如：@PreAuthorize(`@ss.hasRole('admin')`)" placement="top">
+                        <el-icon><question-filled /></el-icon>
+                     </el-tooltip>
+                     权限字符
+                  </span>
+               </template>
+               <el-input v-model="form.roleKey" placeholder="请输入权限字符" />
+            </el-form-item>
+            <el-form-item label="角色顺序" prop="roleSort">
+               <el-input-number v-model="form.roleSort" controls-position="right" :min="0" />
+            </el-form-item>
+            <el-form-item label="状态">
+               <el-radio-group v-model="form.status">
+                  <el-radio
+                     v-for="dict in sys_normal_disable"
+                     :key="dict.value"
+                     :value="dict.value"
+                  >{{ dict.label }}</el-radio>
+               </el-radio-group>
+            </el-form-item>
+            <el-form-item label="菜单权限">
+               <el-checkbox v-model="menuExpand" @change="handleCheckedTreeExpand($event, 'menu')">展开/折叠</el-checkbox>
+               <el-checkbox v-model="menuNodeAll" @change="handleCheckedTreeNodeAll($event, 'menu')">全选/全不选</el-checkbox>
+               <el-checkbox v-model="form.menuCheckStrictly" @change="handleCheckedTreeConnect($event, 'menu')">父子联动</el-checkbox>
+               <el-tree
+                  class="tree-border"
+                  :data="menuOptions"
+                  show-checkbox
+                  ref="menuRef"
+                  node-key="id"
+                  :check-strictly="!form.menuCheckStrictly"
+                  empty-text="加载中，请稍候"
+                  :props="{ label: 'label', children: 'children' }"
+               ></el-tree>
+            </el-form-item>
+            <el-form-item label="备注">
+               <el-input v-model="form.remark" type="textarea" placeholder="请输入内容"></el-input>
+            </el-form-item>
+         </el-form>
+         <template #footer>
+            <div class="dialog-footer">
+               <el-button type="primary" @click="submitForm">确 定</el-button>
+               <el-button @click="cancel">取 消</el-button>
+            </div>
+         </template>
+      </el-dialog>
+
+      <!-- 分配角色数据权限对话框 -->
+      <el-dialog :title="title" v-model="openDataScope" width="500px" append-to-body>
+         <el-form :model="form" label-width="80px">
+            <el-form-item label="角色名称">
+               <el-input v-model="form.roleName" :disabled="true" />
+            </el-form-item>
+            <el-form-item label="权限字符">
+               <el-input v-model="form.roleKey" :disabled="true" />
+            </el-form-item>
+            <el-form-item label="权限范围">
+               <el-select v-model="form.dataScope" @change="dataScopeSelectChange">
+                  <el-option
+                     v-for="item in dataScopeOptions"
+                     :key="item.value"
+                     :label="item.label"
+                     :value="item.value"
+                  ></el-option>
+               </el-select>
+            </el-form-item>
+            <el-form-item label="数据权限" v-show="form.dataScope == 2">
+               <el-checkbox v-model="deptExpand" @change="handleCheckedTreeExpand($event, 'dept')">展开/折叠</el-checkbox>
+               <el-checkbox v-model="deptNodeAll" @change="handleCheckedTreeNodeAll($event, 'dept')">全选/全不选</el-checkbox>
+               <el-checkbox v-model="form.deptCheckStrictly" @change="handleCheckedTreeConnect($event, 'dept')">父子联动</el-checkbox>
+               <el-tree
+                  class="tree-border"
+                  :data="deptOptions"
+                  show-checkbox
+                  default-expand-all
+                  ref="deptRef"
+                  node-key="id"
+                  :check-strictly="!form.deptCheckStrictly"
+                  empty-text="加载中，请稍候"
+                  :props="{ label: 'label', children: 'children' }"
+               ></el-tree>
+            </el-form-item>
+         </el-form>
+         <template #footer>
+            <div class="dialog-footer">
+               <el-button type="primary" @click="submitDataScope">确 定</el-button>
+               <el-button @click="cancelDataScope">取 消</el-button>
+            </div>
+         </template>
+      </el-dialog>
+   </div>
+</template>
+
+<script setup name="Role">
+import { addRole, changeRoleStatus, dataScope, delRole, getRole, listRole, updateRole, deptTreeSelect } from "@/api/system/role"
+import { roleMenuTreeselect, treeselect as menuTreeselect } from "@/api/system/menu"
+
+const router = useRouter()
+const { proxy } = getCurrentInstance()
+const { sys_normal_disable } = proxy.useDict("sys_normal_disable")
+
+const roleList = ref([])
+const open = ref(false)
+const loading = ref(true)
+const showSearch = ref(true)
+const ids = ref([])
+const single = ref(true)
+const multiple = ref(true)
+const total = ref(0)
+const title = ref("")
+const dateRange = ref([])
+const menuOptions = ref([])
+const menuExpand = ref(false)
+const menuNodeAll = ref(false)
+const deptExpand = ref(true)
+const deptNodeAll = ref(false)
+const deptOptions = ref([])
+const openDataScope = ref(false)
+const menuRef = ref(null)
+const deptRef = ref(null)
+
+/** 数据范围选项*/
+const dataScopeOptions = ref([
+  { value: "1", label: "全部数据权限" },
+  { value: "2", label: "自定数据权限" },
+  { value: "3", label: "本部门数据权限" },
+  { value: "4", label: "本部门及以下数据权限" },
+  { value: "5", label: "仅本人数据权限" }
+])
+
+const data = reactive({
+  form: {},
+  queryParams: {
+    pageNum: 1,
+    pageSize: 10,
+    roleName: undefined,
+    roleKey: undefined,
+    status: undefined
+  },
+  rules: {
+    roleName: [{ required: true, message: "角色名称不能为空", trigger: "blur" }],
+    roleKey: [{ required: true, message: "权限字符不能为空", trigger: "blur" }],
+    roleSort: [{ required: true, message: "角色顺序不能为空", trigger: "blur" }]
+  },
+})
+
+const { queryParams, form, rules } = toRefs(data)
+
+/** 查询角色列表 */
+function getList() {
+  loading.value = true
+  listRole(proxy.addDateRange(queryParams.value, dateRange.value)).then(response => {
+    roleList.value = response.rows
+    total.value = response.total
+    loading.value = false
+  })
+}
+
+/** 搜索按钮操作 */
+function handleQuery() {
+  queryParams.value.pageNum = 1
+  getList()
+}
+
+/** 重置按钮操作 */
+function resetQuery() {
+  dateRange.value = []
+  proxy.resetForm("queryRef")
+  handleQuery()
+}
+
+/** 删除按钮操作 */
+function handleDelete(row) {
+  const roleIds = row.roleId || ids.value
+  proxy.$modal.confirm('是否确认删除角色编号为"' + roleIds + '"的数据项?').then(function () {
+    return delRole(roleIds)
+  }).then(() => {
+    getList()
+    proxy.$modal.msgSuccess("删除成功")
+  }).catch(() => {})
+}
+
+/** 导出按钮操作 */
+function handleExport() {
+  proxy.download("system/role/export", {
+    ...queryParams.value,
+  }, `role_${new Date().getTime()}.xlsx`)
+}
+
+/** 多选框选中数据 */
+function handleSelectionChange(selection) {
+  ids.value = selection.map(item => item.roleId)
+  single.value = selection.length != 1
+  multiple.value = !selection.length
+}
+
+/** 角色状态修改 */
+function handleStatusChange(row) {
+  let text = row.status === "0" ? "启用" : "停用"
+  proxy.$modal.confirm('确认要"' + text + '""' + row.roleName + '"角色吗?').then(function () {
+    return changeRoleStatus(row.roleId, row.status)
+  }).then(() => {
+    proxy.$modal.msgSuccess(text + "成功")
+  }).catch(function () {
+    row.status = row.status === "0" ? "1" : "0"
+  })
+}
+
+/** 更多操作 */
+function handleCommand(command, row) {
+  switch (command) {
+    case "handleDataScope":
+      handleDataScope(row)
+      break
+    case "handleAuthUser":
+      handleAuthUser(row)
+      break
+    default:
+      break
+  }
+}
+
+/** 分配用户 */
+function handleAuthUser(row) {
+  router.push("/system/role-auth/user/" + row.roleId)
+}
+
+/** 查询菜单树结构 */
+function getMenuTreeselect() {
+  menuTreeselect().then(response => {
+    menuOptions.value = response.data
+  })
+}
+
+/** 所有部门节点数据 */
+function getDeptAllCheckedKeys() {
+  // 目前被选中的部门节点
+  let checkedKeys = deptRef.value.getCheckedKeys()
+  // 半选中的部门节点
+  let halfCheckedKeys = deptRef.value.getHalfCheckedKeys()
+  checkedKeys.unshift.apply(checkedKeys, halfCheckedKeys)
+  return checkedKeys
+}
+
+/** 重置新增的表单以及其他数据  */
+function reset() {
+  if (menuRef.value != undefined) {
+    menuRef.value.setCheckedKeys([])
+  }
+  menuExpand.value = false
+  menuNodeAll.value = false
+  deptExpand.value = true
+  deptNodeAll.value = false
+  form.value = {
+    roleId: undefined,
+    roleName: undefined,
+    roleKey: undefined,
+    roleSort: 0,
+    status: "0",
+    menuIds: [],
+    deptIds: [],
+    menuCheckStrictly: true,
+    deptCheckStrictly: true,
+    remark: undefined
+  }
+  proxy.resetForm("roleRef")
+}
+
+/** 添加角色 */
+function handleAdd() {
+  reset()
+  getMenuTreeselect()
+  open.value = true
+  title.value = "添加角色"
+}
+
+/** 修改角色 */
+function handleUpdate(row) {
+  reset()
+  const roleId = row.roleId || ids.value
+  const roleMenu = getRoleMenuTreeselect(roleId)
+  getRole(roleId).then(response => {
+    form.value = response.data
+    form.value.roleSort = Number(form.value.roleSort)
+    open.value = true
+    nextTick(() => {
+      roleMenu.then((res) => {
+        let checkedKeys = res.checkedKeys
+        checkedKeys.forEach((v) => {
+          nextTick(() => {
+            menuRef.value.setChecked(v, true, false)
+          })
+        })
+      })
+    })
+  })
+  title.value = "修改角色"
+}
+
+/** 根据角色ID查询菜单树结构 */
+function getRoleMenuTreeselect(roleId) {
+  return roleMenuTreeselect(roleId).then(response => {
+    menuOptions.value = response.menus
+    return response
+  })
+}
+
+/** 根据角色ID查询部门树结构 */
+function getDeptTree(roleId) {
+  return deptTreeSelect(roleId).then(response => {
+    deptOptions.value = response.depts
+    return response
+  })
+}
+
+/** 树权限（展开/折叠）*/
+function handleCheckedTreeExpand(value, type) {
+  if (type == "menu") {
+    let treeList = menuOptions.value
+    for (let i = 0; i < treeList.length; i++) {
+      menuRef.value.store.nodesMap[treeList[i].id].expanded = value
+    }
+  } else if (type == "dept") {
+    let treeList = deptOptions.value
+    for (let i = 0; i < treeList.length; i++) {
+      deptRef.value.store.nodesMap[treeList[i].id].expanded = value
+    }
+  }
+}
+
+/** 树权限（全选/全不选） */
+function handleCheckedTreeNodeAll(value, type) {
+  if (type == "menu") {
+    menuRef.value.setCheckedNodes(value ? menuOptions.value : [])
+  } else if (type == "dept") {
+    deptRef.value.setCheckedNodes(value ? deptOptions.value : [])
+  }
+}
+
+/** 树权限（父子联动） */
+function handleCheckedTreeConnect(value, type) {
+  if (type == "menu") {
+    form.value.menuCheckStrictly = value ? true : false
+  } else if (type == "dept") {
+    form.value.deptCheckStrictly = value ? true : false
+  }
+}
+
+/** 所有菜单节点数据 */
+function getMenuAllCheckedKeys() {
+  // 目前被选中的菜单节点
+  let checkedKeys = menuRef.value.getCheckedKeys()
+  // 半选中的菜单节点
+  let halfCheckedKeys = menuRef.value.getHalfCheckedKeys()
+  checkedKeys.unshift.apply(checkedKeys, halfCheckedKeys)
+  return checkedKeys
+}
+
+/** 提交按钮 */
+function submitForm() {
+  proxy.$refs["roleRef"].validate(valid => {
+    if (valid) {
+      if (form.value.roleId != undefined) {
+        form.value.menuIds = getMenuAllCheckedKeys()
+        updateRole(form.value).then(response => {
+          proxy.$modal.msgSuccess("修改成功")
+          open.value = false
+          getList()
+        })
+      } else {
+        form.value.menuIds = getMenuAllCheckedKeys()
+        addRole(form.value).then(response => {
+          proxy.$modal.msgSuccess("新增成功")
+          open.value = false
+          getList()
+        })
+      }
+    }
+  })
+}
+
+/** 取消按钮 */
+function cancel() {
+  open.value = false
+  reset()
+}
+
+/** 选择角色权限范围触发 */
+function dataScopeSelectChange(value) {
+  if (value !== "2") {
+    deptRef.value.setCheckedKeys([])
+  }
+}
+
+/** 分配数据权限操作 */
+function handleDataScope(row) {
+  reset()
+  const deptTreeSelect = getDeptTree(row.roleId)
+  getRole(row.roleId).then(response => {
+    form.value = response.data
+    openDataScope.value = true
+    nextTick(() => {
+      deptTreeSelect.then(res => {
+        nextTick(() => {
+          if (deptRef.value) {
+            deptRef.value.setCheckedKeys(res.checkedKeys)
+          }
+        })
+      })
+    })
+  })
+  title.value = "分配数据权限"
+}
+
+/** 提交按钮（数据权限） */
+function submitDataScope() {
+  if (form.value.roleId != undefined) {
+    form.value.deptIds = getDeptAllCheckedKeys()
+    dataScope(form.value).then(response => {
+      proxy.$modal.msgSuccess("修改成功")
+      openDataScope.value = false
+      getList()
+    })
+  }
+}
+
+/** 取消按钮（数据权限）*/
+function cancelDataScope() {
+  openDataScope.value = false
+  reset()
+}
+
+getList()
+</script>

src/views/system/role/selectUser.vue

@@ -0,0 +1,144 @@
+<template>
+   <!-- 授权用户 -->
+   <el-dialog title="选择用户" v-model="visible" width="800px" top="5vh" append-to-body>
+      <el-form :model="queryParams" ref="queryRef" :inline="true">
+         <el-form-item label="用户名称" prop="userName">
+            <el-input
+               v-model="queryParams.userName"
+               placeholder="请输入用户名称"
+               clearable
+               style="width: 180px"
+               @keyup.enter="handleQuery"
+            />
+         </el-form-item>
+         <el-form-item label="手机号码" prop="phonenumber">
+            <el-input
+               v-model="queryParams.phonenumber"
+               placeholder="请输入手机号码"
+               clearable
+               style="width: 180px"
+               @keyup.enter="handleQuery"
+            />
+         </el-form-item>
+         <el-form-item>
+            <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
+            <el-button icon="Refresh" @click="resetQuery">重置</el-button>
+         </el-form-item>
+      </el-form>
+      <el-row>
+         <el-table @row-click="clickRow" ref="refTable" :data="userList" @selection-change="handleSelectionChange" height="260px">
+            <el-table-column type="selection" width="55"></el-table-column>
+            <el-table-column label="用户名称" prop="userName" :show-overflow-tooltip="true" />
+            <el-table-column label="用户昵称" prop="nickName" :show-overflow-tooltip="true" />
+            <el-table-column label="邮箱" prop="email" :show-overflow-tooltip="true" />
+            <el-table-column label="手机" prop="phonenumber" :show-overflow-tooltip="true" />
+            <el-table-column label="状态" align="center" prop="status">
+               <template #default="scope">
+                  <dict-tag :options="sys_normal_disable" :value="scope.row.status" />
+               </template>
+            </el-table-column>
+            <el-table-column label="创建时间" align="center" prop="createTime" width="180">
+               <template #default="scope">
+                  <span>{{ parseTime(scope.row.createTime) }}</span>
+               </template>
+            </el-table-column>
+         </el-table>
+         <pagination
+            v-show="total > 0"
+            :total="total"
+            v-model:page="queryParams.pageNum"
+            v-model:limit="queryParams.pageSize"
+            @pagination="getList"
+         />
+      </el-row>
+      <template #footer>
+         <div class="dialog-footer">
+            <el-button type="primary" @click="handleSelectUser">确 定</el-button>
+            <el-button @click="visible = false">取 消</el-button>
+         </div>
+      </template>
+   </el-dialog>
+</template>
+
+<script setup name="SelectUser">
+import { authUserSelectAll, unallocatedUserList } from "@/api/system/role"
+
+const props = defineProps({
+  roleId: {
+    type: [Number, String]
+  }
+})
+
+const { proxy } = getCurrentInstance()
+const { sys_normal_disable } = proxy.useDict("sys_normal_disable")
+
+const userList = ref([])
+const visible = ref(false)
+const total = ref(0)
+const userIds = ref([])
+
+const queryParams = reactive({
+  pageNum: 1,
+  pageSize: 10,
+  roleId: undefined,
+  userName: undefined,
+  phonenumber: undefined
+})
+
+// 显示弹框
+function show() {
+  queryParams.roleId = props.roleId
+  getList()
+  visible.value = true
+}
+
+/**选择行 */
+function clickRow(row) {
+  proxy.$refs["refTable"].toggleRowSelection(row)
+}
+
+// 多选框选中数据
+function handleSelectionChange(selection) {
+  userIds.value = selection.map(item => item.userId)
+}
+
+// 查询表数据
+function getList() {
+  unallocatedUserList(queryParams).then(res => {
+    userList.value = res.rows
+    total.value = res.total
+  })
+}
+
+/** 搜索按钮操作 */
+function handleQuery() {
+  queryParams.pageNum = 1
+  getList()
+}
+
+/** 重置按钮操作 */
+function resetQuery() {
+  proxy.resetForm("queryRef")
+  handleQuery()
+}
+
+const emit = defineEmits(["ok"])
+/** 选择授权用户操作 */
+function handleSelectUser() {
+  const roleId = queryParams.roleId
+  const uIds = userIds.value.join(",")
+  if (uIds == "") {
+    proxy.$modal.msgError("请选择要分配的用户")
+    return
+  }
+  authUserSelectAll({ roleId: roleId, userIds: uIds }).then(res => {
+    proxy.$modal.msgSuccess(res.msg)
+    visible.value = false
+    emit("ok")
+  })
+}
+
+defineExpose({
+  show,
+})
+</script>

src/views/system/sql/index.vue

@@ -0,0 +1,276 @@
+<template>
+  <div class="app-container">
+    <el-form :model="queryParams" ref="queryRef" :inline="true" v-show="showSearch" label-width="68px">
+      <el-form-item label="sql key" prop="sqlKey">
+        <el-input
+          v-model="queryParams.sqlKey"
+          placeholder="请输入sql key"
+          clearable
+          @keyup.enter="handleQuery"
+        />
+      </el-form-item>
+      <el-form-item>
+        <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
+        <el-button icon="Refresh" @click="resetQuery">重置</el-button>
+      </el-form-item>
+    </el-form>
+
+    <el-row :gutter="10" class="mb8">
+      <el-col :span="1.5">
+        <el-button
+          type="primary"
+          plain
+          icon="Plus"
+          @click="handleAdd"
+          v-hasPermi="['system:sql:add']"
+        >新增</el-button>
+      </el-col>
+      <el-col :span="1.5">
+        <el-button
+          type="success"
+          plain
+          icon="Edit"
+          :disabled="single"
+          @click="handleUpdate"
+          v-hasPermi="['system:sql:edit']"
+        >修改</el-button>
+      </el-col>
+      <el-col :span="1.5">
+        <el-button
+          type="danger"
+          plain
+          icon="Delete"
+          :disabled="multiple"
+          @click="handleDelete"
+          v-hasPermi="['system:sql:remove']"
+        >删除</el-button>
+      </el-col>
+      <el-col :span="1.5">
+        <el-button
+          type="warning"
+          plain
+          icon="Download"
+          @click="handleExport"
+          v-hasPermi="['system:sql:export']"
+        >导出</el-button>
+      </el-col>
+      <right-toolbar v-model:showSearch="showSearch" @queryTable="getList"></right-toolbar>
+    </el-row>
+
+    <el-table v-loading="loading" :data="sqlList" @selection-change="handleSelectionChange">
+      <el-table-column type="selection" width="55" align="center" />
+      <!-- <el-table-column label="id" align="center" prop="id" /> -->
+      <el-table-column label="sql key" align="center" prop="sqlKey" />
+      <!-- <el-table-column label="内容" align="center" prop="sqlContent" /> -->
+      <el-table-column label="说明" align="center" prop="description" />
+      <el-table-column label="备注" align="center" prop="remark" />
+      <!-- <el-table-column label="参数配置" align="center" prop="paramsConfig" /> -->
+      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
+        <template #default="scope">
+          <el-button link type="primary" icon="Edit" @click="handleUpdate(scope.row)" v-hasPermi="['system:sql:edit']">修改</el-button>
+          <el-button link type="primary" icon="Delete" @click="handleDelete(scope.row)" v-hasPermi="['system:sql:remove']">删除</el-button>
+          <el-button link type="primary" icon="Search" @click="executeSql(scope.row)" >执行</el-button>
+
+          
+        </template>
+      </el-table-column>
+    </el-table>
+    
+    <pagination
+      v-show="total>0"
+      :total="total"
+      v-model:page="queryParams.pageNum"
+      v-model:limit="queryParams.pageSize"
+      @pagination="getList"
+    />
+
+    <!-- 添加或修改动态sql执行config对话框 -->
+    <el-dialog :title="title" v-model="open" width="60%" append-to-body>
+      <el-form ref="sqlRef" :model="form" :rules="rules" label-width="80px">
+        <el-form-item label="sql key" prop="sqlKey">
+          <el-input v-model="form.sqlKey" placeholder="请输入sql key" />
+        </el-form-item>
+        <el-form-item label="内容" prop="sqlContent">
+           <SqlEdit ref="sqlEdit" v-model="form.sqlContent" />
+        </el-form-item>
+        <el-form-item label="说明" prop="description">
+          <el-input v-model="form.description" type="textarea" placeholder="请输入内容" />
+        </el-form-item>
+        <el-form-item label="备注" prop="remark">
+          <el-input v-model="form.remark" type="textarea" placeholder="请输入内容" />
+        </el-form-item>
+        <el-form-item label="参数配置" prop="paramsConfig">
+          <el-input v-model="form.paramsConfig" type="textarea" placeholder="请输入内容" />
+        </el-form-item>
+      </el-form>
+      <template #footer>
+        <div class="dialog-footer">
+          <el-button type="primary" @click="submitForm">确 定</el-button>
+          <el-button @click="cancel">取 消</el-button>
+        </div>
+      </template>
+    </el-dialog>
+  </div>
+</template>
+
+<script setup name="Sql">
+import { listSql, getSql, delSql, addSql, updateSql, executeSqlByKeyAndParam } from "@/api/system/sql"
+
+const { proxy } = getCurrentInstance()
+
+const sqlList = ref([])
+const open = ref(false)
+const loading = ref(true)
+const showSearch = ref(true)
+const ids = ref([])
+const single = ref(true)
+const multiple = ref(true)
+const total = ref(0)
+const title = ref("")
+
+const data = reactive({
+  form: {},
+  queryParams: {
+    pageNum: 1,
+    pageSize: 10,
+    sqlKey: null,
+    sqlContent: null,
+    description: null,
+    paramsConfig: null
+  },
+  rules: {
+    sqlKey: [
+      { required: true, message: "sql key不能为空", trigger: "blur" }
+    ],
+    sqlContent: [
+      { required: true, message: "内容不能为空", trigger: "blur" }
+    ],
+    createTime: [
+      { required: true, message: "创建时间不能为空", trigger: "blur" }
+    ],
+    updateTime: [
+      { required: true, message: "更新时间不能为空", trigger: "blur" }
+    ],
+  }
+})
+
+const { queryParams, form, rules } = toRefs(data)
+
+/** 查询动态sql执行config列表 */
+function getList() {
+  loading.value = true
+  listSql(queryParams.value).then(response => {
+    sqlList.value = response.rows
+    total.value = response.total
+    loading.value = false
+  })
+}
+
+// 取消按钮
+function cancel() {
+  open.value = false
+  reset()
+}
+
+// 表单重置
+function reset() {
+  form.value = {
+    id: null,
+    sqlKey: null,
+    sqlContent: null,
+    description: null,
+    createBy: null,
+    createTime: null,
+    updateBy: null,
+    updateTime: null,
+    remark: null,
+    paramsConfig: null
+  }
+  proxy.resetForm("sqlRef")
+}
+
+/** 搜索按钮操作 */
+function handleQuery() {
+  queryParams.value.pageNum = 1
+  getList()
+}
+
+/** 重置按钮操作 */
+function resetQuery() {
+  proxy.resetForm("queryRef")
+  handleQuery()
+}
+
+// 多选框选中数据
+function handleSelectionChange(selection) {
+  ids.value = selection.map(item => item.id)
+  single.value = selection.length != 1
+  multiple.value = !selection.length
+}
+
+/** 新增按钮操作 */
+function handleAdd() {
+  reset()
+  open.value = true
+  title.value = "添加动态sql执行config"
+}
+
+/** 修改按钮操作 */
+function handleUpdate(row) {
+  reset()
+  const _id = row.id || ids.value
+  getSql(_id).then(response => {
+    form.value = response.data
+    open.value = true
+    title.value = "修改动态sql执行config"
+  })
+}
+
+/** 提交按钮 */
+function submitForm() {
+  proxy.$refs["sqlRef"].validate(valid => {
+    if (valid) {
+      if (form.value.id != null) {
+        updateSql(form.value).then(response => {
+          proxy.$modal.msgSuccess("修改成功")
+          open.value = false
+          getList()
+        })
+      } else {
+        addSql(form.value).then(response => {
+          proxy.$modal.msgSuccess("新增成功")
+          open.value = false
+          getList()
+        })
+      }
+    }
+  })
+}
+
+/** 删除按钮操作 */
+function handleDelete(row) {
+  const _ids = row.id || ids.value
+  proxy.$modal.confirm('是否确认删除动态sql执行config编号为"' + _ids + '"的数据项？').then(function() {
+    return delSql(_ids)
+  }).then(() => {
+    getList()
+    proxy.$modal.msgSuccess("删除成功")
+  }).catch(() => {})
+}
+
+/** 导出按钮操作 */
+function handleExport() {
+  proxy.download('system/sql/export', {
+    ...queryParams.value
+  }, `sql_${new Date().getTime()}.xlsx`)
+}
+
+/** 执行 */
+function executeSql(row) {
+  executeSqlByKeyAndParam(row.sqlKey,row.paramsConfig || {}).then(response => {
+    proxy.$modal.msgSuccess("执行成功:"+JSON.stringify(response.data) )
+  })
+}
+
+getList()
+</script>

src/views/system/user/authRole.vue

@@ -0,0 +1,123 @@
+<template>
+   <div class="app-container">
+      <h4 class="form-header h4">基本信息</h4>
+      <el-form :model="form" label-width="80px">
+         <el-row>
+            <el-col :span="8" :offset="2">
+               <el-form-item label="用户昵称" prop="nickName">
+                  <el-input v-model="form.nickName" disabled />
+               </el-form-item>
+            </el-col>
+            <el-col :span="8" :offset="2">
+               <el-form-item label="登录账号" prop="userName">
+                  <el-input v-model="form.userName" disabled />
+               </el-form-item>
+            </el-col>
+         </el-row>
+      </el-form>
+
+      <h4 class="form-header h4">角色信息</h4>
+      <el-table v-loading="loading" :row-key="getRowKey" @row-click="clickRow" ref="roleRef" @selection-change="handleSelectionChange" :data="roles.slice((pageNum - 1) * pageSize, pageNum * pageSize)">
+         <el-table-column label="序号" width="55" type="index" align="center">
+            <template #default="scope">
+               <span>{{ (pageNum - 1) * pageSize + scope.$index + 1 }}</span>
+            </template>
+         </el-table-column>
+         <el-table-column type="selection" :reserve-selection="true" :selectable="checkSelectable" width="55"></el-table-column>
+         <el-table-column label="角色编号" align="center" prop="roleId" />
+         <el-table-column label="角色名称" align="center" prop="roleName" />
+         <el-table-column label="权限字符" align="center" prop="roleKey" />
+         <el-table-column label="创建时间" align="center" prop="createTime" width="180">
+            <template #default="scope">
+               <span>{{ parseTime(scope.row.createTime) }}</span>
+            </template>
+         </el-table-column>
+      </el-table>
+
+      <pagination v-show="total > 0" :total="total" v-model:page="pageNum" v-model:limit="pageSize" />
+
+      <el-form label-width="100px">
+         <div style="text-align: center;margin-left:-120px;margin-top:30px;">
+            <el-button type="primary" @click="submitForm()">提交</el-button>
+            <el-button @click="close()">返回</el-button>
+         </div>
+      </el-form>
+   </div>
+</template>
+
+<script setup name="AuthRole">
+import { getAuthRole, updateAuthRole } from "@/api/system/user"
+
+const route = useRoute()
+const { proxy } = getCurrentInstance()
+
+const loading = ref(true)
+const total = ref(0)
+const pageNum = ref(1)
+const pageSize = ref(10)
+const roleIds = ref([])
+const roles = ref([])
+const form = ref({
+  nickName: undefined,
+  userName: undefined,
+  userId: undefined
+})
+
+/** 单击选中行数据 */
+function clickRow(row) {
+  if (checkSelectable(row)) {
+    proxy.$refs["roleRef"].toggleRowSelection(row)
+  }
+}
+
+/** 多选框选中数据 */
+function handleSelectionChange(selection) {
+  roleIds.value = selection.map(item => item.roleId)
+}
+
+/** 保存选中的数据编号 */
+function getRowKey(row) {
+  return row.roleId
+}
+
+// 检查角色状态
+function checkSelectable(row) {
+  return row.status === "0" ? true : false
+}
+
+/** 关闭按钮 */
+function close() {
+  const obj = { path: "/system/user" }
+  proxy.$tab.closeOpenPage(obj)
+}
+
+/** 提交按钮 */
+function submitForm() {
+  const userId = form.value.userId
+  const rIds = roleIds.value.join(",")
+  updateAuthRole({ userId: userId, roleIds: rIds }).then(response => {
+    proxy.$modal.msgSuccess("授权成功")
+    close()
+  })
+}
+
+(() => {
+  const userId = route.params && route.params.userId
+  if (userId) {
+    loading.value = true
+    getAuthRole(userId).then(response => {
+      form.value = response.user
+      roles.value = response.roles
+      total.value = roles.value.length
+      nextTick(() => {
+        roles.value.forEach(row => {
+          if (row.flag) {
+            proxy.$refs["roleRef"].toggleRowSelection(row)
+          }
+        })
+      })
+      loading.value = false
+    })
+  }
+})()
+</script>

src/views/system/user/components/UserInfoEdit.vue

@@ -0,0 +1,252 @@
+<template>
+  <div class="formWrap">
+    <el-form :model="form" :rules="rules" ref="userRef" label-width="8em">
+      <el-card header="基本身份信息" style="margin-bottom: 10px;">
+        <el-row :gutter="16">
+          <el-col :span="12">
+            <el-form-item label="用户昵称" prop="nickName">
+              <el-input v-model="form.nickName" placeholder="请输入用户昵称" maxlength="30" />
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item label="归属部门" prop="deptId">
+              <el-tree-select v-model="form.deptId" :data="enabledDeptOptions"
+                :props="{ value: 'id', label: 'label', children: 'children' }" value-key="id" placeholder="请选择归属部门"
+                check-strictly />
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item label="手机号码" prop="phonenumber">
+              <el-input v-model="form.phonenumber" placeholder="请输入手机号码" maxlength="11" />
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item label="邮箱" prop="email">
+              <el-input v-model="form.email" placeholder="请输入邮箱" maxlength="50" />
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item v-if=" form.userId == undefined " label="用户名称" prop="userName">
+              <el-input v-model="form.userName" placeholder="请输入用户名称" maxlength="30" />
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item v-if=" form.userId == undefined " label="用户密码" prop="password">
+              <el-input v-model="form.password" placeholder="请输入用户密码" type="password" maxlength="20" show-password />
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item label="身份证号" prop="cardNumber">
+              <el-input v-model="form.cardNumber" placeholder="请输入身份证号码" maxlength="18" minlength="15" />
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item label="用户性别" prop="sex">
+              <el-select v-model="form.sex" placeholder="请选择用户性别">
+                <el-option v-for=" dict in sys_user_sex " :key="dict.value" :label="dict.label"
+                  :value="dict.value"></el-option>
+              </el-select>
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item label="政治面貌" prop="politicalStatus">
+              <el-select v-model="form.politicalStatus" placeholder="请选择政治面貌">
+                <el-option v-for=" item in sys_user_political_status " :key="item.value" :label="item.label"
+                  :value="item.value" />
+              </el-select>
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item label="角色" prop="roleIds">
+              <el-select v-model="form.roleIds" multiple placeholder="请选择角色" @change="roleChange">
+                <el-option v-for=" item in roleOptions " :key="item.roleId" :label="item.roleName"
+                  :value="item.roleId"
+                  :disabled="item.status == 1"></el-option>
+              </el-select>
+            </el-form-item>
+          </el-col>
+        </el-row>
+      </el-card>
+      <el-card header="状态管理信息" style="margin-bottom: 10px;">
+        <el-row :gutter="16">
+          <el-col :span="12">
+            <el-form-item label="账号状态" prop="status">
+              <el-radio-group v-model="form.status">
+                <el-radio v-for=" dict in sys_normal_disable " :key="dict.value" :value="dict.value">
+                  {{ dict.label }}
+                </el-radio>
+              </el-radio-group>
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item label="培训合规状态" prop="trainingComplianceStatus">
+              <el-radio-group v-model="form.trainingComplianceStatus">
+                <el-radio v-for=" dict in sys_user_training_compliance_status " :key="dict.value" :value="dict.value">
+                  {{ dict.label }}
+                </el-radio>
+              </el-radio-group>
+            </el-form-item>
+          </el-col>
+        </el-row>
+      </el-card>
+      <el-card header="资质与岗位信息" style="margin-bottom: 10px;">
+        <el-row :gutter="16">
+          <el-col :span="12">
+            <el-form-item label="资质等级" prop="qualificationLevel"
+              :rules="( form.roleIds || [] ).includes( 101 ) || ( form.roleIds || [] ).includes( 102 ) ? [ { required: true, message: '请选择资质等级', trigger: 'blur' } ] : []">
+              <el-select v-model="form.qualificationLevel" placeholder="请选择资质等级">
+                <el-option v-for=" item in sys_user_qualification_level " :key="item.value" :label="item.label"
+                  :value="item.value" />
+              </el-select>
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item label="岗位类型" prop="postIds"
+              :rules="( form.roleIds || [] ).includes( 101 ) || ( form.roleIds || [] ).includes( 102 ) ? [ { required: true, message: '请选择岗位类型', trigger: 'blur' } ] : []">
+              <el-cascader v-model="form.postIds" :options="treeData" :props="treeNodeProps" filterable
+                style="width: 100%" />
+            </el-form-item>
+          </el-col>
+        </el-row>
+      </el-card>
+      <el-card header="人员异常状态记录" style="margin-bottom: 10px;">
+        <el-row :gutter="16">
+          <el-col :span="24">
+            <el-form-item label="行政处罚情况" prop="administrativeStatus">
+              <el-input v-model="form.administrativeStatus" type="textarea" placeholder="请输入行政处罚情况"></el-input>
+            </el-form-item>
+          </el-col>
+          <el-col :span="24">
+            <el-form-item label="身体健康情况" prop="physicalHealthStatus">
+              <el-input v-model="form.physicalHealthStatus" type="textarea" placeholder="请输入内容"></el-input>
+            </el-form-item>
+          </el-col>
+        </el-row>
+      </el-card>
+      <el-card header="应急联络信息" style="margin-bottom: 10px;">
+        <el-row :gutter="16">
+          <el-col :span="12">
+            <el-form-item label="紧急联系人姓名" prop="emergencyContactName">
+              <el-input v-model="form.emergencyContactName" type="text" placeholder="请输入紧急联系人姓名"></el-input>
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item label="紧急联系人电话" prop="emergencyContactPhone">
+              <el-input v-model="form.emergencyContactPhone" type="text" placeholder="请输入紧急联系人电话"
+                maxlength="11"></el-input>
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item label="紧急联系人关系" prop="emergencyContactRelationship">
+              <el-select v-model="form.emergencyContactRelationship" placeholder="请选择联系人关系">
+                <el-option v-for=" item in sys_user_emergency_contact_relationship " :key="item.value"
+                  :label="item.label"
+                  :value="item.value" />
+              </el-select>
+            </el-form-item>
+          </el-col>
+        </el-row>
+      </el-card>
+      <el-card header="其他信息" style="margin-bottom: 10px;">
+        <el-row :gutter="16">
+          <el-col :span="24">
+            <el-form-item label="备注">
+              <el-input v-model="form.remark" type="textarea" placeholder="请输入内容"></el-input>
+            </el-form-item>
+          </el-col>
+        </el-row>
+      </el-card>
+    </el-form>
+  </div>
+</template>
+
+<script setup>
+import { onMounted, reactive, computed } from 'vue';
+import { useDict } from '@/utils/dict'
+import { listAllTree } from '@/api/system/post'
+// 重父页面迁移过来的代码 2处公用选择框数据 选择使用父组件传入
+defineProps({
+  sys_user_sex: {
+    type: Array,
+    default: []
+  },
+  enabledDeptOptions: {
+    type: Array,
+    default: []
+  },
+  sys_normal_disable: {
+    type: Array,
+    default: []
+  },
+  postOptions: {
+    type: Array,
+    default: []
+  },
+  roleOptions: {
+    type: Array,
+    default: []
+  },
+})
+const userRef = ref(null)
+const form = defineModel('form', ref({}))
+// 政治面貌、资质等级、紧急联系人关系
+const {
+  sys_user_political_status,
+  sys_user_qualification_level,
+  sys_user_emergency_contact_relationship,
+  sys_user_training_compliance_status
+} = useDict('sys_user_political_status', 'sys_user_qualification_level', 'sys_user_emergency_contact_relationship', 'sys_user_training_compliance_status')
+
+const rules = computed(() => ({
+  userName: [ { required: true, message: "用户名称不能为空", trigger: "blur" }, { min: 2, max: 20, message: "用户名称长度必须介于 2 和 20 之间", trigger: "blur" } ],
+  deptId: [ { required: true, message: '请选择归属部门', trigger: "blur" } ],
+  nickName: [ { required: true, message: "用户昵称不能为空", trigger: "blur" } ],
+  password: [ { required: true, message: "用户密码不能为空", trigger: "blur" }, { min: 5, max: 20, message: "用户密码长度必须介于 5 和 20 之间", trigger: "blur" }, { pattern: /^[^<>"'|\\]+$/, message: "不能包含非法字符：< > \" ' \\\ |", trigger: "blur" } ],
+  email: [ { type: "email", message: "请输入正确的邮箱地址", trigger: [ "blur", "change" ] } ],
+  phonenumber: [ { pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/, message: "请输入正确的手机号码", trigger: "blur" } ],
+  emergencyContactPhone: [ { pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/, message: "请输入正确的手机号码", trigger: "blur" } ],
+  roleIds: [ { required: true, message: '请选择角色', trigger: "blur" } ],
+  status: [ { required: true, message: '请选择账号状态', trigger: "blur" } ]
+}))
+
+const treeNodeProps = { multiple: true, expandTrigger: 'hover', label: 'postName', value: 'postId', emitPath: false, checkOnClickNode: true }
+const treeData = ref([])
+onMounted(() => {
+  listAllTree().then(res => {
+    treeData.value = res.data || []
+  })
+})
+
+const roleChange = () => {
+  userRef.value && userRef.value.clearValidate('qualificationLevel')
+  userRef.value && userRef.value.clearValidate('postIds')
+}
+
+defineExpose({
+  submit: () => {
+    return userRef.value.validate()
+  },
+  resetForm: () => {
+    return userRef.value && userRef.value.resetFields()
+  }
+})
+
+</script>
+
+<style lang="less" scoped>
+.formWrap {
+  max-height: 75vh;
+  overflow-y: auto;
+  overflow-x: hidden;
+  padding: 0 15px;
+  box-sizing: border-box;
+
+  :deep(.el-card) {
+    .el-card__header {
+      font-weight: 600;
+      font-size: 16px;
+      color: #000;
+    }
+  }
+}
+</style>

src/views/system/user/index.vue

@@ -0,0 +1,487 @@
+<template>
+  <div class="app-container">
+    <el-row :gutter="20">
+      <splitpanes :horizontal="appStore.device === 'mobile'" class="default-theme">
+        <!--部门数据-->
+        <pane size="16">
+          <el-col>
+            <div class="head-container">
+              <el-input v-model="deptName" placeholder="请输入部门名称" clearable prefix-icon="Search"
+                style="margin-bottom: 20px" />
+            </div>
+            <div class="head-container">
+              <el-tree :data="deptOptions" :props="{ label: 'label', children: 'children' }"
+                :expand-on-click-node="false" :filter-node-method="filterNode" ref="deptTreeRef" node-key="id"
+                highlight-current default-expand-all @node-click="handleNodeClick" />
+            </div>
+          </el-col>
+        </pane>
+        <!--用户数据-->
+        <pane size="84">
+          <el-col>
+            <el-form :model="queryParams" ref="queryRef" :inline="true" v-show="showSearch" label-width="68px">
+              <el-form-item label="用户名称" prop="userName">
+                <el-input v-model="queryParams.userName" placeholder="请输入用户名称" clearable style="width: 240px"
+                  @keyup.enter="handleQuery" />
+              </el-form-item>
+              <el-form-item label="手机号码" prop="phonenumber">
+                <el-input v-model="queryParams.phonenumber" placeholder="请输入手机号码" clearable style="width: 240px"
+                  @keyup.enter="handleQuery" />
+              </el-form-item>
+              <el-form-item label="状态" prop="status">
+                <el-select v-model="queryParams.status" placeholder="用户状态" clearable style="width: 240px">
+                  <el-option v-for=" dict in sys_normal_disable " :key="dict.value" :label="dict.label"
+                    :value="dict.value" />
+                </el-select>
+              </el-form-item>
+              <el-form-item label="创建时间" style="width: 308px">
+                <el-date-picker v-model="dateRange" value-format="YYYY-MM-DD" type="daterange" range-separator="-"
+                  start-placeholder="开始日期" end-placeholder="结束日期"></el-date-picker>
+              </el-form-item>
+              <el-form-item>
+                <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
+                <el-button icon="Refresh" @click="resetQuery">重置</el-button>
+              </el-form-item>
+            </el-form>
+
+            <el-row :gutter="10" class="mb8">
+              <el-col :span="1.5">
+                <el-button type="primary" plain icon="Plus" @click="handleAdd"
+                  v-hasPermi="[ 'system:user:add' ]">新增</el-button>
+              </el-col>
+              <el-col :span="1.5">
+                <el-button type="success" plain icon="Edit" :disabled="single" @click="handleUpdate"
+                  v-hasPermi="[ 'system:user:edit' ]">修改</el-button>
+              </el-col>
+              <el-col :span="1.5">
+                <el-button type="danger" plain icon="Delete" :disabled="multiple" @click="handleDelete"
+                  v-hasPermi="[ 'system:user:remove' ]">删除</el-button>
+              </el-col>
+              <el-col :span="1.5">
+                <el-button type="info" plain icon="Upload" @click="handleImport"
+                  v-hasPermi="[ 'system:user:import' ]">导入</el-button>
+              </el-col>
+              <el-col :span="1.5">
+                <el-button type="warning" plain icon="Download" @click="handleExport"
+                  v-hasPermi="[ 'system:user:export' ]">导出</el-button>
+              </el-col>
+              <right-toolbar v-model:showSearch="showSearch" @queryTable="getList" :columns="columns"></right-toolbar>
+            </el-row>
+
+            <el-table v-loading="loading" :data="userList" @selection-change="handleSelectionChange">
+              <el-table-column type="selection" width="50" align="center" />
+              <el-table-column label="用户编号" align="center" key="userId" prop="userId" v-if=" columns[ 0 ].visible " />
+              <el-table-column label="用户名称" align="center" key="userName" prop="userName" v-if=" columns[ 1 ].visible "
+                :show-overflow-tooltip="true" />
+              <el-table-column label="用户昵称" align="center" key="nickName" prop="nickName" v-if=" columns[ 2 ].visible "
+                :show-overflow-tooltip="true" />
+              <el-table-column label="部门" align="center" key="deptName" prop="dept.deptName" v-if=" columns[ 3 ].visible "
+                :show-overflow-tooltip="true" />
+              <el-table-column label="手机号码" align="center" key="phonenumber" prop="phonenumber"
+                v-if=" columns[ 4 ].visible " width="120" />
+              <el-table-column label="状态" align="center" key="status" v-if=" columns[ 5 ].visible ">
+                <template #default=" scope ">
+                  <el-switch
+                    v-model="scope.row.status"
+                    active-value="0"
+                    inactive-value="1"
+                    @change="handleStatusChange( scope.row )"></el-switch>
+                </template>
+              </el-table-column>
+              <el-table-column label="创建时间" align="center" prop="createTime" v-if=" columns[ 6 ].visible " width="160">
+                <template #default=" scope ">
+                  <span>{{ parseTime( scope.row.createTime ) }}</span>
+                </template>
+              </el-table-column>
+              <el-table-column label="操作" align="center" width="150" class-name="small-padding fixed-width">
+                <template #default=" scope ">
+                  <el-tooltip content="修改" placement="top" v-if=" scope.row.userId !== 1 ">
+                    <el-button link type="primary" icon="Edit" @click="handleUpdate( scope.row )"
+                      v-hasPermi="[ 'system:user:edit' ]"></el-button>
+                  </el-tooltip>
+                  <el-tooltip content="删除" placement="top" v-if=" scope.row.userId !== 1 ">
+                    <el-button link type="primary" icon="Delete" @click="handleDelete( scope.row )"
+                      v-hasPermi="[ 'system:user:remove' ]"></el-button>
+                  </el-tooltip>
+                  <el-tooltip content="重置密码" placement="top" v-if=" scope.row.userId !== 1 ">
+                    <el-button link type="primary" icon="Key" @click="handleResetPwd( scope.row )"
+                      v-hasPermi="[ 'system:user:resetPwd' ]"></el-button>
+                  </el-tooltip>
+                  <el-tooltip content="分配角色" placement="top" v-if=" scope.row.userId !== 1 ">
+                    <el-button link type="primary" icon="CircleCheck" @click="handleAuthRole( scope.row )"
+                      v-hasPermi="[ 'system:user:edit' ]"></el-button>
+                  </el-tooltip>
+                </template>
+              </el-table-column>
+            </el-table>
+            <pagination v-show="total > 0" :total="total" v-model:page="queryParams.pageNum"
+              v-model:limit="queryParams.pageSize"
+              @pagination="getList" />
+          </el-col>
+        </pane>
+      </splitpanes>
+    </el-row>
+
+    <!-- 添加或修改用户配置对话框 -->
+    <el-dialog :title="title" v-model="open" width="75vw" hei append-to-body>
+      <UserInfoEdit ref="userRef" v-model:form="form" :sys_user_sex="sys_user_sex"
+        :enabledDeptOptions="enabledDeptOptions"
+        :sys_normal_disable="sys_normal_disable" :postOptions="postOptions" :roleOptions="roleOptions" />
+      <template #footer>
+        <div class="dialog-footer">
+          <el-button type="primary" @click="submitForm">确 定</el-button>
+          <el-button @click="cancel">取 消</el-button>
+        </div>
+      </template>
+    </el-dialog>
+
+    <!-- 用户导入对话框 -->
+    <el-dialog :title="upload.title" v-model="upload.open" width="400px" append-to-body>
+      <el-upload ref="uploadRef" :limit="1" accept=".xlsx, .xls" :headers="upload.headers"
+        :action="upload.url + '?updateSupport=' + upload.updateSupport" :disabled="upload.isUploading"
+        :on-progress="handleFileUploadProgress" :on-success="handleFileSuccess" :auto-upload="false" drag>
+        <el-icon class="el-icon--upload"><upload-filled /></el-icon>
+        <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
+        <template #tip>
+          <div class="el-upload__tip text-center">
+            <div class="el-upload__tip">
+              <el-checkbox v-model="upload.updateSupport" />是否更新已经存在的用户数据
+            </div>
+            <span>仅允许导入xls、xlsx格式文件。</span>
+            <el-link type="primary" :underline="false" style="font-size: 12px; vertical-align: baseline"
+              @click="importTemplate">下载模板</el-link>
+          </div>
+        </template>
+      </el-upload>
+      <template #footer>
+        <div class="dialog-footer">
+          <el-button type="primary" @click="submitFileForm">确 定</el-button>
+          <el-button @click="upload.open = false">取 消</el-button>
+        </div>
+      </template>
+    </el-dialog>
+  </div>
+</template>
+
+<script setup name="User">
+import { getToken } from "@/utils/auth"
+import useAppStore from '@/store/modules/app'
+import { changeUserStatus, listUser, resetUserPwd, delUser, getUser, updateUser, addUser, deptTreeSelect } from "@/api/system/user"
+import { Splitpanes, Pane } from "splitpanes"
+import "splitpanes/dist/splitpanes.css"
+import UserInfoEdit from './components/UserInfoEdit.vue'
+
+const router = useRouter()
+const appStore = useAppStore()
+const { proxy } = getCurrentInstance()
+const { sys_normal_disable, sys_user_sex } = proxy.useDict("sys_normal_disable", "sys_user_sex")
+const userRef = ref(null)
+const userList = ref([])
+const open = ref(false)
+const loading = ref(true)
+const showSearch = ref(true)
+const ids = ref([])
+const single = ref(true)
+const multiple = ref(true)
+const total = ref(0)
+const title = ref("")
+const dateRange = ref([])
+const deptName = ref("")
+const deptOptions = ref(undefined)
+const enabledDeptOptions = ref(undefined)
+const initPassword = ref(undefined)
+const postOptions = ref([])
+const roleOptions = ref([])
+/*** 用户导入参数 */
+const upload = reactive({
+  // 是否显示弹出层（用户导入）
+  open: false,
+  // 弹出层标题（用户导入）
+  title: "",
+  // 是否禁用上传
+  isUploading: false,
+  // 是否更新已经存在的用户数据
+  updateSupport: 0,
+  // 设置上传的请求头部
+  headers: { Authorization: "Bearer " + getToken() },
+  // 上传的地址
+  url: import.meta.env.VITE_APP_BASE_API + "/system/user/importData"
+})
+// 列显隐信息
+const columns = ref([
+  { key: 0, label: `用户编号`, visible: true },
+  { key: 1, label: `用户名称`, visible: true },
+  { key: 2, label: `用户昵称`, visible: true },
+  { key: 3, label: `部门`, visible: true },
+  { key: 4, label: `手机号码`, visible: true },
+  { key: 5, label: `状态`, visible: true },
+  { key: 6, label: `创建时间`, visible: true }
+])
+
+const data = reactive({
+  form: {},
+  queryParams: {
+    pageNum: 1,
+    pageSize: 10,
+    userName: undefined,
+    phonenumber: undefined,
+    status: undefined,
+    deptId: undefined
+  }
+})
+
+const { queryParams, form } = toRefs(data)
+
+/** 通过条件过滤节点  */
+const filterNode = (value, data) => {
+  if (!value) return true
+  return data.label.indexOf(value) !== -1
+}
+
+/** 根据名称筛选部门树 */
+watch(deptName, val => {
+  proxy.$refs[ "deptTreeRef" ].filter(val)
+})
+
+/** 查询用户列表 */
+function getList () {
+  loading.value = true
+  listUser(proxy.addDateRange(queryParams.value, dateRange.value)).then(res => {
+    loading.value = false
+    userList.value = res.rows
+    total.value = res.total
+  })
+}
+
+/** 查询部门下拉树结构 */
+function getDeptTree () {
+  deptTreeSelect().then(response => {
+    deptOptions.value = response.data
+    enabledDeptOptions.value = filterDisabledDept(JSON.parse(JSON.stringify(response.data)))
+  })
+}
+
+/** 过滤禁用的部门 */
+function filterDisabledDept (deptList) {
+  return deptList.filter(dept => {
+    if (dept.disabled) {
+      return false
+    }
+    if (dept.children && dept.children.length) {
+      dept.children = filterDisabledDept(dept.children)
+    }
+    return true
+  })
+}
+
+/** 节点单击事件 */
+function handleNodeClick (data) {
+  queryParams.value.deptId = data.id
+  handleQuery()
+}
+
+/** 搜索按钮操作 */
+function handleQuery () {
+  queryParams.value.pageNum = 1
+  getList()
+}
+
+/** 重置按钮操作 */
+function resetQuery () {
+  dateRange.value = []
+  proxy.resetForm("queryRef")
+  queryParams.value.deptId = undefined
+  proxy.$refs.deptTreeRef.setCurrentKey(null)
+  handleQuery()
+}
+
+/** 删除按钮操作 */
+function handleDelete (row) {
+  const userIds = row.userId || ids.value
+  proxy.$modal.confirm('是否确认删除用户编号为"' + userIds + '"的数据项？').then(function () {
+    return delUser(userIds)
+  }).then(() => {
+    getList()
+    proxy.$modal.msgSuccess("删除成功")
+  }).catch(() => { })
+}
+
+/** 导出按钮操作 */
+function handleExport () {
+  proxy.download("system/user/export", {
+    ...queryParams.value,
+  }, `user_${new Date().getTime()}.xlsx`)
+}
+
+/** 用户状态修改  */
+function handleStatusChange (row) {
+  let text = row.status === "0" ? "启用" : "停用"
+  proxy.$modal.confirm('确认要"' + text + '""' + row.userName + '"用户吗?').then(function () {
+    return changeUserStatus(row.userId, row.status)
+  }).then(() => {
+    proxy.$modal.msgSuccess(text + "成功")
+  }).catch(function () {
+    row.status = row.status === "0" ? "1" : "0"
+  })
+}
+
+/** 更多操作 */
+function handleCommand (command, row) {
+  switch (command) {
+    case "handleResetPwd":
+      handleResetPwd(row)
+      break
+    case "handleAuthRole":
+      handleAuthRole(row)
+      break
+    default:
+      break
+  }
+}
+
+/** 跳转角色分配 */
+function handleAuthRole (row) {
+  const userId = row.userId
+  router.push("/system/user-auth/role/" + userId)
+}
+
+/** 重置密码按钮操作 */
+function handleResetPwd (row) {
+  proxy.$prompt('请输入"' + row.userName + '"的新密码', "提示", {
+    confirmButtonText: "确定",
+    cancelButtonText: "取消",
+    closeOnClickModal: false,
+    inputPattern: /^.{5,20}$/,
+    inputErrorMessage: "用户密码长度必须介于 5 和 20 之间",
+    inputValidator: (value) => {
+      if (/<|>|"|'|\||\\/.test(value)) {
+        return "不能包含非法字符：< > \" ' \\\ |"
+      }
+    },
+  }).then(({ value }) => {
+    resetUserPwd(row.userId, value).then(response => {
+      proxy.$modal.msgSuccess("修改成功，新密码是：" + value)
+    })
+  }).catch(() => { })
+}
+
+/** 选择条数  */
+function handleSelectionChange (selection) {
+  ids.value = selection.map(item => item.userId)
+  single.value = selection.length != 1
+  multiple.value = !selection.length
+}
+
+/** 导入按钮操作 */
+function handleImport () {
+  upload.title = "用户导入"
+  upload.open = true
+}
+
+/** 下载模板操作 */
+function importTemplate () {
+  proxy.download("system/user/importTemplate", {
+  }, `user_template_${new Date().getTime()}.xlsx`)
+}
+
+/**文件上传中处理 */
+const handleFileUploadProgress = (event, file, fileList) => {
+  upload.isUploading = true
+}
+
+/** 文件上传成功处理 */
+const handleFileSuccess = (response, file, fileList) => {
+  upload.open = false
+  upload.isUploading = false
+  proxy.$refs[ "uploadRef" ].handleRemove(file)
+  proxy.$alert("<div style='overflow: auto;overflow-x: hidden;max-height: 70vh;padding: 10px 20px 0;'>" + response.msg + "</div>", "导入结果", { dangerouslyUseHTMLString: true })
+  getList()
+}
+
+/** 提交上传文件 */
+function submitFileForm () {
+  proxy.$refs[ "uploadRef" ].submit()
+}
+
+/** 重置操作表单 */
+function reset () {
+  form.value = {
+    userId: undefined,
+    deptId: undefined,
+    userName: undefined,
+    nickName: undefined,
+    password: undefined,
+    phonenumber: undefined,
+    email: undefined,
+    sex: undefined,
+    status: "0",
+    remark: undefined,
+    postIds: [],
+    roleIds: []
+  }
+  proxy.$refs[ "userRef" ] && proxy.$refs[ "userRef" ].resetForm()
+}
+
+/** 取消按钮 */
+function cancel () {
+  reset()
+  open.value = false
+  
+}
+
+/** 新增按钮操作 */
+function handleAdd () {
+  open.value = true
+  getUser().then(response => {
+    reset()
+    postOptions.value = response.posts
+    roleOptions.value = response.roles
+    title.value = "添加用户"
+    form.value.password = initPassword.value
+  })
+}
+
+/** 修改按钮操作 */
+function handleUpdate (row) {
+  
+  const userId = row.userId || ids.value
+  open.value = true
+  getUser(userId).then(response => {
+    reset()
+    form.value = response.data
+    postOptions.value = response.posts
+    roleOptions.value = response.roles
+    form.value.postIds = response.postIds || []
+    form.value.roleIds = response.roleIds || []
+    title.value = "修改用户"
+    form.password = ""
+  })
+}
+
+/** 提交按钮 */
+function submitForm () {
+  proxy.$refs[ "userRef" ].submit().then(() => {
+    if (form.value.userId != undefined) {
+      updateUser(form.value).then(response => {
+        proxy.$modal.msgSuccess("修改成功")
+        open.value = false
+        getList()
+      })
+    } else {
+      addUser(form.value).then(response => {
+        proxy.$modal.msgSuccess("新增成功")
+        open.value = false
+        getList()
+      })
+    }
+  }).catch(() => {})
+}
+
+onMounted(() => {
+  getDeptTree()
+  getList()
+  proxy.getConfigKey("sys.user.initPassword").then(response => {
+    initPassword.value = response.msg
+  })
+})
+</script>

src/views/system/user/profile/index.vue

@@ -0,0 +1,94 @@
+<template>
+   <div class="app-container">
+      <el-row :gutter="20">
+         <el-col :span="6" :xs="24">
+            <el-card class="box-card">
+               <template v-slot:header>
+                 <div class="clearfix">
+                   <span>个人信息</span>
+                 </div>
+               </template>
+               <div>
+                  <div class="text-center">
+                     <userAvatar />
+                  </div>
+                  <ul class="list-group list-group-striped">
+                     <li class="list-group-item">
+                        <svg-icon icon-class="user" />用户名称
+                        <div class="pull-right">{{ state.user.userName }}</div>
+                     </li>
+                     <li class="list-group-item">
+                        <svg-icon icon-class="phone" />手机号码
+                        <div class="pull-right">{{ state.user.phonenumber }}</div>
+                     </li>
+                     <li class="list-group-item">
+                        <svg-icon icon-class="email" />用户邮箱
+                        <div class="pull-right">{{ state.user.email }}</div>
+                     </li>
+                     <li class="list-group-item">
+                        <svg-icon icon-class="tree" />所属部门
+                        <div class="pull-right" v-if="state.user.dept">{{ state.user.dept.deptName }} / {{ state.postGroup }}</div>
+                     </li>
+                     <li class="list-group-item">
+                        <svg-icon icon-class="peoples" />所属角色
+                        <div class="pull-right">{{ state.roleGroup }}</div>
+                     </li>
+                     <li class="list-group-item">
+                        <svg-icon icon-class="date" />创建日期
+                        <div class="pull-right">{{ state.user.createTime }}</div>
+                     </li>
+                  </ul>
+               </div>
+            </el-card>
+         </el-col>
+         <el-col :span="18" :xs="24">
+            <el-card>
+               <template v-slot:header>
+                 <div class="clearfix">
+                   <span>基本资料</span>
+                 </div>
+               </template>
+               <el-tabs v-model="selectedTab">
+                  <el-tab-pane label="基本资料" name="userinfo">
+                     <userInfo :user="state.user" />
+                  </el-tab-pane>
+                  <el-tab-pane label="修改密码" name="resetPwd">
+                     <resetPwd />
+                  </el-tab-pane>
+               </el-tabs>
+            </el-card>
+         </el-col>
+      </el-row>
+   </div>
+</template>
+
+<script setup name="Profile">
+import userAvatar from "./userAvatar"
+import userInfo from "./userInfo"
+import resetPwd from "./resetPwd"
+import { getUserProfile } from "@/api/system/user"
+
+const route = useRoute()
+const selectedTab = ref("userinfo")
+const state = reactive({
+  user: {},
+  roleGroup: {},
+  postGroup: {}
+})
+
+function getUser() {
+  getUserProfile().then(response => {
+    state.user = response.data
+    state.roleGroup = response.roleGroup
+    state.postGroup = response.postGroup
+  })
+}
+
+onMounted(() => {
+  const activeTab = route.params && route.params.activeTab
+  if (activeTab) {
+    selectedTab.value = activeTab
+  }
+  getUser()
+})
+</script>

src/views/system/user/profile/resetPwd.vue

@@ -0,0 +1,59 @@
+<template>
+   <el-form ref="pwdRef" :model="user" :rules="rules" label-width="80px">
+      <el-form-item label="旧密码" prop="oldPassword">
+         <el-input v-model="user.oldPassword" placeholder="请输入旧密码" type="password" show-password />
+      </el-form-item>
+      <el-form-item label="新密码" prop="newPassword">
+         <el-input v-model="user.newPassword" placeholder="请输入新密码" type="password" show-password />
+      </el-form-item>
+      <el-form-item label="确认密码" prop="confirmPassword">
+         <el-input v-model="user.confirmPassword" placeholder="请确认新密码" type="password" show-password/>
+      </el-form-item>
+      <el-form-item>
+      <el-button type="primary" @click="submit">保存</el-button>
+      <el-button type="danger" @click="close">关闭</el-button>
+      </el-form-item>
+   </el-form>
+</template>
+
+<script setup>
+import { updateUserPwd } from "@/api/system/user"
+
+const { proxy } = getCurrentInstance()
+
+const user = reactive({
+  oldPassword: undefined,
+  newPassword: undefined,
+  confirmPassword: undefined
+})
+
+const equalToPassword = (rule, value, callback) => {
+  if (user.newPassword !== value) {
+    callback(new Error("两次输入的密码不一致"))
+  } else {
+    callback()
+  }
+}
+
+const rules = ref({
+  oldPassword: [{ required: true, message: "旧密码不能为空", trigger: "blur" }],
+  newPassword: [{ required: true, message: "新密码不能为空", trigger: "blur" }, { min: 6, max: 20, message: "长度在 6 到 20 个字符", trigger: "blur" }, { pattern: /^[^<>"'|\\]+$/, message: "不能包含非法字符：< > \" ' \\\ |", trigger: "blur" }],
+  confirmPassword: [{ required: true, message: "确认密码不能为空", trigger: "blur" }, { required: true, validator: equalToPassword, trigger: "blur" }]
+})
+
+/** 提交按钮 */
+function submit() {
+  proxy.$refs.pwdRef.validate(valid => {
+    if (valid) {
+      updateUserPwd(user.oldPassword, user.newPassword).then(response => {
+        proxy.$modal.msgSuccess("修改成功")
+      })
+    }
+  })
+}
+
+/** 关闭按钮 */
+function close() {
+  proxy.$tab.closePage()
+}
+</script>

src/views/system/user/profile/userAvatar.vue

@@ -0,0 +1,180 @@
+<template>
+  <div class="user-info-head" @click="editCropper()">
+    <img :src="options.img" title="点击上传头像" class="img-circle img-lg" />
+    <el-dialog :title="title" v-model="open" width="800px" append-to-body @opened="modalOpened" @close="closeDialog">
+      <el-row>
+        <el-col :xs="24" :md="12" :style="{ height: '350px' }">
+          <vue-cropper
+            ref="cropper"
+            :img="options.img"
+            :info="true"
+            :autoCrop="options.autoCrop"
+            :autoCropWidth="options.autoCropWidth"
+            :autoCropHeight="options.autoCropHeight"
+            :fixedBox="options.fixedBox"
+            :outputType="options.outputType"
+            @realTime="realTime"
+            v-if="visible"
+          />
+        </el-col>
+        <el-col :xs="24" :md="12" :style="{ height: '350px' }">
+          <div class="avatar-upload-preview">
+            <img :src="options.previews.url" :style="options.previews.img" />
+          </div>
+        </el-col>
+      </el-row>
+      <br />
+      <el-row>
+        <el-col :lg="2" :md="2">
+          <el-upload
+            action="#"
+            :http-request="requestUpload"
+            :show-file-list="false"
+            :before-upload="beforeUpload"
+          >
+            <el-button>
+              选择
+              <el-icon class="el-icon--right"><Upload /></el-icon>
+            </el-button>
+          </el-upload>
+        </el-col>
+        <el-col :lg="{ span: 1, offset: 2 }" :md="2">
+          <el-button icon="Plus" @click="changeScale(1)"></el-button>
+        </el-col>
+        <el-col :lg="{ span: 1, offset: 1 }" :md="2">
+          <el-button icon="Minus" @click="changeScale(-1)"></el-button>
+        </el-col>
+        <el-col :lg="{ span: 1, offset: 1 }" :md="2">
+          <el-button icon="RefreshLeft" @click="rotateLeft()"></el-button>
+        </el-col>
+        <el-col :lg="{ span: 1, offset: 1 }" :md="2">
+          <el-button icon="RefreshRight" @click="rotateRight()"></el-button>
+        </el-col>
+        <el-col :lg="{ span: 2, offset: 6 }" :md="2">
+          <el-button type="primary" @click="uploadImg()">提 交</el-button>
+        </el-col>
+      </el-row>
+    </el-dialog>
+  </div>
+</template>
+
+<script setup>
+import "vue-cropper/dist/index.css"
+import { VueCropper } from "vue-cropper"
+import { uploadAvatar } from "@/api/system/user"
+import useUserStore from "@/store/modules/user"
+
+const userStore = useUserStore()
+const { proxy } = getCurrentInstance()
+
+const open = ref(false)
+const visible = ref(false)
+const title = ref("修改头像")
+
+//图片裁剪数据
+const options = reactive({
+  img: userStore.avatar,     // 裁剪图片的地址
+  autoCrop: true,            // 是否默认生成截图框
+  autoCropWidth: 200,        // 默认生成截图框宽度
+  autoCropHeight: 200,       // 默认生成截图框高度
+  fixedBox: true,            // 固定截图框大小 不允许改变
+  outputType: "png",         // 默认生成截图为PNG格式
+  filename: 'avatar',        // 文件名称
+  previews: {}               //预览数据
+})
+
+/** 编辑头像 */
+function editCropper() {
+  open.value = true
+}
+
+/** 打开弹出层结束时的回调 */
+function modalOpened() {
+  visible.value = true
+}
+
+/** 覆盖默认上传行为 */
+function requestUpload() {}
+
+/** 向左旋转 */
+function rotateLeft() {
+  proxy.$refs.cropper.rotateLeft()
+}
+
+/** 向右旋转 */
+function rotateRight() {
+  proxy.$refs.cropper.rotateRight()
+}
+
+/** 图片缩放 */
+function changeScale(num) {
+  num = num || 1
+  proxy.$refs.cropper.changeScale(num)
+}
+
+/** 上传预处理 */
+function beforeUpload(file) {
+  if (file.type.indexOf("image/") == -1) {
+    proxy.$modal.msgError("文件格式错误，请上传图片类型,如：JPG，PNG后缀的文件。")
+  } else {
+    const reader = new FileReader()
+    reader.readAsDataURL(file)
+    reader.onload = () => {
+      options.img = reader.result
+      options.filename = file.name
+    }
+  }
+}
+
+/** 上传图片 */
+function uploadImg() {
+  proxy.$refs.cropper.getCropBlob(data => {
+    let formData = new FormData()
+    formData.append("avatarfile", data, options.filename)
+    uploadAvatar(formData).then(response => {
+      open.value = false
+      options.img = import.meta.env.VITE_APP_BASE_API + response.imgUrl
+      userStore.avatar = options.img
+      proxy.$modal.msgSuccess("修改成功")
+      visible.value = false
+    })
+  })
+}
+
+/** 实时预览 */
+function realTime(data) {
+  options.previews = data
+}
+
+/** 关闭窗口 */
+function closeDialog() {
+  options.img = userStore.avatar
+  options.visible = false
+}
+</script>
+
+<style lang='scss' scoped>
+.user-info-head {
+  position: relative;
+  display: inline-block;
+  height: 120px;
+}
+
+.user-info-head:hover:after {
+  content: "+";
+  position: absolute;
+  left: 0;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  color: #eee;
+  background: rgba(0, 0, 0, 0.5);
+  font-size: 24px;
+  font-style: normal;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  cursor: pointer;
+  line-height: 110px;
+  border-radius: 50%;
+}
+</style>

src/views/system/user/profile/userInfo.vue

@@ -0,0 +1,67 @@
+<template>
+   <el-form ref="userRef" :model="form" :rules="rules" label-width="80px">
+      <el-form-item label="用户昵称" prop="nickName">
+         <el-input v-model="form.nickName" maxlength="30" />
+      </el-form-item>
+      <el-form-item label="手机号码" prop="phonenumber">
+         <el-input v-model="form.phonenumber" maxlength="11" />
+      </el-form-item>
+      <el-form-item label="邮箱" prop="email">
+         <el-input v-model="form.email" maxlength="50" />
+      </el-form-item>
+      <el-form-item label="性别">
+         <el-radio-group v-model="form.sex">
+            <el-radio value="0">男</el-radio>
+            <el-radio value="1">女</el-radio>
+         </el-radio-group>
+      </el-form-item>
+      <el-form-item>
+      <el-button type="primary" @click="submit">保存</el-button>
+      <el-button type="danger" @click="close">关闭</el-button>
+      </el-form-item>
+   </el-form>
+</template>
+
+<script setup>
+import { updateUserProfile } from "@/api/system/user"
+
+const props = defineProps({
+  user: {
+    type: Object
+  }
+})
+
+const { proxy } = getCurrentInstance()
+
+const form = ref({})
+const rules = ref({
+  nickName: [{ required: true, message: "用户昵称不能为空", trigger: "blur" }],
+  email: [{ required: true, message: "邮箱地址不能为空", trigger: "blur" }, { type: "email", message: "请输入正确的邮箱地址", trigger: ["blur", "change"] }],
+  phonenumber: [{ required: true, message: "手机号码不能为空", trigger: "blur" }, { pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/, message: "请输入正确的手机号码", trigger: "blur" }],
+})
+
+/** 提交按钮 */
+function submit() {
+  proxy.$refs.userRef.validate(valid => {
+    if (valid) {
+      updateUserProfile(form.value).then(response => {
+        proxy.$modal.msgSuccess("修改成功")
+        props.user.phonenumber = form.value.phonenumber
+        props.user.email = form.value.email
+      })
+    }
+  })
+}
+
+/** 关闭按钮 */
+function close() {
+  proxy.$tab.closePage()
+}
+
+// 回显当前登录用户信息
+watch(() => props.user, user => {
+  if (user) {
+    form.value = { nickName: user.nickName, phonenumber: user.phonenumber, email: user.email, sex: user.sex }
+  }
+},{ immediate: true })
+</script>

src/views/tool/build/CodeTypeDialog.vue

@@ -0,0 +1,71 @@
+<template>
+  <el-dialog v-model="open" width="500px" title="选择生成类型" @open="onOpen" @close="onClose">
+    <el-form ref="codeTypeForm" :model="formData" :rules="rules" label-width="100px">
+      <el-form-item label="生成类型" prop="type">
+        <el-radio-group v-model="formData.type">
+          <el-radio-button v-for="(item, index) in typeOptions" :key="index" :label="item.value">
+            {{ item.label }}
+          </el-radio-button>
+        </el-radio-group>
+      </el-form-item>
+      <el-form-item v-if="showFileName" label="文件名" prop="fileName">
+        <el-input v-model="formData.fileName" placeholder="请输入文件名" clearable />
+      </el-form-item>
+    </el-form>
+
+    <template #footer>
+      <el-button @click="onClose">取消</el-button>
+      <el-button type="primary" @click="handelConfirm">确定</el-button>
+    </template>
+  </el-dialog>
+</template>
+
+<script setup>
+const open = defineModel()
+const props = defineProps({
+  showFileName: Boolean
+})
+const emit = defineEmits(['confirm'])
+const formData = ref({
+  fileName: undefined,
+  type: 'file'
+})
+const codeTypeForm = ref()
+const rules = {
+  fileName: [{
+    required: true,
+    message: '请输入文件名',
+    trigger: 'blur'
+  }],
+  type: [{
+    required: true,
+    message: '生成类型不能为空',
+    trigger: 'change'
+  }]
+}
+const typeOptions = ref([
+  {
+    label: '页面',
+    value: 'file'
+  },
+  {
+    label: '弹窗',
+    value: 'dialog'
+  }
+])
+function onOpen() {
+  if (props.showFileName) {
+    formData.value.fileName = `${+new Date()}.vue`
+  }
+}
+function onClose() {
+  open.value = false
+}
+function handelConfirm() {
+  codeTypeForm.value.validate(valid => {
+    if (!valid) return
+    emit('confirm', { ...formData.value })
+    onClose()
+  })
+}
+</script>

src/views/tool/build/DraggableItem.vue

@@ -0,0 +1,68 @@
+<template>
+  <el-col :span="element.span" :class="className" @click.stop="activeItem(element)">
+    <el-form-item :label="element.label" :label-width="element.labelWidth ? element.labelWidth + 'px' : null"
+      :required="element.required" v-if="element.layout === 'colFormItem'">
+      <render :key="element.tag" :conf="element" v-model="element.defaultValue" />
+    </el-form-item>
+    <el-row :gutter="element.gutter" :class="element.class" @click.stop="activeItem(element)" v-else>
+      <span class="component-name"> {{ element.componentName }} </span>
+      <draggable group="componentsGroup" :animation="340" :list="element.children" class="drag-wrapper" item-key="label"
+        ref="draggableItemRef" :component-data="getComponentData()">
+        <template #item="scoped">
+          <draggable-item :key="scoped.element.renderKey" :drawing-list="element.children" :element="scoped.element"
+            :index="index" :active-id="activeId" :form-conf="formConf" @activeItem="activeItem(scoped.element)"
+            @copyItem="copyItem(scoped.element, element.children)"
+            @deleteItem="deleteItem(scoped.index, element.children)" />
+        </template>
+      </draggable>
+    </el-row>
+    <span class="drawing-item-copy" title="复制" @click.stop="copyItem(element)">
+      <el-icon><CopyDocument /></el-icon>
+    </span>
+    <span class="drawing-item-delete" title="删除" @click.stop="deleteItem(index)">
+      <el-icon><Delete /></el-icon>
+    </span>
+  </el-col>
+</template>
+<script setup name="DraggableItem">
+import draggable from "vuedraggable/dist/vuedraggable.common"
+import render from '@/utils/generator/render'
+
+const props = defineProps({
+  element: Object,
+  index: Number,
+  drawingList: Array,
+  activeId: {
+    type: [String, Number]
+  },
+  formConf: Object
+})
+const className = ref('')
+const draggableItemRef = ref(null)
+const emits = defineEmits(['activeItem', 'copyItem', 'deleteItem'])
+
+function activeItem(item) {
+  emits('activeItem', item)
+}
+function copyItem(item, parent) {
+  emits('copyItem', item, parent ?? props.drawingList)
+}
+function deleteItem(item, parent) {
+  emits('deleteItem', item, parent ?? props.drawingList)
+}
+
+function getComponentData() {
+  return {
+    gutter: props.element.gutter,
+    justify: props.element.justify,
+    align: props.element.align
+  }
+}
+
+watch(() => props.activeId, (val) => {
+  className.value = (props.element.layout === 'rowFormItem' ? 'drawing-row-item' : 'drawing-item') + (val === props.element.formId ? ' active-from-item' : '')
+  if (props.formConf.unFocusedComponentBorder) {
+    className.value += ' unfocus-bordered'
+  }
+}, { immediate: true })
+</script>

src/views/tool/build/IconsDialog.vue

@@ -0,0 +1,115 @@
+<template>
+  <div class="icon-dialog">
+    <el-dialog v-model="value" width="980px" :close-on-click-modal="false" :modal-append-to-body="false" @open="onOpen"
+      @close="onClose">
+      <template #header="{ close, titleId, titleClass }">
+        选择图标
+        <el-input v-model="key" size="small" :style="{ width: '260px' }" placeholder="请输入图标名称" prefix-icon="Search"
+          clearable />
+      </template>
+      <ul class="icon-ul">
+        <li v-for="icon in iconList" :key="icon" :class="active === icon ? 'active-item' : ''" @click="onSelect(icon)">
+          <div>
+            <el-icon :size="30">
+              <component :is="icon" />
+            </el-icon>
+            <div>{{ icon }}</div>
+          </div>
+        </li>
+      </ul>
+    </el-dialog>
+  </div>
+</template>
+<script setup>
+import * as ElementPlusIconsVue from '@element-plus/icons-vue'
+import { watch } from 'vue'
+
+const iconList = ref([])
+const originList = []
+const key = ref('')
+const active = ref('')
+const emit = defineEmits(['select'])
+const value = defineModel()
+for (const [key] of Object.entries(ElementPlusIconsVue)) {
+  iconList.value.push(key)
+  originList.push(key)
+}
+
+function onOpen() { }
+function onClose() { }
+function onSelect(icon) {
+  active.value = icon
+  emit('select', icon)
+  value.value = false
+}
+
+watch(key, (val) => {
+  if (val) {
+    iconList.value = originList.filter(name => name.indexOf(val) > -1)
+  } else {
+    iconList.value = originList
+  }
+})
+</script>
+<style lang="scss" scoped>
+.icon-ul {
+  margin: 0;
+  padding: 0;
+  font-size: 0;
+
+  li {
+    list-style-type: none;
+    text-align: center;
+    font-size: 14px;
+    display: inline-flex;
+    width: 16.66%;
+    box-sizing: border-box;
+    height: 108px;
+    padding: 6px 6px 6px 6px;
+    cursor: pointer;
+    overflow: hidden;
+    align-items: center;
+    justify-content: center;
+
+    &:hover {
+      background: #f2f2f2;
+    }
+
+    &.active-item {
+      background: #e1f3fb;
+      color: #7a6df0
+    }
+
+    i {
+      font-size: 30px;
+      line-height: 50px;
+      margin-bottom: 10px;
+    }
+  }
+}
+
+.icon-dialog {
+  :deep() {
+    .el-dialog {
+      border-radius: 8px;
+      margin-bottom: 0;
+      margin-top: 4vh !important;
+      display: flex;
+      flex-direction: column;
+      max-height: 92vh;
+      overflow: hidden;
+      box-sizing: border-box;
+
+      .el-dialog__header {
+        padding-top: 14px;
+      }
+
+      .el-dialog__body {
+        margin: 0 20px 20px 20px;
+        padding: 0;
+        overflow: auto;
+      }
+    }
+  }
+}
+</style>

src/views/tool/build/RightPanel.vue

@@ -0,0 +1,906 @@
+<template>
+  <div class="right-board">
+    <el-tabs v-model="currentTab" stretch class="center-tabs">
+      <el-tab-pane label="组件属性" name="field" />
+      <el-tab-pane label="表单属性" name="form" />
+    </el-tabs>
+    <div class="field-box">
+      <a class="document-link" target="_blank" :href="documentLink" title="查看组件文档">
+        <el-icon>
+          <Link />
+        </el-icon>
+      </a>
+      <el-scrollbar class="right-scrollbar">
+        <!-- 组件属性 -->
+        <el-form v-show="currentTab === 'field' && showField" size="default" label-width="90px" label-position="top"
+          style="">
+          <el-form-item v-if="activeData.changeTag" label="组件类型">
+            <el-select v-model="activeData.tagIcon" placeholder="请选择组件类型" :style="{ width: '100%' }" @change="tagChange">
+              <el-option-group v-for="group in tagList" :key="group.label" :label="group.label">
+                <el-option v-for="item in group.options" :key="item.label" :label="item.label" :value="item.tagIcon">
+                  <svg-icon class="node-icon" :icon-class="item.tagIcon" style="margin-right: 10px;" />
+                  <span> {{ item.label }}</span>
+                </el-option>
+              </el-option-group>
+            </el-select>
+          </el-form-item>
+          <el-form-item v-if="activeData.vModel !== undefined" label="字段名">
+            <el-input v-model="activeData.vModel" placeholder="请输入字段名（v-model）" />
+          </el-form-item>
+          <el-form-item v-if="activeData.componentName !== undefined" label="组件名">
+            {{ activeData.componentName }}
+          </el-form-item>
+          <el-form-item v-if="activeData.label !== undefined" label="标题">
+            <el-input v-model="activeData.label" placeholder="请输入标题" />
+          </el-form-item>
+          <el-form-item v-if="activeData.placeholder !== undefined" label="占位提示">
+            <el-input v-model="activeData.placeholder" placeholder="请输入占位提示" />
+          </el-form-item>
+          <el-form-item v-if="activeData['start-placeholder'] !== undefined" label="开始占位">
+            <el-input v-model="activeData['start-placeholder']" placeholder="请输入占位提示" />
+          </el-form-item>
+          <el-form-item v-if="activeData['end-placeholder'] !== undefined" label="结束占位">
+            <el-input v-model="activeData['end-placeholder']" placeholder="请输入占位提示" />
+          </el-form-item>
+          <el-form-item v-if="activeData.span !== undefined" label="表单栅格">
+            <el-slider v-model="activeData.span" :max="24" :min="1" :marks="{ 12: '' }" @change="spanChange" />
+          </el-form-item>
+          <el-form-item v-if="activeData.layout === 'rowFormItem'" label="栅格间隔">
+            <el-input-number v-model="activeData.gutter" :min="0" placeholder="栅格间隔" />
+          </el-form-item>
+
+          <el-form-item v-if="activeData.justify !== undefined" label="水平排列">
+            <el-select v-model="activeData.justify" placeholder="请选择水平排列" :style="{ width: '100%' }">
+              <el-option v-for="(item, index) in justifyOptions" :key="index" :label="item.label" :value="item.value" />
+            </el-select>
+          </el-form-item>
+          <el-form-item v-if="activeData.align !== undefined" label="垂直排列">
+            <el-radio-group v-model="activeData.align">
+              <el-radio-button label="top" />
+              <el-radio-button label="middle" />
+              <el-radio-button label="bottom" />
+            </el-radio-group>
+          </el-form-item>
+          <el-form-item v-if="activeData.labelWidth !== undefined" label="标签宽度">
+            <el-input v-model.number="activeData.labelWidth" type="number" placeholder="请输入标签宽度" />
+          </el-form-item>
+          <el-form-item v-if="activeData.style && activeData.style.width !== undefined" label="组件宽度">
+            <el-input v-model="activeData.style.width" placeholder="请输入组件宽度" clearable />
+          </el-form-item>
+          <el-form-item v-if="activeData.vModel !== undefined" label="默认值">
+            <el-input :value="setDefaultValue(activeData.defaultValue)" placeholder="请输入默认值"
+              @input="onDefaultValueInput" />
+          </el-form-item>
+          <el-form-item v-if="activeData.tag === 'el-checkbox-group'" label="至少应选">
+            <el-input-number :value="activeData.min" :min="0" placeholder="至少应选"
+              @input="$set(activeData, 'min', $event ? $event : undefined)" />
+          </el-form-item>
+          <el-form-item v-if="activeData.tag === 'el-checkbox-group'" label="最多可选">
+            <el-input-number :value="activeData.max" :min="0" placeholder="最多可选"
+              @input="$set(activeData, 'max', $event ? $event : undefined)" />
+          </el-form-item>
+          <el-form-item v-if="activeData.prepend !== undefined" label="前缀">
+            <el-input v-model="activeData.prepend" placeholder="请输入前缀" />
+          </el-form-item>
+          <el-form-item v-if="activeData.append !== undefined" label="后缀">
+            <el-input v-model="activeData.append" placeholder="请输入后缀" />
+          </el-form-item>
+          <el-form-item v-if="activeData['prefix-icon'] !== undefined" label="前图标">
+            <el-input v-model="activeData['prefix-icon']" placeholder="请输入前图标名称">
+              <template #append>
+                <el-button icon="Pointer" @click="openIconsDialog('prefix-icon')">
+                  选择
+                </el-button>
+              </template>
+            </el-input>
+          </el-form-item>
+          <el-form-item v-if="activeData['suffix-icon'] !== undefined" label="后图标">
+            <el-input v-model="activeData['suffix-icon']" placeholder="请输入后图标名称">
+              <template #append>
+                <el-button icon="Pointer" @click="openIconsDialog('suffix-icon')">
+                  选择
+                </el-button>
+              </template>
+            </el-input>
+          </el-form-item>
+          <el-form-item v-if="activeData.tag === 'el-cascader'" label="选项分隔符">
+            <el-input v-model="activeData.separator" placeholder="请输入选项分隔符" />
+          </el-form-item>
+          <el-form-item v-if="activeData.autosize !== undefined" label="最小行数">
+            <el-input-number v-model="activeData.autosize.minRows" :min="1" placeholder="最小行数" />
+          </el-form-item>
+          <el-form-item v-if="activeData.autosize !== undefined" label="最大行数">
+            <el-input-number v-model="activeData.autosize.maxRows" :min="1" placeholder="最大行数" />
+          </el-form-item>
+          <el-form-item v-if="activeData.min !== undefined" label="最小值">
+            <el-input-number v-model="activeData.min" placeholder="最小值" />
+          </el-form-item>
+          <el-form-item v-if="activeData.max !== undefined" label="最大值">
+            <el-input-number v-model="activeData.max" placeholder="最大值" />
+          </el-form-item>
+          <el-form-item v-if="activeData.step !== undefined" label="步长">
+            <el-input-number v-model="activeData.step" placeholder="步数" />
+          </el-form-item>
+          <el-form-item v-if="activeData.tag === 'el-input-number'" label="精度">
+            <el-input-number v-model="activeData.precision" :min="0" placeholder="精度" />
+          </el-form-item>
+          <el-form-item v-if="activeData.tag === 'el-input-number'" label="按钮位置">
+            <el-radio-group v-model="activeData['controls-position']">
+              <el-radio-button label="">
+                默认
+              </el-radio-button>
+              <el-radio-button label="right">
+                右侧
+              </el-radio-button>
+            </el-radio-group>
+          </el-form-item>
+          <el-form-item v-if="activeData.maxlength !== undefined" label="最多输入">
+            <el-input v-model="activeData.maxlength" placeholder="请输入字符长度">
+              <template slot="append">
+                个字符
+              </template>
+            </el-input>
+          </el-form-item>
+          <el-form-item v-if="activeData['active-text'] !== undefined" label="开启提示">
+            <el-input v-model="activeData['active-text']" placeholder="请输入开启提示" />
+          </el-form-item>
+          <el-form-item v-if="activeData['inactive-text'] !== undefined" label="关闭提示">
+            <el-input v-model="activeData['inactive-text']" placeholder="请输入关闭提示" />
+          </el-form-item>
+          <el-form-item v-if="activeData['active-value'] !== undefined" label="开启值">
+            <el-input :value="setDefaultValue(activeData['active-value'])" placeholder="请输入开启值"
+              @input="onSwitchValueInput($event, 'active-value')" />
+          </el-form-item>
+          <el-form-item v-if="activeData['inactive-value'] !== undefined" label="关闭值">
+            <el-input :value="setDefaultValue(activeData['inactive-value'])" placeholder="请输入关闭值"
+              @input="onSwitchValueInput($event, 'inactive-value')" />
+          </el-form-item>
+          <el-form-item v-if="activeData.type !== undefined && 'el-date-picker' === activeData.tag" label="时间类型">
+            <el-select v-model="activeData.type" placeholder="请选择时间类型" :style="{ width: '100%' }"
+              @change="dateTypeChange">
+              <el-option v-for="(item, index) in dateOptions" :key="index" :label="item.label" :value="item.value" />
+            </el-select>
+          </el-form-item>
+          <el-form-item v-if="activeData.name !== undefined" label="文件字段名">
+            <el-input v-model="activeData.name" placeholder="请输入上传文件字段名" />
+          </el-form-item>
+          <el-form-item v-if="activeData.accept !== undefined" label="文件类型">
+            <el-select v-model="activeData.accept" placeholder="请选择文件类型" :style="{ width: '100%' }" clearable>
+              <el-option label="图片" value="image/*" />
+              <el-option label="视频" value="video/*" />
+              <el-option label="音频" value="audio/*" />
+              <el-option label="excel" value=".xls,.xlsx" />
+              <el-option label="word" value=".doc,.docx" />
+              <el-option label="pdf" value=".pdf" />
+              <el-option label="txt" value=".txt" />
+            </el-select>
+          </el-form-item>
+          <el-form-item v-if="activeData.fileSize !== undefined" label="文件大小">
+            <el-input v-model.number="activeData.fileSize" placeholder="请输入文件大小">
+              <el-select slot="append" v-model="activeData.sizeUnit" :style="{ width: '66px' }">
+                <el-option label="KB" value="KB" />
+                <el-option label="MB" value="MB" />
+                <el-option label="GB" value="GB" />
+              </el-select>
+            </el-input>
+          </el-form-item>
+          <el-form-item v-if="activeData.action !== undefined" label="上传地址">
+            <el-input v-model="activeData.action" placeholder="请输入上传地址" clearable />
+          </el-form-item>
+          <el-form-item v-if="activeData['list-type'] !== undefined" label="列表类型">
+            <el-radio-group v-model="activeData['list-type']" size="small">
+              <el-radio-button label="text">
+                text
+              </el-radio-button>
+              <el-radio-button label="picture">
+                picture
+              </el-radio-button>
+              <el-radio-button label="picture-card">
+                picture-card
+              </el-radio-button>
+            </el-radio-group>
+          </el-form-item>
+          <el-form-item v-if="activeData.buttonText !== undefined" v-show="'picture-card' !== activeData['list-type']"
+            label="按钮文字">
+            <el-input v-model="activeData.buttonText" placeholder="请输入按钮文字" />
+          </el-form-item>
+          <el-form-item v-if="activeData['range-separator'] !== undefined" label="分隔符">
+            <el-input v-model="activeData['range-separator']" placeholder="请输入分隔符" />
+          </el-form-item>
+          <el-form-item v-if="activeData['picker-options'] !== undefined" label="时间段">
+            <el-input v-model="activeData['picker-options'].selectableRange" placeholder="请输入时间段" />
+          </el-form-item>
+          <el-form-item v-if="activeData.format !== undefined" label="时间格式">
+            <el-input :value="activeData.format" placeholder="请输入时间格式" @input="setTimeValue($event)" />
+          </el-form-item>
+          <template v-if="['el-checkbox-group', 'el-radio-group', 'el-select'].indexOf(activeData.tag) > -1">
+            <el-divider>选项</el-divider>
+            <draggable :list="activeData.options" :animation="340" group="selectItem" handle=".option-drag"
+              item-key="label">
+              <template #item="{ element, index }">
+                <div :key="index" class="select-item">
+                  <div class="select-line-icon option-drag">
+                    <i class="el-icon-s-operation" />
+                  </div>
+                  <el-input v-model="element.label" placeholder="选项名" size="small" />
+                  <el-input placeholder="选项值" size="small" :value="element.value"
+                    @input="setOptionValue(element, $event)" />
+                  <div class="close-btn select-line-icon" @click="activeData.options.splice(index, 1)">
+                    <el-icon>
+                      <Remove />
+                    </el-icon>
+                  </div>
+                </div>
+              </template>
+            </draggable>
+            <div>
+              <el-button icon="CirclePlus" style="margin-left: 8px; margin-top: 10px;" text bg type="primary"
+                @click="addSelectItem">
+                添加选项
+              </el-button>
+            </div>
+            <el-divider />
+          </template>
+
+          <template v-if="['el-cascader'].indexOf(activeData.tag) > -1">
+            <el-divider>选项</el-divider>
+            <el-form-item label="数据类型">
+              <el-radio-group v-model="activeData.dataType" size="small">
+                <el-radio-button label="dynamic">
+                  动态数据
+                </el-radio-button>
+                <el-radio-button label="static">
+                  静态数据
+                </el-radio-button>
+              </el-radio-group>
+            </el-form-item>
+
+            <template v-if="activeData.dataType === 'dynamic'">
+              <el-form-item label="标签键名">
+                <el-input v-model="activeData.labelKey" placeholder="请输入标签键名" />
+              </el-form-item>
+              <el-form-item label="值键名">
+                <el-input v-model="activeData.valueKey" placeholder="请输入值键名" />
+              </el-form-item>
+              <el-form-item label="子级键名">
+                <el-input v-model="activeData.childrenKey" placeholder="请输入子级键名" />
+              </el-form-item>
+            </template>
+
+            <el-tree v-if="activeData.dataType === 'static'" draggable :data="activeData.options" node-key="id"
+              :expand-on-click-node="false" :render-content="renderContent" />
+            <div v-if="activeData.dataType === 'static'">
+              <el-button icon="CirclePlus" style="margin-left: 0; margin-top: 10px;" type="primary" text bg
+                @click="addTreeItem">
+                添加父级
+              </el-button>
+            </div>
+            <el-divider />
+          </template>
+
+          <el-form-item v-if="activeData.optionType !== undefined" label="选项样式">
+            <el-radio-group v-model="activeData.optionType">
+              <el-radio-button label="default">
+                默认
+              </el-radio-button>
+              <el-radio-button label="button">
+                按钮
+              </el-radio-button>
+            </el-radio-group>
+          </el-form-item>
+          <el-form-item v-if="activeData['active-color'] !== undefined" label="开启颜色">
+            <el-color-picker v-model="activeData['active-color']" />
+          </el-form-item>
+          <el-form-item v-if="activeData['inactive-color'] !== undefined" label="关闭颜色">
+            <el-color-picker v-model="activeData['inactive-color']" />
+          </el-form-item>
+
+          <el-form-item v-if="activeData['allow-half'] !== undefined" label="允许半选">
+            <el-switch v-model="activeData['allow-half']" />
+          </el-form-item>
+          <el-form-item v-if="activeData['show-text'] !== undefined" label="辅助文字">
+            <el-switch v-model="activeData['show-text']" @change="rateTextChange" />
+          </el-form-item>
+          <el-form-item v-if="activeData['show-score'] !== undefined" label="显示分数">
+            <el-switch v-model="activeData['show-score']" @change="rateScoreChange" />
+          </el-form-item>
+          <el-form-item v-if="activeData['show-stops'] !== undefined" label="显示间断点">
+            <el-switch v-model="activeData['show-stops']" />
+          </el-form-item>
+          <el-form-item v-if="activeData.range !== undefined" label="范围选择">
+            <el-switch v-model="activeData.range" @change="rangeChange" />
+          </el-form-item>
+          <el-form-item v-if="activeData.border !== undefined && activeData.optionType === 'default'" label="是否带边框">
+            <el-switch v-model="activeData.border" />
+          </el-form-item>
+          <el-form-item v-if="activeData.tag === 'el-color-picker'" label="颜色格式">
+            <el-select v-model="activeData['color-format']" placeholder="请选择颜色格式" :style="{ width: '100%' }"
+              @change="colorFormatChange">
+              <el-option v-for="(item, index) in colorFormatOptions" :key="index" :label="item.label"
+                :value="item.value" />
+            </el-select>
+          </el-form-item>
+          <el-form-item v-if="activeData.size !== undefined &&
+            (activeData.optionType === 'button' ||
+              activeData.border ||
+              activeData.tag === 'el-color-picker')" label="选项尺寸">
+            <el-radio-group v-model="activeData.size">
+              <el-radio-button label="large">
+                较大
+              </el-radio-button>
+              <el-radio-button label="default">
+                默认
+              </el-radio-button>
+              <el-radio-button label="small">
+                较小
+              </el-radio-button>
+            </el-radio-group>
+          </el-form-item>
+          <el-form-item v-if="activeData['show-word-limit'] !== undefined" label="输入统计">
+            <el-switch v-model="activeData['show-word-limit']" />
+          </el-form-item>
+          <el-form-item v-if="activeData.tag === 'el-input-number'" label="严格步数">
+            <el-switch v-model="activeData['step-strictly']" />
+          </el-form-item>
+          <el-form-item v-if="activeData.tag === 'el-cascader'" label="是否多选">
+            <el-switch v-model="activeData.props.props.multiple" />
+          </el-form-item>
+          <el-form-item v-if="activeData.tag === 'el-cascader'" label="展示全路径">
+            <el-switch v-model="activeData['show-all-levels']" />
+          </el-form-item>
+          <el-form-item v-if="activeData.tag === 'el-cascader'" label="可否筛选">
+            <el-switch v-model="activeData.filterable" />
+          </el-form-item>
+          <el-form-item v-if="activeData.clearable !== undefined" label="能否清空">
+            <el-switch v-model="activeData.clearable" />
+          </el-form-item>
+          <el-form-item v-if="activeData.showTip !== undefined" label="显示提示">
+            <el-switch v-model="activeData.showTip" />
+          </el-form-item>
+          <el-form-item v-if="activeData.multiple !== undefined" label="多选文件">
+            <el-switch v-model="activeData.multiple" />
+          </el-form-item>
+          <el-form-item v-if="activeData['auto-upload'] !== undefined" label="自动上传">
+            <el-switch v-model="activeData['auto-upload']" />
+          </el-form-item>
+          <el-form-item v-if="activeData.readonly !== undefined" label="是否只读">
+            <el-switch v-model="activeData.readonly" />
+          </el-form-item>
+          <el-form-item v-if="activeData.disabled !== undefined" label="是否禁用">
+            <el-switch v-model="activeData.disabled" />
+          </el-form-item>
+          <el-form-item v-if="activeData.tag === 'el-select'" label="是否可搜索">
+            <el-switch v-model="activeData.filterable" />
+          </el-form-item>
+          <el-form-item v-if="activeData.tag === 'el-select'" label="是否多选">
+            <el-switch v-model="activeData.multiple" @change="multipleChange" />
+          </el-form-item>
+          <el-form-item v-if="activeData.required !== undefined" label="是否必填">
+            <el-switch v-model="activeData.required" />
+          </el-form-item>
+
+          <template v-if="activeData.layoutTree">
+            <el-divider>布局结构树</el-divider>
+            <el-tree :data="[activeData]" :props="layoutTreeProps" node-key="renderKey" default-expand-all draggable>
+              <template #default="{ node, data }">
+                <span class="node-label">
+                  <svg-icon class="node-icon" :icon-class="data.tagIcon" style="margin-right: 5px;" />
+                  {{ node.label }}
+                </span>
+              </template>
+            </el-tree>
+          </template>
+
+          <template v-if="activeData.layout === 'colFormItem'">
+            <el-divider>正则校验</el-divider>
+            <div v-for="(item, index) in activeData.regList" :key="index" class="reg-item">
+              <span class="close-btn" @click="activeData.regList.splice(index, 1)">
+                <el-icon>
+                  <Close />
+                </el-icon>
+              </span>
+              <el-form-item label="表达式">
+                <el-input v-model="item.pattern" placeholder="请输入正则" />
+              </el-form-item>
+              <el-form-item label="错误提示" style="margin-bottom:0">
+                <el-input v-model="item.message" placeholder="请输入错误提示" />
+              </el-form-item>
+            </div>
+            <div>
+              <el-button icon="CirclePlus" style="margin-left: 0; margin-top: 10px;" type="primary" text bg
+                @click="addReg">
+                添加规则
+              </el-button>
+            </div>
+          </template>
+        </el-form>
+        <!-- 表单属性 -->
+        <el-form v-show="currentTab === 'form'" label-width="90px" label-position="top">
+          <el-form-item label="表单名">
+            <el-input v-model="formConf.formRef" placeholder="请输入表单名（ref）" />
+          </el-form-item>
+          <el-form-item label="表单模型">
+            <el-input v-model="formConf.formModel" placeholder="请输入数据模型" />
+          </el-form-item>
+          <el-form-item label="校验模型">
+            <el-input v-model="formConf.formRules" placeholder="请输入校验模型" />
+          </el-form-item>
+          <el-form-item label="表单尺寸">
+            <el-radio-group v-model="formConf.size">
+              <el-radio-button label="large" value="较大" />
+              <el-radio-button label="default" value="默认" />
+              <el-radio-button label="small" value="较小" />
+            </el-radio-group>
+          </el-form-item>
+          <el-form-item label="标签对齐">
+            <el-radio-group v-model="formConf.labelPosition">
+              <el-radio-button label="left" value="左对齐" />
+              <el-radio-button label="right" value="右对齐" />
+              <el-radio-button label="top" value="顶部对齐" />
+            </el-radio-group>
+          </el-form-item>
+          <el-form-item label="标签宽度">
+            <el-input-number v-model="formConf.labelWidth" placeholder="标签宽度" />
+          </el-form-item>
+          <el-form-item label="栅格间隔">
+            <el-input-number v-model="formConf.gutter" :min="0" placeholder="栅格间隔" />
+          </el-form-item>
+          <el-form-item label="禁用表单">
+            <el-switch v-model="formConf.disabled" />
+          </el-form-item>
+          <el-form-item label="表单按钮">
+            <el-switch v-model="formConf.formBtns" />
+          </el-form-item>
+          <el-form-item label="显示未选中组件边框">
+            <el-switch v-model="formConf.unFocusedComponentBorder" />
+          </el-form-item>
+        </el-form>
+      </el-scrollbar>
+    </div>
+    <icons-dialog v-model="iconsVisible" :current="activeData[currentIconModel]" @select="setIcon" />
+    <treeNode-dialog v-model="dialogVisible" @commit="addNode" />
+
+  </div>
+</template>
+
+<script setup>
+import draggable from "vuedraggable/dist/vuedraggable.common"
+import { isNumberStr } from '@/utils/index'
+import IconsDialog from './IconsDialog'
+import TreeNodeDialog from './TreeNodeDialog'
+import { inputComponents, selectComponents } from '@/utils/generator/config'
+
+const { proxy } = getCurrentInstance()
+const dateTimeFormat = {
+  date: 'YYYY-MM-DD',
+  week: 'YYYY 第 ww 周',
+  month: 'YYYY-MM',
+  year: 'YYYY',
+  datetime: 'YYYY-MM-DD HH:mm:ss',
+  daterange: 'YYYY-MM-DD',
+  monthrange: 'YYYY-MM',
+  datetimerange: 'YYYY-MM-DD HH:mm:ss'
+}
+const props = defineProps({
+  showField: Boolean,
+  activeData: Object,
+  formConf: Object
+})
+
+const data = reactive({
+  currentTab: 'field',
+  currentNode: null,
+  dialogVisible: false,
+  iconsVisible: false,
+  currentIconModel: null,
+  dateTypeOptions: [
+    {
+      label: '日(date)',
+      value: 'date'
+    },
+    {
+      label: '周(week)',
+      value: 'week'
+    },
+    {
+      label: '月(month)',
+      value: 'month'
+    },
+    {
+      label: '年(year)',
+      value: 'year'
+    },
+    {
+      label: '日期时间(datetime)',
+      value: 'datetime'
+    }
+  ],
+  dateRangeTypeOptions: [
+    {
+      label: '日期范围(daterange)',
+      value: 'daterange'
+    },
+    {
+      label: '月范围(monthrange)',
+      value: 'monthrange'
+    },
+    {
+      label: '日期时间范围(datetimerange)',
+      value: 'datetimerange'
+    }
+  ],
+  colorFormatOptions: [
+    {
+      label: 'hex',
+      value: 'hex'
+    },
+    {
+      label: 'rgb',
+      value: 'rgb'
+    },
+    {
+      label: 'rgba',
+      value: 'rgba'
+    },
+    {
+      label: 'hsv',
+      value: 'hsv'
+    },
+    {
+      label: 'hsl',
+      value: 'hsl'
+    }
+  ],
+  justifyOptions: [
+    {
+      label: 'start',
+      value: 'start'
+    },
+    {
+      label: 'end',
+      value: 'end'
+    },
+    {
+      label: 'center',
+      value: 'center'
+    },
+    {
+      label: 'space-around',
+      value: 'space-around'
+    },
+    {
+      label: 'space-between',
+      value: 'space-between'
+    }
+  ],
+  layoutTreeProps: {
+    label(data, node) {
+      return data.componentName || `${data.label}: ${data.vModel}`
+    }
+  }
+})
+
+const { currentTab, currentNode, dialogVisible, iconsVisible, currentIconModel, dateTypeOptions, dateRangeTypeOptions, colorFormatOptions, justifyOptions, layoutTreeProps } = toRefs(data)
+
+const documentLink = computed(() => props.activeData.document || 'https://element-plus.org/zh-CN/guide/installation')
+
+const dateOptions = computed(() => {
+  if (props.activeData.type !== undefined && props.activeData.tag === 'el-date-picker') {
+    if (props.activeData['start-placeholder'] === undefined) {
+      return dateTypeOptions.value
+    }
+    return dateRangeTypeOptions.value
+  }
+  return []
+})
+
+const tagList = ref([
+  {
+    label: '输入型组件',
+    options: inputComponents
+  },
+  {
+    label: '选择型组件',
+    options: selectComponents
+  }
+])
+
+const emit = defineEmits(['tag-change'])
+
+function addReg() {
+  props.activeData.regList.push({
+    pattern: '',
+    message: ''
+  })
+}
+function addSelectItem() {
+  props.activeData.options.push({
+    label: '',
+    value: ''
+  })
+}
+
+function addTreeItem() {
+  ++proxy.idGlobal
+  dialogVisible.value = true
+  currentNode.value = props.activeData.options
+}
+
+function renderContent(h, { node, data, store }) {
+  return h('div', {
+    class: "custom-tree-node"
+  }, [
+    h('span', node.label),
+    h('span', {
+      class: "node-operation"
+    }, [
+      h(resolveComponent('el-link'), {
+        type: "primary",
+        icon: "Plus",
+        underline: false,
+        onClick: () => {
+          append(data)
+
+        }
+      }),
+      h(resolveComponent('el-link'), {
+        type: "danger",
+        icon: "Delete",
+        underline: false,
+        style: "margin-left: 5px;",
+        onClick: () => {
+          remove(node, data)
+        }
+      })
+    ])
+  ])
+}
+function append(data) {
+  if (!data.children) {
+    data.children = []
+  }
+  dialogVisible.value = true
+  currentNode.value = data.children
+}
+function remove(node, data) {
+  const { parent } = node
+  const children = parent.data.children || parent.data
+  const index = children.findIndex(d => d.id === data.id)
+  children.splice(index, 1)
+}
+function addNode(data) {
+  currentNode.value.push(data)
+}
+
+function setOptionValue(item, val) {
+  item.value = isNumberStr(val) ? +val : val
+}
+function setDefaultValue(val) {
+  if (Array.isArray(val)) {
+    return val.join(',')
+  }
+  if (['string', 'number'].indexOf(val) > -1) {
+    return val
+  }
+  if (typeof val === 'boolean') {
+    return `${val}`
+  }
+  return val
+}
+
+function onDefaultValueInput(str) {
+  if (Array.isArray(props.activeData.defaultValue)) {
+    // 数组
+    props.activeData.defaultValue = str.split(',').map(val => (isNumberStr(val) ? +val : val))
+  } else if (['true', 'false'].indexOf(str) > -1) {
+    // 布尔
+    props.activeData.defaultValue = JSON.parse(str)
+  } else {
+    // 字符串和数字
+    props.activeData.defaultValue = isNumberStr(str) ? +str : str
+  }
+}
+
+function onSwitchValueInput(val, name) {
+  if (['true', 'false'].indexOf(val) > -1) {
+    props.activeData[name] = JSON.parse(val)
+  } else {
+    props.activeData[name] = isNumberStr(val) ? +val : val
+  }
+}
+
+function setTimeValue(val, type) {
+  const valueFormat = type === 'week' ? dateTimeFormat.date : val
+  props.activeData.defaultValue = null
+  props.activeData['value-format'] = valueFormat
+  props.activeData.format = val
+}
+
+function spanChange(val) {
+  props.formConf.span = val
+}
+
+function multipleChange(val) {
+  props.activeData.defaultValue = val ? [] : ''
+}
+
+function dateTypeChange(val) {
+  setTimeValue(dateTimeFormat[val], val)
+}
+
+function rangeChange(val) {
+  props.activeData.defaultValue = val ? [props.activeData.min, props.activeData.max] : props.activeData.min
+}
+
+function rateTextChange(val) {
+  if (val) props.activeData['show-score'] = false
+}
+
+function rateScoreChange(val) {
+  if (val) props.activeData['show-text'] = false
+}
+
+function colorFormatChange(val) {
+  props.activeData.defaultValue = null
+  props.activeData['show-alpha'] = val.indexOf('a') > -1
+  props.activeData.renderKey = +new Date() // 更新renderKey,重新渲染该组件
+}
+
+function openIconsDialog(model) {
+  iconsVisible.value = true
+  currentIconModel.value = model
+}
+
+function setIcon(val) {
+  props.activeData[currentIconModel.value] = val
+}
+
+function tagChange(tagIcon) {
+  let target = inputComponents.find(item => item.tagIcon === tagIcon)
+  if (!target) target = selectComponents.find(item => item.tagIcon === tagIcon)
+  emit('tag-change', target)
+}
+</script>
+
+<style lang="scss" scoped>
+.right-board {
+  width: 350px;
+  position: absolute;
+  right: 0;
+  top: 0;
+  padding-top: 3px;
+
+  &:deep() {
+    .el-tabs__header {
+      margin: 0;
+    }
+
+    .el-input-group__append .el-button {
+      display: inline-flex;
+    }
+  }
+
+  .field-box {
+    position: relative;
+    height: calc(100vh - 50px - 40px - 42px);
+    box-sizing: border-box;
+    overflow: hidden;
+  }
+
+  .el-scrollbar {
+    height: 100%;
+
+    &:deep() {
+      .el-scrollbar__view {
+        padding: 30px 20px;
+      }
+
+    }
+  }
+}
+
+.reg-item {
+  padding: 12px 6px;
+  background: var(--el-border-color-extra-light);
+  position: relative;
+  border-radius: 4px;
+
+  .close-btn {
+    position: absolute;
+    right: -6px;
+    top: -6px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 16px;
+    height: 16px;
+    line-height: 16px;
+    background: rgba(0, 0, 0, .2);
+    border-radius: 50%;
+    color: #fff;
+    z-index: 1;
+    cursor: pointer;
+    font-size: 12px;
+  }
+}
+
+.select-item {
+  display: flex;
+  border: 1px dashed #fff;
+  box-sizing: border-box;
+
+  & .close-btn {
+    cursor: pointer;
+    color: #f56c6c;
+  }
+
+  & .el-input+.el-input {
+    margin-left: 4px;
+  }
+}
+
+.select-item+.select-item {
+  margin-top: 4px;
+}
+
+.select-item.sortable-chosen {
+  border: 1px dashed #409eff;
+}
+
+.select-line-icon {
+  line-height: 32px;
+  font-size: 22px;
+  padding: 0 4px;
+  color: #777;
+}
+
+.option-drag {
+  cursor: move;
+}
+
+.time-range {
+  .el-date-editor {
+    width: 227px;
+  }
+
+  :deep() {
+    .el-icon-time {
+      display: none;
+    }
+  }
+}
+
+.document-link {
+  position: absolute;
+  display: flex;
+  width: 26px;
+  height: 26px;
+  top: 0;
+  left: 0;
+  cursor: pointer;
+  background: #409eff;
+  z-index: 1;
+  border-radius: 0 0 6px 0;
+  justify-content: center;
+  align-items: center;
+  color: #fff;
+  font-size: 18px;
+}
+
+.node-label {
+  font-size: 14px;
+}
+
+.node-icon {
+  color: #bebfc3;
+}
+
+.custom-tree-node {
+  flex: 1;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  font-size: 14px;
+  padding-right: 8px;
+}
+</style>

src/views/tool/build/TreeNodeDialog.vue

@@ -0,0 +1,93 @@
+<template>
+  <div>
+    <el-dialog title="添加选项" v-model="open" width="800px" :close-on-click-modal="false" :modal-append-to-body="false"
+      @open="onOpen" @close="onClose">
+      <el-form ref="treeNodeForm" :model="formData" :rules="rules" label-width="100px">
+        <el-col :span="24">
+          <el-form-item label="选项名" prop="label">
+            <el-input v-model="formData.label" placeholder="请输入选项名" clearable />
+          </el-form-item>
+        </el-col>
+        <el-col :span="24">
+          <el-form-item label="选项值" prop="value">
+            <el-input v-model="formData.value" placeholder="请输入选项值" clearable>
+              <template #append>
+                <el-select v-model="dataType" :style="{ width: '100px' }">
+                  <el-option v-for="(item, index) in dataTypeOptions" :key="index" :label="item.label" :value="item.value"
+                    :disabled="item.disabled" />
+                </el-select>
+              </template>
+
+            </el-input>
+          </el-form-item>
+        </el-col>
+      </el-form>
+      <template #footer>
+        <div class="dialog-footer">
+          <el-button type="primary" @click="handelConfirm">确 定</el-button>
+          <el-button @click="onClose">取 消</el-button>
+        </div>
+      </template>
+    </el-dialog>
+  </div>
+</template>
+<script setup>
+const open = defineModel()
+const emit = defineEmits(['confirm'])
+const formData = ref({
+  label: undefined,
+  value: undefined
+})
+const rules = {
+  label: [
+    {
+      required: true,
+      message: '请输入选项名',
+      trigger: 'blur'
+    }
+  ],
+  value: [
+    {
+      required: true,
+      message: '请输入选项值',
+      trigger: 'blur'
+    }
+  ]
+}
+const dataType = ref('string')
+const dataTypeOptions = ref([
+  {
+    label: '字符串',
+    value: 'string'
+  },
+  {
+    label: '数字',
+    value: 'number'
+  }
+])
+const id = ref(100)
+const treeNodeForm = ref()
+
+function onOpen() {
+  formData.value = {
+    label: undefined,
+    value: undefined
+  }
+}
+
+function onClose() {
+  open.value = false
+}
+
+function handelConfirm() {
+  treeNodeForm.value.validate(valid => {
+    if (!valid) return
+    if (dataType.value === 'number') {
+      formData.value.value = parseFloat(formData.value.value)
+    }
+    formData.value.id = id.value++
+    emit('commit', formData.value)
+    onClose()
+  })
+}
+</script>

src/views/tool/build/index.vue

@@ -0,0 +1,653 @@
+<template>
+  <div class="container">
+    <div class="left-board">
+      <div class="logo-wrapper">
+        <div class="logo">
+          <img :src="logo" alt="logo"> Form Generator
+        </div>
+      </div>
+      <el-scrollbar class="left-scrollbar">
+        <div class="components-list">
+          <div class="components-title">
+            <svg-icon icon-class="component" />输入型组件
+          </div>
+          <draggable class="components-draggable" :list="inputComponents"
+            :group="{ name: 'componentsGroup', pull: 'clone', put: false }" :clone="cloneComponent"
+            draggable=".components-item" :sort="false" @end="onEnd" item-key="label">
+            <template #item="{ element, index }">
+              <div :key="index" class="components-item" @click="addComponent(element)">
+                <div class="components-body">
+                  <svg-icon :icon-class="element.tagIcon" />
+                  {{ element.label }}
+                </div>
+              </div>
+            </template>
+          </draggable>
+          <div class="components-title">
+            <svg-icon icon-class="component" />选择型组件
+          </div>
+          <draggable class="components-draggable" :list="selectComponents"
+            :group="{ name: 'componentsGroup', pull: 'clone', put: false }" :clone="cloneComponent"
+            draggable=".components-item" :sort="false" @end="onEnd" item-key="label">
+            <template #item="{ element, index }">
+              <div :key="index" class="components-item" @click="addComponent(element)">
+                <div class="components-body">
+                  <svg-icon :icon-class="element.tagIcon" />
+                  {{ element.label }}
+                </div>
+              </div>
+            </template>
+          </draggable>
+          <div class="components-title">
+            <svg-icon icon-class="component" /> 布局型组件
+          </div>
+          <draggable class="components-draggable" :list="layoutComponents"
+            :group="{ name: 'componentsGroup', pull: 'clone', put: false }" :clone="cloneComponent"
+            draggable=".components-item" :sort="false" @end="onEnd" item-key="label">
+            <template #item="{ element, index }">
+              <div :key="index" class="components-item" @click="addComponent(element)">
+                <div class="components-body">
+                  <svg-icon :icon-class="element.tagIcon" />
+                  {{ element.label }}
+                </div>
+              </div>
+            </template>
+          </draggable>
+        </div>
+      </el-scrollbar>
+    </div>
+    <div class="center-board">
+      <div class="action-bar">
+        <el-button icon="Download" type="primary" text @click="download">
+          导出vue文件
+        </el-button>
+        <el-button class="copy-btn-main" icon="DocumentCopy" type="primary" text @click="copy">
+          复制代码
+        </el-button>
+        <el-button class="delete-btn" icon="Delete" text @click="empty" type="danger">
+          清空
+        </el-button>
+      </div>
+      <el-scrollbar class="center-scrollbar">
+        <el-row class="center-board-row" :gutter="formConf.gutter">
+          <el-form :size="formConf.size" :label-position="formConf.labelPosition" :disabled="formConf.disabled"
+            :label-width="formConf.labelWidth + 'px'">
+            <draggable class="drawing-board" :list="drawingList" :animation="340" group="componentsGroup"
+              item-key="label">
+              <template #item="{ element, index }">
+                <draggable-item :key="element.renderKey" :drawing-list="drawingList" :element="element" :index="index"
+                  :active-id="activeId" :form-conf="formConf" @activeItem="activeFormItem" @copyItem="drawingItemCopy"
+                  @deleteItem="drawingItemDelete" />
+              </template>
+            </draggable>
+            <div v-show="!drawingList.length" class="empty-info">
+              从左侧拖入或点选组件进行表单设计
+            </div>
+          </el-form>
+        </el-row>
+      </el-scrollbar>
+    </div>
+    <right-panel :active-data="activeData" :form-conf="formConf" :show-field="!!drawingList.length"
+      @tag-change="tagChange" />
+
+    <code-type-dialog v-model="dialogVisible" title="选择生成类型" :showFileName="showFileName" @confirm="generate" />
+    <input id="copyNode" type="hidden">
+  </div>
+</template>
+
+<script setup>
+import draggable from "vuedraggable/dist/vuedraggable.common"
+import ClipboardJS from 'clipboard'
+import beautifier from 'js-beautify'
+import logo from '@/assets/logo/logo.png'
+import { inputComponents, selectComponents, layoutComponents, formConf as formConfData } from '@/utils/generator/config'
+import { beautifierConf } from '@/utils/index'
+import drawingDefalut from '@/utils/generator/drawingDefalut'
+import { makeUpHtml, vueTemplate, vueScript, cssStyle } from '@/utils/generator/html'
+import { makeUpJs } from '@/utils/generator/js'
+import { makeUpCss } from '@/utils/generator/css'
+import Download from '@/plugins/download'
+import { ElNotification } from 'element-plus'
+import DraggableItem from './DraggableItem'
+import RightPanel from './RightPanel'
+import CodeTypeDialog from './CodeTypeDialog'
+import { onMounted, watch } from 'vue'
+
+const drawingList = ref(drawingDefalut)
+const { proxy } = getCurrentInstance()
+const dialogVisible = ref(false)
+const showFileName = ref(false)
+const operationType = ref('')
+const idGlobal = ref(100)
+const activeData = ref(drawingDefalut[0])
+const activeId = ref(drawingDefalut[0].formId)
+const generateConf = ref(null)
+const formData = ref({})
+const formConf = ref(formConfData)
+let oldActiveId
+let tempActiveData
+
+function activeFormItem(element) {
+  activeData.value = element
+  activeId.value = element.formId
+}
+function copy() {
+  dialogVisible.value = true
+  showFileName.value = false
+  operationType.value = 'copy'
+}
+function download() {
+  dialogVisible.value = true
+  showFileName.value = true
+  operationType.value = 'download'
+}
+function empty() {
+  proxy.$modal.confirm('确定要清空所有组件吗？', '提示', { type: 'warning' }).then(() => {
+      idGlobal.value = 100
+      drawingList.value = []
+    }
+  )
+}
+
+function onEnd(obj, a) {
+  if (obj.from !== obj.to) {
+    activeData.value = tempActiveData
+    activeId.value = idGlobal.value
+  }
+}
+
+function addComponent(item) {
+  const clone = cloneComponent(item)
+  drawingList.value.push(clone)
+  activeFormItem(clone)
+}
+
+function cloneComponent(origin) {
+  const clone = JSON.parse(JSON.stringify(origin))
+  clone.formId = ++idGlobal.value
+  clone.span = formConf.value.span
+  clone.renderKey = +new Date() // 改变renderKey后可以实现强制更新组件
+  if (!clone.layout) clone.layout = 'colFormItem'
+  if (clone.layout === 'colFormItem') {
+    clone.vModel = `field${idGlobal.value}`
+    clone.placeholder !== undefined && (clone.placeholder += clone.label)
+    tempActiveData = clone
+  } else if (clone.layout === 'rowFormItem') {
+    delete clone.label
+    clone.componentName = `row${idGlobal.value}`
+    clone.gutter = formConf.value.gutter
+    tempActiveData = clone
+  }
+  return tempActiveData
+}
+
+function drawingItemCopy(item, parent) {
+  let clone = JSON.parse(JSON.stringify(item))
+  clone = createIdAndKey(clone)
+  parent.push(clone)
+  activeFormItem(clone)
+}
+
+
+function createIdAndKey(item) {
+  item.formId = ++idGlobal.value
+  item.renderKey = +new Date()
+  if (item.layout === 'colFormItem') {
+    item.vModel = `field${idGlobal.value}`
+  } else if (item.layout === 'rowFormItem') {
+    item.componentName = `row${idGlobal.value}`
+  }
+  if (Array.isArray(item.children)) {
+    item.children = item.children.map(childItem => createIdAndKey(childItem))
+  }
+  return item
+}
+
+function drawingItemDelete(index, parent) {
+  parent.splice(index, 1)
+  nextTick(() => {
+    const len = drawingList.value.length
+    if (len) {
+      activeFormItem(drawingList.value[len - 1])
+    }
+  })
+}
+
+function tagChange(newTag) {
+  newTag = cloneComponent(newTag)
+  newTag.vModel = activeData.value.vModel
+  newTag.formId = activeId.value
+  newTag.span = activeData.value.span
+  delete activeData.value.tag
+  delete activeData.value.tagIcon
+  delete activeData.value.document
+  Object.keys(newTag).forEach(key => {
+    if (activeData.value[key] !== undefined
+      && typeof activeData.value[key] === typeof newTag[key]) {
+      newTag[key] = activeData.value[key]
+    }
+  })
+  activeData.value = newTag
+  updateDrawingList(newTag, drawingList.value)
+}
+
+
+function updateDrawingList(newTag, list) {
+  const index = list.findIndex(item => item.formId === activeId.value)
+  if (index > -1) {
+    list.splice(index, 1, newTag)
+  } else {
+    list.forEach(item => {
+      if (Array.isArray(item.children)) updateDrawingList(newTag, item.children)
+    })
+  }
+}
+function generate(data) {
+  generateConf.value = data
+  nextTick(() => {
+    switch (operationType.value) {
+      case 'copy':
+        execCopy(data)
+        break
+      case 'download':
+        execDownload(data)
+        break
+      default:
+        break
+    }
+  })
+}
+
+function execDownload(data) {
+  const codeStr = generateCode()
+  const blob = new Blob([codeStr], { type: 'text/plain;charset=utf-8' })
+  Download.saveAs(blob, data.fileName)
+}
+
+function execCopy(data) {
+  document.getElementById('copyNode').click()
+}
+function AssembleFormData() {
+  formData.value = { fields: JSON.parse(JSON.stringify(drawingList.value)), ...formConf.value }
+}
+function generateCode() {
+  const { type } = generateConf.value
+  AssembleFormData()
+  const script = vueScript(makeUpJs(formData.value, type))
+  const html = vueTemplate(makeUpHtml(formData.value, type))
+  const css = cssStyle(makeUpCss(formData.value))
+  return beautifier.html(html + script + css, beautifierConf.html)
+}
+watch(() => activeData.value.label, (val, oldVal) => {
+  if (
+    activeData.value.placeholder === undefined
+    || !activeData.value.tag
+    || oldActiveId !== activeId.value
+  ) {
+    return
+  }
+  activeData.value.placeholder = activeData.value.placeholder.replace(oldVal, '') + val
+})
+watch(activeId, (val) => {
+  oldActiveId = val
+}, { immediate: true })
+
+onMounted(() => {
+  const clipboard = new ClipboardJS('#copyNode', {
+    text: trigger => {
+      const codeStr = generateCode()
+      ElNotification({ title: '成功', message: '代码已复制到剪切板，可粘贴。', type: 'success' })
+      return codeStr
+    }
+  })
+  clipboard.on('error', e => {
+    proxy.$modal.msgError('代码复制失败')
+  })
+})
+</script>
+
+<style lang='scss'>
+$lighterBlue: #409EFF;
+
+.container {
+  position: relative;
+  width: 100%;
+  background-color: var(--el-bg-color-overlay);
+  height: calc(100vh - 50px - 40px);
+  overflow: hidden;
+
+  .left-board {
+    width: 260px;
+    position: absolute;
+    left: 0;
+    top: 0;
+    height: calc(100vh - 50px - 40px);
+
+    .logo-wrapper {
+      position: relative;
+      height: 42px;
+      border-bottom: 1px solid var(--el-border-color-extra-light);
+      box-sizing: border-box;
+
+      .logo {
+        position: absolute;
+        left: 12px;
+        top: 6px;
+        line-height: 30px;
+        color: #00afff;
+        font-weight: 600;
+        font-size: 17px;
+        white-space: nowrap;
+
+        >img {
+          width: 30px;
+          height: 30px;
+          vertical-align: top;
+        }
+
+        .github {
+          display: inline-block;
+          vertical-align: sub;
+          margin-left: 15px;
+
+          >img {
+            height: 22px;
+          }
+        }
+      }
+    }
+
+    .left-scrollbar {
+      .el-scrollbar__wrap {
+        box-sizing: border-box;
+        overflow-x: hidden !important;
+        margin-bottom: 0 !important;
+
+        .components-list {
+          padding: 8px;
+          box-sizing: border-box;
+          height: 100%;
+
+          .components-title {
+            font-size: 14px;
+            // color: #222;
+            margin: 6px 2px;
+
+            .svg-icon {
+              // color: #666;
+              font-size: 18px;
+              margin-right: 5px;
+            }
+          }
+
+          .components-draggable {
+            padding-bottom: 20px;
+
+            .components-item {
+              display: inline-block;
+              width: 48%;
+              margin: 1%;
+              transition: transform 0ms !important;
+
+              .components-body {
+                padding: 8px 10px;
+                background: var(--el-border-color-extra-light);
+                font-size: 12px;
+                cursor: move;
+                border: 1px dashed var(--el-border-color-extra-light);
+                border-radius: 3px;
+
+                .svg-icon {
+                  // color: #777;
+                  font-size: 15px;
+                  margin-right: 5px;
+                }
+
+                &:hover {
+                  border: 1px dashed #787be8;
+                  color: #787be8;
+
+                  .svg-icon {
+                    color: #787be8;
+                  }
+                }
+              }
+            }
+          }
+
+
+        }
+      }
+    }
+  }
+
+  .center-board {
+    height: calc(100vh - 50px - 40px);
+    width: auto;
+    margin: 0 350px 0 260px;
+    box-sizing: border-box;
+
+    .action-bar {
+      position: relative;
+      height: 42px;
+      padding: 0 15px;
+      box-sizing: border-box;
+      ;
+      border: 1px solid var(--el-border-color-extra-light);
+      border-top: none;
+      border-left: none;
+      display: flex;
+      align-items: center;
+      justify-content: flex-end;
+
+      u .delete-btn {
+        color: #F56C6C;
+      }
+    }
+
+    .center-scrollbar {
+      height: calc(100vh - 50px - 40px - 42px);
+      overflow: hidden;
+      border-left: 1px solid var(--el-border-color-extra-light);
+      border-right: 1px solid var(--el-border-color-extra-light);
+      box-sizing: border-box;
+
+      .el-scrollbar__view {
+        overflow-x: hidden;
+      }
+
+      .center-board-row {
+        padding: 12px 12px 15px 12px;
+        box-sizing: border-box;
+
+        &>.el-form {
+          // 69 = 12+15+42
+          height: calc(100vh - 50px - 40px - 69px);
+          flex: 1;
+
+          .drawing-board {
+            height: 100%;
+            position: relative;
+
+            .components-body {
+              padding: 0;
+              margin: 0;
+              font-size: 0;
+            }
+
+            .sortable-ghost {
+              position: relative;
+              display: block;
+              overflow: hidden;
+
+              &::before {
+                content: " ";
+                position: absolute;
+                left: 0;
+                right: 0;
+                top: 0;
+                height: 3px;
+                background: rgb(89, 89, 223);
+                z-index: 2;
+              }
+            }
+
+            .components-item.sortable-ghost {
+              width: 100%;
+              height: 60px;
+              background: var(--el-border-color-extra-light);
+            }
+
+            .active-from-item {
+              &>.el-form-item {
+                background: var(--el-border-color-extra-light);
+                border-radius: 6px;
+              }
+
+              &>.drawing-item-copy,
+              &>.drawing-item-delete {
+                display: initial;
+              }
+
+              &>.component-name {
+                color: $lighterBlue;
+              }
+
+              .el-input__wrapper {
+                box-shadow: 0 0 0 1px var(--el-input-hover-border-color) inset;
+              }
+            }
+
+            .el-form-item {
+              margin-bottom: 15px;
+            }
+          }
+
+          .drawing-item {
+            position: relative;
+            cursor: move;
+
+            &.unfocus-bordered:not(.activeFromItem)>div:first-child {
+              border: 1px dashed #ccc;
+            }
+
+            .el-form-item {
+              padding: 12px 10px;
+            }
+          }
+
+          .drawing-row-item {
+            position: relative;
+            cursor: move;
+            box-sizing: border-box;
+            border: 1px dashed #ccc;
+            border-radius: 3px;
+            padding: 0 2px;
+            margin-bottom: 15px;
+
+            .drawing-row-item {
+              margin-bottom: 2px;
+            }
+
+            .el-col {
+              margin-top: 22px;
+            }
+
+            .el-form-item {
+              margin-bottom: 0;
+            }
+
+            .drag-wrapper {
+              min-height: 80px;
+              flex: 1;
+              display: flex;
+              flex-wrap: wrap;
+            }
+
+            &.active-from-item {
+              border: 1px dashed $lighterBlue;
+            }
+
+            .component-name {
+              position: absolute;
+              top: 0;
+              left: 0;
+              font-size: 12px;
+              color: #bbb;
+              display: inline-block;
+              padding: 0 6px;
+            }
+          }
+
+          .drawing-item,
+          .drawing-row-item {
+            &:hover {
+              &>.el-form-item {
+                background: var(--el-border-color-extra-light);
+                border-radius: 6px;
+              }
+
+              &>.drawing-item-copy,
+              &>.drawing-item-delete {
+                display: initial;
+              }
+            }
+
+            &>.drawing-item-copy,
+            &>.drawing-item-delete {
+              display: none;
+              position: absolute;
+              top: -10px;
+              width: 22px;
+              height: 22px;
+              line-height: 22px;
+              text-align: center;
+              border-radius: 50%;
+              font-size: 12px;
+              border: 1px solid;
+              cursor: pointer;
+              z-index: 1;
+            }
+
+            &>.drawing-item-copy {
+              right: 56px;
+              border-color: $lighterBlue;
+              color: $lighterBlue;
+              background: #fff;
+
+              &:hover {
+                background: $lighterBlue;
+                color: #fff;
+              }
+            }
+
+            &>.drawing-item-delete {
+              right: 24px;
+              border-color: #F56C6C;
+              color: #F56C6C;
+              background: #fff;
+
+              &:hover {
+                background: #F56C6C;
+                color: #fff;
+              }
+            }
+          }
+
+          .empty-info {
+            position: absolute;
+            top: 46%;
+            left: 0;
+            right: 0;
+            text-align: center;
+            font-size: 18px;
+            color: #ccb1ea;
+            letter-spacing: 4px;
+          }
+
+        }
+      }
+    }
+  }
+}
+</style>

src/views/tool/gen/basicInfoForm.vue

@@ -0,0 +1,48 @@
+<template>
+  <el-form ref="basicInfoForm" :model="info" :rules="rules" label-width="150px">
+    <el-row>
+      <el-col :span="12">
+        <el-form-item label="表名称" prop="tableName">
+          <el-input placeholder="请输入仓库名称" v-model="info.tableName" />
+        </el-form-item>
+      </el-col>
+      <el-col :span="12">
+        <el-form-item label="表描述" prop="tableComment">
+          <el-input placeholder="请输入" v-model="info.tableComment" />
+        </el-form-item>
+      </el-col>
+      <el-col :span="12">
+        <el-form-item label="实体类名称" prop="className">
+          <el-input placeholder="请输入" v-model="info.className" />
+        </el-form-item>
+      </el-col>
+      <el-col :span="12">
+        <el-form-item label="作者" prop="functionAuthor">
+          <el-input placeholder="请输入" v-model="info.functionAuthor" />
+        </el-form-item>
+      </el-col>
+      <el-col :span="24">
+        <el-form-item label="备注" prop="remark">
+          <el-input type="textarea" :rows="3" v-model="info.remark"></el-input>
+        </el-form-item>
+      </el-col>
+    </el-row>
+  </el-form>
+</template>
+
+<script setup>
+defineProps({
+  info: {
+    type: Object,
+    default: null
+  }
+})
+
+// 表单校验
+const rules = ref({
+  tableName: [{ required: true, message: "请输入表名称", trigger: "blur" }],
+  tableComment: [{ required: true, message: "请输入表描述", trigger: "blur" }],
+  className: [{ required: true, message: "请输入实体类名称", trigger: "blur" }],
+  functionAuthor: [{ required: true, message: "请输入作者", trigger: "blur" }]
+})
+</script>