|
|
@@ -0,0 +1,620 @@
|
|
|
+<template>
|
|
|
+ <div class="app-container">
|
|
|
+ <ContentWrap style="border: 0">
|
|
|
+ <el-form
|
|
|
+ class="-mb-15px"
|
|
|
+ :model="queryParams"
|
|
|
+ ref="queryForm"
|
|
|
+ :inline="true"
|
|
|
+ label-width="100px"
|
|
|
+ >
|
|
|
+ <el-row :gutter="20">
|
|
|
+ <el-col :span="24" :xs="24" :sm="12" :md="6">
|
|
|
+ <el-form-item label="事件级别" prop="accidentGrade">
|
|
|
+ <el-input
|
|
|
+ v-model="queryParams.accidentGrade"
|
|
|
+ placeholder="请输入事件级别"
|
|
|
+ clearable
|
|
|
+ @keyup.enter="handleQuery"
|
|
|
+ style="width: 200px"
|
|
|
+ />
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="24" :xs="24" :sm="12" :md="6">
|
|
|
+ <el-form-item label="事件类型" prop="accidentType">
|
|
|
+ <el-input
|
|
|
+ v-model="queryParams.accidentType"
|
|
|
+ placeholder="请选择事件类型"
|
|
|
+ clearable
|
|
|
+ style="width: 200px"
|
|
|
+ />
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="24" :xs="24" :sm="24" :md="12">
|
|
|
+ <el-form-item style="display: block">
|
|
|
+ <el-button type="primary" @click="handleQuery" :icon="Search">搜索</el-button>
|
|
|
+ <el-button @click="resetQuery" :icon="Refresh">重置</el-button>
|
|
|
+ <el-button type="primary" @click="openForm('create')" color="#626aef">
|
|
|
+ <Icon icon="ep:plus" class="mr-5px" /> 新增
|
|
|
+ </el-button>
|
|
|
+ <el-button type="success" plain @click="handleExport" :loading="exportLoading">
|
|
|
+ <Icon icon="ep:download" class="mr-5px" /> 导出
|
|
|
+ </el-button>
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ </el-form>
|
|
|
+ </ContentWrap>
|
|
|
+
|
|
|
+ <ContentWrap style="border: 0">
|
|
|
+ <el-table
|
|
|
+ v-loading="loading"
|
|
|
+ :data="list"
|
|
|
+ row-key="id"
|
|
|
+ border
|
|
|
+ style="width: 100%"
|
|
|
+ :header-cell-style="{ background: '#f5f7fa', color: '#333', height: '50px' }"
|
|
|
+ :cell-style="{ padding: '12px 8px' }"
|
|
|
+ height="70vh"
|
|
|
+ :max-height="tableHeight"
|
|
|
+ >
|
|
|
+ <el-table-column prop="actualTime" label="事件时间" align="center">
|
|
|
+ <template #default="{ row }">
|
|
|
+ {{ formatDate(row.actualTime) }}
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column prop="accidentGrade" label="事件级别" align="center" />
|
|
|
+ <el-table-column prop="accidentType" label="事件类型" align="center" />
|
|
|
+ <el-table-column
|
|
|
+ prop="lossSituation"
|
|
|
+ label="事件损失情况"
|
|
|
+ align="center"
|
|
|
+ show-overflow-tooltip
|
|
|
+ />
|
|
|
+
|
|
|
+ <el-table-column prop="accidentAddress" label="事件地址" align="center" />
|
|
|
+ <el-table-column prop="deptName" label="部门名称" align="center" />
|
|
|
+ <el-table-column prop="dutyPerson" label="现场负责人" align="center" />
|
|
|
+
|
|
|
+ <el-table-column label="操作" align="center" width="150" fixed="right">
|
|
|
+ <template #default="{ row }">
|
|
|
+ <el-button link type="primary" @click="openForm('update', row)" :icon="Edit"
|
|
|
+ >编辑</el-button
|
|
|
+ >
|
|
|
+ <el-button link type="danger" @click="handleDelete(row)" :icon="Delete">删除</el-button>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ </el-table>
|
|
|
+
|
|
|
+ <!-- 分页 -->
|
|
|
+ <div class="mt-2 mb-2 float-right">
|
|
|
+ <el-pagination
|
|
|
+ v-model:current-page="queryParams.pageNo"
|
|
|
+ v-model:page-size="queryParams.pageSize"
|
|
|
+ :total="total"
|
|
|
+ layout="total, sizes, prev, pager, next"
|
|
|
+ @size-change="handleSizeChange"
|
|
|
+ @current-change="handleCurrentChange"
|
|
|
+ background
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+ </ContentWrap>
|
|
|
+
|
|
|
+ <!-- 表单弹窗 -->
|
|
|
+ <el-dialog
|
|
|
+ :title="title"
|
|
|
+ v-model="open"
|
|
|
+ width="800px"
|
|
|
+ :fullscreen="isMobile"
|
|
|
+ append-to-body
|
|
|
+ :close-on-click-modal="false"
|
|
|
+ destroy-on-close
|
|
|
+ custom-class="self-dialog"
|
|
|
+ >
|
|
|
+ <template #title>
|
|
|
+ <div
|
|
|
+ style="
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ align-items: center;
|
|
|
+ border-bottom: 1px solid #ebeef5;
|
|
|
+ padding-bottom: 20px;
|
|
|
+ padding-left: 20px;
|
|
|
+ width: 108%;
|
|
|
+ margin-left: -15px;
|
|
|
+ "
|
|
|
+ >
|
|
|
+ <span>{{ title }}</span>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ <el-form ref="formRef" :model="formData" :rules="formRules" label-width="120px">
|
|
|
+ <el-row :gutter="20">
|
|
|
+ <el-col :span="24" :xs="24" :sm="24" :md="12">
|
|
|
+ <el-form-item label="事件时间" prop="actualTime">
|
|
|
+ <el-date-picker
|
|
|
+ v-model="formData.actualTime"
|
|
|
+ type="datetime"
|
|
|
+ format="YYYY-MM-DD HH:mm:ss"
|
|
|
+ value-format="x"
|
|
|
+ placeholder="选择事件发生时间"
|
|
|
+ style="width: 100%"
|
|
|
+ />
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+
|
|
|
+ <el-col :span="24" :xs="24" :sm="24" :md="12">
|
|
|
+ <el-form-item label="事件级别" prop="accidentGrade">
|
|
|
+ <el-input v-model="formData.accidentGrade" placeholder="请输入事件级别" clearable />
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+
|
|
|
+ <el-row :gutter="20">
|
|
|
+ <el-col :span="24" :xs="24" :sm="24" :md="12">
|
|
|
+ <el-form-item label="事件类型" prop="accidentType">
|
|
|
+ <el-input
|
|
|
+ v-model="formData.accidentType"
|
|
|
+ placeholder="请选择事件类型"
|
|
|
+ clearable
|
|
|
+ style="width: 100%"
|
|
|
+ />
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+
|
|
|
+ <el-col :span="24" :xs="24" :sm="24" :md="12">
|
|
|
+ <el-form-item label="事件地址" prop="accidentAddress">
|
|
|
+ <el-input v-model="formData.accidentAddress" placeholder="请输入事件地址" clearable />
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+
|
|
|
+ <el-row :gutter="20">
|
|
|
+ <el-col :span="24" :xs="24" :sm="24" :md="12">
|
|
|
+ <el-form-item label="现场负责人" prop="dutyPerson">
|
|
|
+ <el-input
|
|
|
+ v-model="formData.dutyPerson"
|
|
|
+ placeholder="请输入现场负责人姓名"
|
|
|
+ clearable
|
|
|
+ />
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+
|
|
|
+ <!-- <el-col :span="24" :xs="24" :sm="24" :md="12">
|
|
|
+ <el-form-item label="事件损失情况" prop="lossSituation">
|
|
|
+ <el-input
|
|
|
+ v-model="formData.lossSituation"
|
|
|
+ placeholder="请输入事件损失情况"
|
|
|
+ clearable
|
|
|
+ />
|
|
|
+ </el-form-item>
|
|
|
+ </el-col> -->
|
|
|
+ </el-row>
|
|
|
+
|
|
|
+ <el-row :gutter="20">
|
|
|
+ <el-col :span="24">
|
|
|
+ <el-form-item label="事件损失情况" prop="lossSituation">
|
|
|
+ <el-input
|
|
|
+ v-model="formData.lossSituation"
|
|
|
+ placeholder="请输入事件损失情况"
|
|
|
+ clearable
|
|
|
+ type="textarea"
|
|
|
+ :rows="2"
|
|
|
+ />
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+
|
|
|
+ <el-row :gutter="20">
|
|
|
+ <el-col :span="24">
|
|
|
+ <el-form-item label="现场采取措施" prop="emergencyMeasure">
|
|
|
+ <el-input
|
|
|
+ v-model="formData.emergencyMeasure"
|
|
|
+ type="textarea"
|
|
|
+ :rows="2"
|
|
|
+ placeholder="请输入现场采取的应急措施"
|
|
|
+ maxlength="500"
|
|
|
+ show-word-limit
|
|
|
+ />
|
|
|
+ </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="formData.description"
|
|
|
+ type="textarea"
|
|
|
+ :rows="2"
|
|
|
+ placeholder="请输入事件详细经过"
|
|
|
+ maxlength="1000"
|
|
|
+ show-word-limit
|
|
|
+ />
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+
|
|
|
+ <el-row :gutter="20">
|
|
|
+ <el-col :span="12">
|
|
|
+ <el-form-item label="附件/现场图片" prop="pic">
|
|
|
+ <UploadImage v-model="formData.pic" width="260px" />
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+
|
|
|
+ <el-col :span="12">
|
|
|
+ <el-form-item label="备注" prop="remark">
|
|
|
+ <el-input
|
|
|
+ v-model="formData.remark"
|
|
|
+ type="textarea"
|
|
|
+ :rows="3"
|
|
|
+ placeholder="请输入备注信息"
|
|
|
+ maxlength="500"
|
|
|
+ show-word-limit
|
|
|
+ />
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ </el-form>
|
|
|
+
|
|
|
+ <template #footer>
|
|
|
+ <div class="dialog-footer">
|
|
|
+ <el-button @click="cancel">取 消</el-button>
|
|
|
+ <el-button type="primary" @click="submitForm" :loading="submitLoading" color="#626aef">
|
|
|
+ 确 定
|
|
|
+ </el-button>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ </el-dialog>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script setup>
|
|
|
+import { ref, reactive, onMounted, computed } from 'vue'
|
|
|
+import { ElMessage, ElMessageBox } from 'element-plus'
|
|
|
+import { Search, Refresh, Plus, Edit, Delete } from '@element-plus/icons-vue'
|
|
|
+import { defaultProps } from '@/utils/tree'
|
|
|
+import { handleTree } from '@/utils/tree'
|
|
|
+import * as DeptApi from '@/api/system/dept'
|
|
|
+import { IotFailureApi } from '@/api/pms/qhse/index'
|
|
|
+import UploadImage from '@/components/UploadFile/src/UploadImg.vue'
|
|
|
+import { formatDate } from '@/utils/formatTime'
|
|
|
+
|
|
|
+// Data
|
|
|
+const loading = ref(false)
|
|
|
+const submitLoading = ref(false)
|
|
|
+const list = ref([])
|
|
|
+const total = ref(0)
|
|
|
+const open = ref(false)
|
|
|
+const title = ref('')
|
|
|
+const formRef = ref()
|
|
|
+const mode = ref('') // 'create' or 'update'
|
|
|
+const deptList2 = ref([]) // 树形结构
|
|
|
+
|
|
|
+// 表单数据
|
|
|
+const formData = ref({
|
|
|
+ actualTime: null, // 使用时间戳格式
|
|
|
+ accidentGrade: '',
|
|
|
+ accidentType: '',
|
|
|
+ accidentAddress: '',
|
|
|
+ deptId: null,
|
|
|
+ deptName: '',
|
|
|
+ dutyPerson: '',
|
|
|
+ lossSituation: '',
|
|
|
+ emergencyMeasure: '',
|
|
|
+ description: '',
|
|
|
+ pic: '',
|
|
|
+ remark: ''
|
|
|
+})
|
|
|
+
|
|
|
+// 查询参数
|
|
|
+const queryParams = ref({
|
|
|
+ pageNo: 1,
|
|
|
+ pageSize: 10,
|
|
|
+ actualTime: [],
|
|
|
+ accidentGrade: undefined,
|
|
|
+ accidentType: undefined
|
|
|
+})
|
|
|
+
|
|
|
+// 表单验证规则
|
|
|
+const formRules = reactive({
|
|
|
+ actualTime: [{ required: true, message: '请选择事件时间', trigger: 'change' }],
|
|
|
+ accidentGrade: [{ required: true, message: '请输入事件级别', trigger: 'blur' }],
|
|
|
+ accidentType: [{ required: true, message: '请选择事件类型', trigger: 'change' }],
|
|
|
+ accidentAddress: [{ required: true, message: '请输入事件地址', trigger: 'blur' }],
|
|
|
+ deptId: [{ required: true, message: '请选择所属部门', trigger: 'change' }],
|
|
|
+ deptName: [{ required: true, message: '请输入队伍名称', trigger: 'blur' }],
|
|
|
+ dutyPerson: [{ required: true, message: '请输入现场负责人', trigger: 'blur' }]
|
|
|
+ // description: [
|
|
|
+ // { required: true, message: '请输入事件简要经过', trigger: 'blur' },
|
|
|
+ // { min: 1, max: 1000, message: '事件简要经过长度应在1-1000之间', trigger: 'blur' }
|
|
|
+ // ]
|
|
|
+})
|
|
|
+
|
|
|
+// 计算属性
|
|
|
+const isMobile = computed(() => {
|
|
|
+ return window.innerWidth < 768
|
|
|
+})
|
|
|
+
|
|
|
+const tableHeight = computed(() => {
|
|
|
+ if (isMobile.value) {
|
|
|
+ return window.innerHeight - 300 // 为移动端减少高度，考虑其他元素占用空间
|
|
|
+ }
|
|
|
+ return '70vh'
|
|
|
+})
|
|
|
+
|
|
|
+// Methods
|
|
|
+const getList = async () => {
|
|
|
+ loading.value = true
|
|
|
+ try {
|
|
|
+ const response = await IotFailureApi.getFailureList(queryParams.value)
|
|
|
+ list.value = response.list
|
|
|
+ total.value = response.total
|
|
|
+ loading.value = false
|
|
|
+ } catch (error) {
|
|
|
+ loading.value = false
|
|
|
+ ElMessage.error('获取列表失败')
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+const handleSizeChange = (val) => {
|
|
|
+ queryParams.value.pageSize = val
|
|
|
+ queryParams.value.pageNo = 1 // 重置为第一页
|
|
|
+ getList()
|
|
|
+}
|
|
|
+
|
|
|
+const handleCurrentChange = (val) => {
|
|
|
+ queryParams.value.pageNo = val
|
|
|
+ getList()
|
|
|
+}
|
|
|
+
|
|
|
+const resetQuery = () => {
|
|
|
+ // 重置查询参数
|
|
|
+ queryParams.value = {
|
|
|
+ pageNo: 1,
|
|
|
+ pageSize: 10,
|
|
|
+ actualTime: [],
|
|
|
+ accidentGrade: undefined,
|
|
|
+ accidentType: undefined
|
|
|
+ }
|
|
|
+ handleQuery()
|
|
|
+}
|
|
|
+
|
|
|
+const handleQuery = () => {
|
|
|
+ queryParams.value.pageNo = 1
|
|
|
+ getList()
|
|
|
+}
|
|
|
+
|
|
|
+// 打开表单 - 支持新增和编辑
|
|
|
+const openForm = async (modeVal, row = {}) => {
|
|
|
+ reset()
|
|
|
+ mode.value = modeVal
|
|
|
+
|
|
|
+ if (modeVal === 'create') {
|
|
|
+ title.value = '添加事故事件上报'
|
|
|
+ open.value = true
|
|
|
+ } else if (modeVal === 'update') {
|
|
|
+ title.value = '修改事故事件上报'
|
|
|
+
|
|
|
+ // 直接使用列表中的数据，不需要调用详情接口
|
|
|
+ formData.value = { ...row }
|
|
|
+
|
|
|
+ // 如果是字符串或日期格式的时间，转换为时间戳
|
|
|
+ if (typeof row.actualTime === 'string' && row.actualTime) {
|
|
|
+ formData.value.actualTime = new Date(row.actualTime).getTime()
|
|
|
+ } else if (row.actualTime instanceof Date) {
|
|
|
+ formData.value.actualTime = row.actualTime.getTime()
|
|
|
+ } else if (typeof row.actualTime === 'number') {
|
|
|
+ // 如果已经是时间戳格式，直接使用
|
|
|
+ formData.value.actualTime = row.actualTime
|
|
|
+ }
|
|
|
+
|
|
|
+ open.value = true
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+const handleDelete = async (row) => {
|
|
|
+ const ids = [row.id]
|
|
|
+ await ElMessageBox.confirm('是否确认删除选中的故障报告数据项？', '警告', {
|
|
|
+ confirmButtonText: '确定',
|
|
|
+ cancelButtonText: '取消',
|
|
|
+ type: 'warning'
|
|
|
+ })
|
|
|
+
|
|
|
+ try {
|
|
|
+ // 删除API调用
|
|
|
+ await IotFailureApi.deleteFailure(ids)
|
|
|
+ ElMessage.success('删除成功')
|
|
|
+ getList()
|
|
|
+ } catch (error) {
|
|
|
+ ElMessage.error('删除失败')
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+const reset = () => {
|
|
|
+ formData.value = {
|
|
|
+ id: undefined,
|
|
|
+ actualTime: null,
|
|
|
+ accidentGrade: '',
|
|
|
+ accidentType: '',
|
|
|
+ accidentAddress: '',
|
|
|
+ deptId: null,
|
|
|
+ deptName: '',
|
|
|
+ dutyPerson: '',
|
|
|
+ lossSituation: '',
|
|
|
+ emergencyMeasure: '',
|
|
|
+ description: '',
|
|
|
+ pic: '',
|
|
|
+ remark: ''
|
|
|
+ }
|
|
|
+ if (formRef.value) {
|
|
|
+ formRef.value.resetFields()
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+const submitForm = async () => {
|
|
|
+ if (!formRef.value) return
|
|
|
+
|
|
|
+ await formRef.value.validate(async (valid) => {
|
|
|
+ if (valid) {
|
|
|
+ submitLoading.value = true
|
|
|
+ try {
|
|
|
+ // 在提交前确保时间是时间戳格式
|
|
|
+ const submitData = { ...formData.value }
|
|
|
+
|
|
|
+ if (mode.value === 'update' && formData.value.id) {
|
|
|
+ // 更新API调用
|
|
|
+ submitData.id = formData.value.id
|
|
|
+ await IotFailureApi.updateFailure(submitData)
|
|
|
+ ElMessage.success('更新成功')
|
|
|
+ } else {
|
|
|
+ // 创建API调用
|
|
|
+ await IotFailureApi.createFailure(submitData)
|
|
|
+ ElMessage.success('新增成功')
|
|
|
+ }
|
|
|
+ open.value = false
|
|
|
+ getList()
|
|
|
+ } catch (error) {
|
|
|
+ ElMessage.error(error.message || '操作失败')
|
|
|
+ } finally {
|
|
|
+ submitLoading.value = false
|
|
|
+ }
|
|
|
+ } else {
|
|
|
+ ElMessage.error('请填写必填项')
|
|
|
+ }
|
|
|
+ })
|
|
|
+}
|
|
|
+
|
|
|
+const downloadFile = (response) => {
|
|
|
+ // 创建 blob 对象
|
|
|
+ const blob = new Blob([response], {
|
|
|
+ type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=utf-8'
|
|
|
+ })
|
|
|
+
|
|
|
+ // 获取文件名
|
|
|
+ let fileName = '事故事件上报.xlsx'
|
|
|
+ const disposition = response.headers ? response.headers['content-disposition'] : ''
|
|
|
+ if (disposition) {
|
|
|
+ const filenameRegex = /filename[^;=\n]*=((['"]).*?\2|[^;\n]*)/
|
|
|
+ const matches = filenameRegex.exec(disposition)
|
|
|
+ if (matches != null && matches[1]) {
|
|
|
+ fileName = matches[1].replace(/['"]/g, '')
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ // 创建下载链接
|
|
|
+ const url = window.URL.createObjectURL(blob)
|
|
|
+ const link = document.createElement('a')
|
|
|
+ link.href = url
|
|
|
+ link.setAttribute('download', fileName)
|
|
|
+
|
|
|
+ // 触发下载
|
|
|
+ document.body.appendChild(link)
|
|
|
+ link.click()
|
|
|
+
|
|
|
+ // 清理
|
|
|
+ document.body.removeChild(link)
|
|
|
+ window.URL.revokeObjectURL(url)
|
|
|
+}
|
|
|
+
|
|
|
+let exportLoading = ref(false)
|
|
|
+const handleExport = async () => {
|
|
|
+ try {
|
|
|
+ exportLoading.value = true
|
|
|
+ // 调用导出接口
|
|
|
+ const response = await IotFailureApi.exportFailure(queryParams.value)
|
|
|
+
|
|
|
+ // 下载文件
|
|
|
+ downloadFile(response)
|
|
|
+ exportLoading.value = false
|
|
|
+ } catch (error) {
|
|
|
+ ElMessage.error('导出失败，请重试')
|
|
|
+ console.error('导出错误:', error)
|
|
|
+ } finally {
|
|
|
+ exportLoading.value = false
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+const cancel = () => {
|
|
|
+ open.value = false
|
|
|
+ reset()
|
|
|
+}
|
|
|
+
|
|
|
+// 监听窗口大小变化
|
|
|
+const handleResize = () => {
|
|
|
+ // 这里可以添加响应式逻辑
|
|
|
+}
|
|
|
+
|
|
|
+// Lifecycle hooks
|
|
|
+onMounted(async () => {
|
|
|
+ window.addEventListener('resize', handleResize)
|
|
|
+ getList()
|
|
|
+ deptList2.value = handleTree(await DeptApi.getSimpleDeptList())
|
|
|
+})
|
|
|
+
|
|
|
+onUnmounted(() => {
|
|
|
+ window.removeEventListener('resize', handleResize)
|
|
|
+})
|
|
|
+</script>
|
|
|
+
|
|
|
+<style scoped lang="scss">
|
|
|
+.app-container {
|
|
|
+ padding: 15px 10px;
|
|
|
+}
|
|
|
+
|
|
|
+/* 移动端适配 */
|
|
|
+@media (max-width: 768px) {
|
|
|
+ .app-container {
|
|
|
+ padding: 10px 5px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .el-form-item__label {
|
|
|
+ display: block;
|
|
|
+ text-align: left;
|
|
|
+ padding-bottom: 5px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .el-form-item__content {
|
|
|
+ margin-left: 0 !important;
|
|
|
+ }
|
|
|
+
|
|
|
+ .el-button + .el-button {
|
|
|
+ margin-left: 5px;
|
|
|
+ }
|
|
|
+
|
|
|
+ /* 调整表格字体大小 */
|
|
|
+ :deep(.el-table .el-table__cell) {
|
|
|
+ padding: 8px 0;
|
|
|
+ }
|
|
|
+
|
|
|
+ :deep(.el-table th.el-table__cell) {
|
|
|
+ padding: 10px 0;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+/* 通用样式 */
|
|
|
+.dialog-footer {
|
|
|
+ text-align: right;
|
|
|
+}
|
|
|
+
|
|
|
+:deep(.el-textarea__inner) {
|
|
|
+ min-height: 80px !important;
|
|
|
+}
|
|
|
+
|
|
|
+/* 移动端分页样式 */
|
|
|
+.mt-2.flex.justify-right {
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ margin-top: 10px;
|
|
|
+}
|
|
|
+
|
|
|
+/* 移动端按钮样式 */
|
|
|
+@media (max-width: 768px) {
|
|
|
+ .el-button {
|
|
|
+ margin-bottom: 5px;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+::v-deep .el-button {
|
|
|
+ border-radius: 3px;
|
|
|
+}
|
|
|
+</style>
|
