xinyilu/postdischarge-ui
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

页面优化

Browse Source
This commit is contained in:
辉 2024-06-14 16:15:42 +08:00
parent 0c5468a1a7
commit cb2c174b60
3 changed files with 114 additions and 70 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/components/Pagination/index.vue
View File

@ -112,4 +112,8 @@ export default {
.pagination-container.hidden { .pagination-container.hidden {
display: none; display: none;
} }
::v-deep .el-pager {
width: 360px !important;
}
</style> </style>

179
src/views/manage/script/index.vue
View File

@ -21,81 +21,87 @@
</div> </div>
</div> </div>
</el-col> </el-col>
<el-col :span="19" :xs="24" <el-col :span="19" :xs="24">
style="height:calc(100vh - 124px);display: flex;flex-wrap: wrap;flex-direction: column;justify-content: space-between;"> <div ref="form" class="form">
<el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch"
label-width="68px"> label-width="68px">
<el-form-item label="通用话术名称" prop="commonScriptName" label-width="100px"> <el-form-item label="通用话术名称" prop="commonScriptName" label-width="100px">
<el-input v-model="queryParams.commonScriptName" placeholder="请输入通用话术名称" clearable <el-input v-model="queryParams.commonScriptName" placeholder="请输入通用话术名称" clearable
@keyup.enter.native="handleQuery" /> @keyup.enter.native="handleQuery" />
</el-form-item> </el-form-item>
<el-form-item label="话术名称" prop="scriptName"> <el-form-item label="话术名称" prop="scriptName">
<el-input v-model="queryParams.scriptName" placeholder="请输入话术名称" clearable <el-input v-model="queryParams.scriptName" placeholder="请输入话术名称" clearable
@keyup.enter.native="handleQuery" /> @keyup.enter.native="handleQuery" />
</el-form-item> </el-form-item>
<el-form-item label="话术ID" prop="scriptId"> <el-form-item label="话术ID" prop="scriptId">
<el-input v-model="queryParams.scriptId" placeholder="请输入话术ID" clearable <el-input v-model="queryParams.scriptId" placeholder="请输入话术ID" clearable
@keyup.enter.native="handleQuery" /> @keyup.enter.native="handleQuery" />
</el-form-item> </el-form-item>
<el-form-item label="平台ID" prop="platformId"> <el-form-item label="平台ID" prop="platformId">
<el-input v-model="queryParams.platformId" placeholder="请输入平台ID" clearable <el-input v-model="queryParams.platformId" placeholder="请输入平台ID" clearable
@keyup.enter.native="handleQuery" /> @keyup.enter.native="handleQuery" />
</el-form-item> </el-form-item>
<el-form-item label="话术状态" prop="scriptStatus"> <el-form-item label="话术状态" prop="scriptStatus">
<el-select v-model="queryParams.scriptStatus" placeholder="请选择"> <el-select v-model="queryParams.scriptStatus" placeholder="请选择">
<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"> <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
</el-option> </el-option>
</el-select> </el-select>
</el-form-item> </el-form-item>
<el-form-item> <el-form-item>
<el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button> <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
<el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button> <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
</el-form-item> </el-form-item>
</el-form> </el-form>
<el-row :gutter="10" class="mb8"> </div>
<el-col :span="1.5"> <div ref="mb8" class="mb8">
<el-button type="primary" plain icon="el-icon-plus" size="mini" @click="handleAdd" <el-row :gutter="10" class="">
v-hasPermi="['manage:script:add']">新增</el-button> <el-col :span="1.5">
</el-col> <el-button type="primary" plain icon="el-icon-plus" size="mini" @click="handleAdd"
<right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar> v-hasPermi="['manage:script:add']">新增</el-button>
</el-row> </el-col>
<el-table v-loading="loading" :data="scriptList" @selection-change="handleSelectionChange"> <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
<el-table-column label="序号" align="center" prop="sort" type="index" /> </el-row>
</div>
<div ref="table">
<el-table :max-height="maxTableHeight" v-loading="loading" :data="scriptList"
@selection-change="handleSelectionChange">
<el-table-column label="序号" align="center" prop="sort" type="index" />
<el-table-column label="通用话术名称" align="center" prop="commonScriptName" :show-overflow-tooltip="true" /> <el-table-column label="通用话术名称" align="center" prop="commonScriptName" :show-overflow-tooltip="true" />
<el-table-column label="话术名称" align="center" prop="scriptName" :show-overflow-tooltip="true" /> <el-table-column label="话术名称" align="center" prop="scriptName" :show-overflow-tooltip="true" />
<el-table-column label="话术ID" align="center" prop="scriptId" :show-overflow-tooltip="true" /> <el-table-column label="话术ID" align="center" prop="scriptId" :show-overflow-tooltip="true" />
<el-table-column label="平台ID" align="center" prop="platformId" :show-overflow-tooltip="true" /> <el-table-column label="平台ID" align="center" prop="platformId" :show-overflow-tooltip="true" />
<el-table-column label="话术状态" align="center" prop="scriptStatus"> <el-table-column label="话术状态" align="center" prop="scriptStatus">
<template slot-scope="scope"> <template slot-scope="scope">
{{ scope.row.scriptStatus == "NORMAL" ? "正常" : "" }} {{ scope.row.scriptStatus == "NORMAL" ? "正常" : "" }}
{{ scope.row.scriptStatus == "OFF_SHELF" ? "下架" : "" }} {{ scope.row.scriptStatus == "OFF_SHELF" ? "下架" : "" }}
{{ scope.row.scriptStatus == "SUSPEND" ? "暂停" : "" }} {{ scope.row.scriptStatus == "SUSPEND" ? "暂停" : "" }}
</template> </template>
</el-table-column> </el-table-column>
<el-table-column label="话术简介" align="center" prop="scriptIntroduction" :show-overflow-tooltip="true" /> <el-table-column label="话术简介" align="center" prop="scriptIntroduction" :show-overflow-tooltip="true" />
<el-table-column label="病种名称" align="center" prop="diseaseTypeName" :show-overflow-tooltip="true" /> <el-table-column label="病种名称" align="center" prop="diseaseTypeName" :show-overflow-tooltip="true" />
<el-table-column label="操作" align="center" class-name="small-padding fixed-width" width="200"> <el-table-column label="操作" align="center" class-name="small-padding fixed-width" width="200">
<template slot-scope="scope"> <template slot-scope="scope">
<!-- <el-button size="mini" type="text" icon="el-icon-folder-delete" <!-- <el-button size="mini" type="text" icon="el-icon-folder-delete"
@click="norelease(scope.row)">取消发布</el-button> @click="norelease(scope.row)">取消发布</el-button>
<el-button size="mini" icon="el-icon-folder-checked" type="text" @click="release(scope.row)">发布</el-button> --> <el-button size="mini" icon="el-icon-folder-checked" type="text" @click="release(scope.row)">发布</el-button> -->
<el-button size="mini" type="text" icon="el-icon-search" @click="handlesee(scope.row)">预览</el-button> <el-button size="mini" type="text" icon="el-icon-search" @click="handlesee(scope.row)">预览</el-button>
<el-button size="mini" type="text" icon="el-icon-zoom-in" @click="see(scope.row)">话术</el-button> <el-button size="mini" type="text" icon="el-icon-zoom-in" @click="see(scope.row)">话术</el-button>
<el-button size="mini" type="text" icon="el-icon-picture-outline" @click="seescript(scope.row)">话术预览</el-button> <el-button size="mini" type="text" icon="el-icon-picture-outline"
<el-button size="mini" type="text" icon="el-icon-edit" @click="handleUpdate(scope.row)" @click="seescript(scope.row)">话术预览</el-button>
v-hasPermi="['manage:script:edit']">修改</el-button> <el-button size="mini" type="text" icon="el-icon-edit" @click="handleUpdate(scope.row)"
<el-button size="mini" type="text" icon="el-icon-delete" @click="handleDelete(scope.row)" v-hasPermi="['manage:script:edit']">修改</el-button>
v-hasPermi="['manage:script:remove']">删除</el-button> <el-button size="mini" type="text" icon="el-icon-delete" @click="handleDelete(scope.row)"
</template> v-hasPermi="['manage:script:remove']">删除</el-button>
</el-table-column> </template>
</el-table> </el-table-column>
</el-table>
</div>
<pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum" <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum"
:limit.sync="queryParams.pageSize" @pagination="getList" /> :limit.sync="queryParams.pageSize" @pagination="getList" />
</el-col> </el-col>
</el-row> </el-row>
<!-- 添加或修改话术信息对话框 --> <!-- 添加或修改话术信息对话框 -->
<el-dialog :title="title" :visible.sync="open" width="700px" append-to-body> <el-dialog :title="title" :visible.sync="open" width="700px" append-to-body>
<el-form ref="form" :model="form" :rules="rules" label-width="110px" :inline="true"> <el-form ref="form" :model="form" :rules="rules" label-width="110px" :inline="true">
@ -310,7 +316,7 @@ export default {
},], },],
optionsDisease: [], optionsDisease: [],
maxTableHeight: undefined,
optionsadd: [{ optionsadd: [{
value: 'NORMAL', value: 'NORMAL',
@ -441,6 +447,10 @@ export default {
this.Departmentlist(); this.Departmentlist();
}, },
mounted() {
this.getMaxTableHeight()
this.screenChange()
},
watch: { watch: {
name(val) { name(val) {
this.querydepartmen.departmentName = val this.querydepartmen.departmentName = val
@ -857,7 +867,30 @@ export default {
this.download('manage/script/export', { this.download('manage/script/export', {
...this.queryParams ...this.queryParams
}, `script_${new Date().getTime()}.xlsx`) }, `script_${new Date().getTime()}.xlsx`)
} },
// 获取表格最高高度
getMaxTableHeight() {
const windowInnerHeight = window.innerHeight // 屏幕可视高度
const layoutDiv = this.$refs.layout
const formDiv = this.$refs.form
const mb8Div = this.$refs.mb8
this.maxTableHeight =
windowInnerHeight - 134 -
this.getBoxPadding(layoutDiv) -
this.getBoxHeight(mb8Div) -
this.getBoxHeight(formDiv)
},
// 屏幕resize监听
screenChange() {
// 屏幕resize监听事件：一旦屏幕宽高发生变化，就会执行resize
window.addEventListener('resize', this.getMaxTableHeight, true)
// 将屏幕监听事件移除
// 这步是必须的。离开页面时不移除，再返回，或者进入到别的有相同元素的页面会报错
// 或者将这里的方法直接写在beforeDestroy函数中也可以
this.$once('hook:beforeDestroy', () => {
window.removeEventListener('resize', this.getMaxTableHeight, true)
})
},
} }
}; };
</script> </script>
@ -921,4 +954,12 @@ export default {
left: 20px; left: 20px;
top: -11px; top: -11px;
} }
.app-container {
padding: 20px 0 0 20px !important;
}
::v-deep .el-row {
height: 100% !important;
}
</style> </style>

1
src/views/manage/template/index.vue
View File

@ -47,7 +47,6 @@
<el-button type="primary" plain icon="el-icon-plus" size="mini" @click="handleAdd" <el-button type="primary" plain icon="el-icon-plus" size="mini" @click="handleAdd"
v-hasPermi="['manage:template:add']">新增微信模版</el-button> v-hasPermi="['manage:template:add']">新增微信模版</el-button>
</el-col> </el-col>
<right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar> <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
</el-row> </el-row>
</div> </div>