Browse Source

优化组件样式,调整用户信息和工具栏布局,增加面包屑导航

master
parent
commit
88c73b30df
  1. 4
      src/layout/components/Breadcrumb/src/Breadcrumb.vue
  2. 34
      src/layout/components/ToolHeader.vue
  3. 16
      src/layout/components/UserInfo/src/UserInfo.vue
  4. 2
      src/layout/components/useRenderLayout.tsx
  5. 11
      src/styles/variables.scss
  6. 4
      src/views/Home/Index.vue
  7. 2
      src/views/enterprises/index.vue
  8. 3
      src/views/enterprises/update.vue
  9. 0
      src/views/hollow.vue
  10. 9
      src/views/oparetion/emty.vue
  11. 216
      src/views/qualification/index.vue
  12. 5
      src/views/screen/compenonts/leftwrapper.vue
  13. 3
      src/views/screen/compenonts/norm.vue
  14. 2
      src/views/screen/compenonts/rightwrapper.vue
  15. 4
      src/views/screen/compenonts/tabber.vue
  16. 2
      src/views/system/jobinfo/index.vue
  17. 8
      src/views/system/taglibrary/index.vue

4
src/layout/components/Breadcrumb/src/Breadcrumb.vue

@ -78,10 +78,8 @@ export default defineComponent({
) )
return () => ( return () => (
<ElBreadcrumb separator="/" class={`${prefixCls} flex items-center h-full ml-[10px]`}> <ElBreadcrumb separator="/" class={`${prefixCls} flex items-center h-full`}>
<TransitionGroup appear enter-active-class="animate__animated animate__fadeInRight">
{renderBreadcrumb()} {renderBreadcrumb()}
</TransitionGroup>
</ElBreadcrumb> </ElBreadcrumb>
) )
} }

34
src/layout/components/ToolHeader.vue

@ -9,13 +9,10 @@ import RouterSearch from '@/components/RouterSearch/index.vue'
import { useAppStore } from '@/store/modules/app' import { useAppStore } from '@/store/modules/app'
import { useDesign } from '@/hooks/web/useDesign' import { useDesign } from '@/hooks/web/useDesign'
const { variables } = useDesign() const { variables } = useDesign()
const appStore = useAppStore() const appStore = useAppStore()
// //
const screenfull = computed(() => appStore.getScreenfull) const screenfull = computed(() => appStore.getScreenfull)
@ -25,21 +22,15 @@ const search = computed(() => appStore.search)
// //
const size = computed(() => appStore.getSize) const size = computed(() => appStore.getSize)
// //
const locale = computed(() => appStore.getLocale) const locale = computed(() => appStore.getLocale)
export default defineComponent({ export default defineComponent({
name: 'ToolHeader', name: 'ToolHeader',
setup() { setup() {
return () => ( return () => (
<div <div id={`${variables.namespace}-tool-header`} class=" relative flex items-cente ">
id={`${variables.namespace}-tool-header`} <div class="flex items-center">
class=" relative flex items-cente "
>
<div class="flex items-center" >
<Screen class="block" color="var(--top-header-text-color)" /> <Screen class="block" color="var(--top-header-text-color)" />
{screenfull.value ? ( {screenfull.value ? (
<Screenfull class="block" color="var(--top-header-text-color)"></Screenfull> <Screenfull class="block" color="var(--top-header-text-color)"></Screenfull>
@ -49,10 +40,7 @@ export default defineComponent({
<SizeDropdown class="block" color="var(--top-header-text-color)"></SizeDropdown> <SizeDropdown class="block" color="var(--top-header-text-color)"></SizeDropdown>
) : undefined} ) : undefined}
{locale.value ? ( {locale.value ? (
<LocaleDropdown <LocaleDropdown class="block" color="var(--top-header-text-color)"></LocaleDropdown>
class="block"
color="var(--top-header-text-color)"
></LocaleDropdown>
) : undefined} ) : undefined}
<UserInfo></UserInfo> <UserInfo></UserInfo>
</div> </div>
@ -68,12 +56,12 @@ $prefix-cls: #{$namespace}-tool-header;
.#{$prefix-cls} { .#{$prefix-cls} {
transition: left var(--transition-time-02); transition: left var(--transition-time-02);
} }
.block{ .block {
display: flex; display: flex;
height: 100%; height: 100%;
padding: 0 10px; padding: 0 10px;
cursor: pointer; cursor: pointer;
align-items: center; align-items: center;
transition: background var(--transition-time-02); transition: background var(--transition-time-02);
} }
</style> </style>

16
src/layout/components/UserInfo/src/UserInfo.vue

@ -5,19 +5,16 @@ import avatarImg from '@/assets/imgs/avatar.gif'
import { useTagsViewStore } from '@/store/modules/tagsView' import { useTagsViewStore } from '@/store/modules/tagsView'
import { useUserStore } from '@/store/modules/user' import { useUserStore } from '@/store/modules/user'
defineOptions({ name: 'UserInfo' }) defineOptions({ name: 'UserInfo' })
const { t } = useI18n() const { t } = useI18n()
const { replace } = useRouter() const { replace } = useRouter()
const userStore = useUserStore() const userStore = useUserStore()
const tagsViewStore = useTagsViewStore() const tagsViewStore = useTagsViewStore()
const avatar = computed(() => userStore.user.avatar || avatarImg) const avatar = computed(() => userStore.user.avatar || avatarImg)
const realName = computed(() => userStore.user.realName ?? '管理员') const realName = computed(() => userStore.user.realName ?? '管理员')
const deptName = computed(() => userStore.user.deptName ?? '管理员') const deptName = computed(() => userStore.user.deptName ?? '管理员')
@ -34,7 +31,6 @@ const loginOut = async () => {
replace('/login?redirect=/index') replace('/login?redirect=/index')
} catch {} } catch {}
} }
</script> </script>
<template> <template>
@ -43,11 +39,13 @@ const loginOut = async () => {
<span class="text-14px color-#303133 font-500 line-height-22px"> <span class="text-14px color-#303133 font-500 line-height-22px">
{{ realName }} | {{ deptName }} {{ realName }} | {{ deptName }}
</span> </span>
<div @click="loginOut" class="hover:color-[var(--el-color-primary)] translate-y-1px"> <div
<Icon icon="ep:switch-button" :size="20"/> @click="loginOut"
</div> class="color-[var(--el-color-primary)] cursor-pointer text-14px font-500 line-height-22px"
>
退出
</div>
</div> </div>
</template> </template>
<style scoped lang="scss"> <style scoped lang="scss">

2
src/layout/components/useRenderLayout.tsx

@ -9,6 +9,7 @@ import ToolHeader from './ToolHeader.vue'
import { ElScrollbar } from 'element-plus' import { ElScrollbar } from 'element-plus'
import { useDesign } from '@/hooks/web/useDesign' import { useDesign } from '@/hooks/web/useDesign'
import { BackOperation } from '@/layout/components/BackOperation' import { BackOperation } from '@/layout/components/BackOperation'
import { Breadcrumb } from '@/layout/components/Breadcrumb'
const { getPrefixCls } = useDesign() const { getPrefixCls } = useDesign()
@ -75,6 +76,7 @@ export const useRenderLayout = () => {
style="transition: all var(--transition-time-02);padding:16px 20px" style="transition: all var(--transition-time-02);padding:16px 20px"
> >
<div> <div>
<Breadcrumb></Breadcrumb>
<BackOperation /> <BackOperation />
</div> </div>
<ToolHeader></ToolHeader> <ToolHeader></ToolHeader>

11
src/styles/variables.scss

@ -56,3 +56,14 @@ $elNamespace: el;
padding: 8px 10px; padding: 8px 10px;
} }
} }
:deep(.el-breadcrumb__item:not(:last-child) .el-breadcrumb__inner) {
color: var(--el-text-color-placeholder) !important;
font-weight: normal;
}
:deep(.el-breadcrumb__item:last-child .el-breadcrumb__inner) {
color: #303133 !important;
cursor: pointer;
}

4
src/views/Home/Index.vue

@ -36,11 +36,11 @@
</el-col> </el-col>
<section class="flex gap-20px items-center mb-20px"> <section class="flex gap-20px items-center mb-20px">
<el-button type="primary" plain @click="getData"> <el-button type="primary" plain @click="getData">
<Icon icon="ep:search" /> <Icon icon="ep:search" class="mr-5px"/>
查询 查询
</el-button> </el-button>
<el-button @click="reset"> <el-button @click="reset">
<Icon icon="ep:refresh" /> <Icon icon="ep:refresh" class="mr-5px" />
重置 重置
</el-button> </el-button>
</section> </section>

2
src/views/enterprises/index.vue

@ -114,7 +114,7 @@
{{ getDictLabel(DICT_TYPE.ENTERPRISES_AREA, scope.row.region) }} {{ getDictLabel(DICT_TYPE.ENTERPRISES_AREA, scope.row.region) }}
</template> </template>
</el-table-column> </el-table-column>
<el-table-column label="行业类别" width="300"> <el-table-column label="行业类别">
<template #default="scope"> <template #default="scope">
<span v-if="scope.row.tagListName"> <span v-if="scope.row.tagListName">
{{ scope.row.tagListName.map((i) => i.label).join('、') }} {{ scope.row.tagListName.map((i) => i.label).join('、') }}

3
src/views/enterprises/update.vue

@ -444,10 +444,11 @@ const getDetail = () => {
formData.value.photo = formData.value.files formData.value.photo = formData.value.files
formData.value.gpsLocation = formData.value.gpsLocation.split(',') formData.value.gpsLocation = formData.value.gpsLocation.split(',')
formData.value.tagIds = res.tagObjList.map((i) => i.id) formData.value.tagIds = res.tagObjList.map((i) => i.id)
if (isView) { if (isView.value) {
formData.value.region = getDictLabel(DICT_TYPE.ENTERPRISES_AREA, formData.value.region) formData.value.region = getDictLabel(DICT_TYPE.ENTERPRISES_AREA, formData.value.region)
formData.value.tagIds = res.tagObjList.map((i) => i.tagName).join(',') formData.value.tagIds = res.tagObjList.map((i) => i.tagName).join(',')
} }
console.log(formData.value.tagIds)
}) })
} }

0
src/views/wait.vue → src/views/hollow.vue

9
src/views/oparetion/emty.vue

@ -0,0 +1,9 @@
<script setup lang="ts"></script>
<template>
<ContentWrap>
<el-empty />
</ContentWrap>
</template>
<style scoped lang="scss"></style>

216
src/views/qualification/index.vue

@ -1,114 +1,90 @@
<template> <template>
<ContentWrap> <ContentWrap>
<section class="flex flex-col gap-20px"> <section class="flex flex-col gap-20px">
<!-- 搜索工作栏 --> <!-- 搜索工作栏 -->
<el-form <el-form
class="-mb-15px" class="-mb-15px"
:model="queryParams" :model="queryParams"
ref="queryFormRef" ref="queryFormRef"
:inline="true" :inline="true"
label-width="98px" label-width="98px"
size="large" size="large"
> >
<el-form-item label="" prop="qualificationName"> <el-form-item label="" prop="qualificationName">
<el-input <el-input
v-model="queryParams.enterpriseName" v-model="queryParams.enterpriseName"
placeholder="请输入企业名称" placeholder="请输入企业名称"
clearable clearable
@keyup.enter="handleQuery" @keyup.enter="handleQuery"
class="!w-240px" class="!w-370px"
/> :prefix-icon="Search"
</el-form-item> />
<el-form-item label="" prop="qualificationName" > </el-form-item>
<el-select <el-form-item label="" prop="qualificationName">
<el-select
v-model="queryParams.qualificationName" v-model="queryParams.qualificationName"
placeholder="请选择资质名称" placeholder="请选择资质名称"
clearable clearable
class="!w-240px" class="!w-370px"
> >
<el-option <el-option
v-for="dict in getStrDictOptions(DICT_TYPE.ENTERPRISES_QUA)" v-for="dict in getStrDictOptions(DICT_TYPE.ENTERPRISES_QUA)"
:key="dict.value" :key="dict.value"
:label="dict.label" :label="dict.label"
:value="dict.value" :value="dict.value"
/> />
</el-select> </el-select>
</el-form-item> </el-form-item>
<el-form-item label="" prop="expiryDate"> <el-form-item label="" prop="expiryDate">
<el-date-picker <el-date-picker
v-model="queryParams.expiryDate" v-model="queryParams.expiryDate"
value-format="YYYY-MM-DD HH:mm:ss" value-format="YYYY-MM-DD HH:mm:ss"
type="daterange" type="daterange"
start-placeholder="开始日期" start-placeholder="开始日期"
end-placeholder="结束日期" end-placeholder="结束日期"
:default-time="[new Date('1 00:00:00'), new Date('1 23:59:59')]" :default-time="[new Date('1 00:00:00'), new Date('1 23:59:59')]"
class="!w-220px" class="!w-370px"
/> />
</el-form-item> </el-form-item>
<el-form-item> <el-form-item>
<el-button @click="handleQuery"><Icon icon="ep:search" class="mr-5px" /> 查询</el-button> <el-button @click="handleQuery" type="primary" plain
<el-button @click="resetQuery"><Icon icon="ep:circle-plus" class="mr-5px" /> 重置</el-button> ><Icon icon="ep:search" class="mr-5px" /> 查询</el-button
<el-button
type="primary"
plain
@click="openForm('create')"
>
<Icon icon="ep:circle-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-form>
<el-table v-loading="loading" :data="list" :stripe="true" :show-overflow-tooltip="true">
<el-table-column label="企业名称" align="center" prop="enterpriseName" />
<el-table-column label="资质名称" align="center" prop="qualificationName" >
<template #default="scope">
<dict-tag :type="DICT_TYPE.ENTERPRISES_QUA" :value="scope.row.qualificationName" />
</template>
</el-table-column>
<el-table-column label="资质到期日期" :formatter="dateFormatter2" align="center" prop="expiryDate" />
<!-- <el-table-column label="办理日期" :formatter="dateFormatter2" align="center" prop="handleDate" /> -->
<el-table-column label="资质编号" align="center" prop="enterpriseAuth" />
<el-table-column label="操作" align="center" min-width="120px">
<template #default="scope">
<el-button
link
type="primary"
@click="openForm('update', scope.row.id)"
>
编辑
</el-button>
<el-button
link
type="danger"
@click="handleDelete(scope.row.id)"
> >
删除 <el-button @click="resetQuery"><Icon icon="ep:refresh" class="mr-5px" /> 重置</el-button>
</el-button> </el-form-item>
</template> </el-form>
</el-table-column> <el-table v-loading="loading" :data="list" :show-overflow-tooltip="true">
</el-table> <el-table-column label="企业名称" prop="enterpriseName" />
<!-- 分页 --> <el-table-column label="资质名称" prop="qualificationName" width="240">
<el-pagination <template #default="scope">
:total="total" {{getDictLabel(DICT_TYPE.ENTERPRISES_QUA, scope.row.qualificationName)}}
:show-page-size="false" </template>
layout="total, prev, pager, next" </el-table-column>
v-model:current-page="queryParams.pageNo" <el-table-column label="资质编号" prop="enterpriseAuth" width="477" />
v-model:page-size="queryParams.pageSize" <el-table-column
@change="getList" label="到期时间"
class="ml-auto" :formatter="dateFormatter2"
/> prop="expiryDate"
</section> width="240"
/>
<el-table-column label="操作选择" align="center" width="100">
<template #default="{ row }">
<el-link type="primary" @click="openForm({ id: row.id })">编辑</el-link>
</template>
</el-table-column>
<!-- <el-table-column label="办理日期" :formatter="dateFormatter2" align="center" prop="handleDate" /> -->
</el-table>
<!-- 分页 -->
<el-pagination
:total="total"
:show-page-size="false"
layout="total, prev, pager, next"
v-model:current-page="queryParams.pageNo"
v-model:page-size="queryParams.pageSize"
@change="getList"
class="ml-auto"
/>
</section>
</ContentWrap> </ContentWrap>
<!-- 表单弹窗添加/修改 --> <!-- 表单弹窗添加/修改 -->
@ -116,18 +92,15 @@
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
import { dateFormatter,dateFormatter2 } from '@/utils/formatTime' import { dateFormatter2 } from '@/utils/formatTime'
import download from '@/utils/download'
import { EnterpriseQualificationApi, EnterpriseQualificationVO } from '@/api/qualification' import { EnterpriseQualificationApi, EnterpriseQualificationVO } from '@/api/qualification'
import Prove from './prove.vue' import Prove from './prove.vue'
import {DICT_TYPE, getStrDictOptions} from "@/utils/dict"; import { DICT_TYPE, getStrDictOptions,getDictLabel } from '@/utils/dict'
import { Search } from '@element-plus/icons-vue'
/** 企业资质 列表 */ /** 企业资质 列表 */
defineOptions({ name: 'EnterpriseQualification' }) defineOptions({ name: 'EnterpriseQualification' })
const message = useMessage() //
const { t } = useI18n() //
const loading = ref(true) // const loading = ref(true) //
const list = ref<EnterpriseQualificationVO[]>([]) // const list = ref<EnterpriseQualificationVO[]>([]) //
const total = ref(0) // const total = ref(0) //
@ -143,10 +116,9 @@ const queryParams = reactive({
updateBy: undefined, updateBy: undefined,
createBy: undefined, createBy: undefined,
handleDate: [], handleDate: [],
enterpriseAuth: undefined, enterpriseAuth: undefined
}) })
const queryFormRef = ref() // const queryFormRef = ref() //
const exportLoading = ref(false) //
/** 查询列表 */ /** 查询列表 */
const getList = async () => { const getList = async () => {
@ -174,36 +146,8 @@ const resetQuery = () => {
/** 添加/修改操作 */ /** 添加/修改操作 */
const formRef = ref() const formRef = ref()
const openForm = (type: string, id?: number) => { const openForm = (params) => {
formRef.value.open(type, id) formRef.value.open(params)
}
/** 删除按钮操作 */
const handleDelete = async (id: number) => {
try {
//
await message.delConfirm()
//
await EnterpriseQualificationApi.deleteEnterpriseQualification(id)
message.success(t('common.delSuccess'))
//
await getList()
} catch {}
}
/** 导出按钮操作 */
const handleExport = async () => {
try {
//
await message.exportConfirm()
//
exportLoading.value = true
const data = await EnterpriseQualificationApi.exportEnterpriseQualification(queryParams)
download.excel(data, '企业资质.xls')
} catch {
} finally {
exportLoading.value = false
}
} }
/** 初始化 **/ /** 初始化 **/

5
src/views/screen/compenonts/leftwrapper.vue

@ -3,10 +3,10 @@
<TitleBox> <TitleBox>
<Charts :options="row1Options" ref="row1Chart" /> <Charts :options="row1Options" ref="row1Chart" />
</TitleBox> </TitleBox>
<TitleBox title="任务类型" isRight> <TitleBox isRight>
<Charts :options="row2Options" ref="row2Chart" /> <Charts :options="row2Options" ref="row2Chart" />
</TitleBox> </TitleBox>
<TitleBox isRight> <TitleBox title="执法频次" >
<Charts :options="row3Options" ref="row3Chart" /> <Charts :options="row3Options" ref="row3Chart" />
</TitleBox> </TitleBox>
</section> </section>
@ -199,6 +199,7 @@ const row3Options: any = ref({
show: false show: false
}, },
axisLabel: { axisLabel: {
show:false,
color: '#fff', color: '#fff',
fontSize: 12 fontSize: 12
} }

3
src/views/screen/compenonts/norm.vue

@ -1,6 +1,5 @@
<template> <template>
<section class="flex flex-col gap-12px p-12px"> <section class="flex flex-col gap-12px p-12px">
<section class="color-#56CA00"> 实时空气指标 </section>
<section class="norm" v-for="(item, index) in list" :key="index"> <section class="norm" v-for="(item, index) in list" :key="index">
<section> <section>
{{ item.label }} {{ item.label }}
@ -17,6 +16,7 @@
import { ScreenApi } from '@/api/screen' import { ScreenApi } from '@/api/screen'
const list = ref([] as any) const list = ref([] as any)
const time=ref()
const getAirQuality = async () => { const getAirQuality = async () => {
const res = await ScreenApi.getAirData({}) const res = await ScreenApi.getAirData({})
const airData = { const airData = {
@ -53,6 +53,7 @@ const getAirQuality = async () => {
suffix: 'ug/m³' suffix: 'ug/m³'
} }
} }
time.value=res.time
list.value = Object.keys(res) list.value = Object.keys(res)
.map((key) => { .map((key) => {
if (airData.hasOwnProperty(key)) { if (airData.hasOwnProperty(key)) {

2
src/views/screen/compenonts/rightwrapper.vue

@ -3,7 +3,7 @@
<TitleBox title="执法任务"> <TitleBox title="执法任务">
<Charts :options="row1Options" ref="row1Chart" /> <Charts :options="row1Options" ref="row1Chart" />
</TitleBox> </TitleBox>
<TitleBox title="资质临期状态"> <TitleBox title="资质临期">
<section class="list-container"> <section class="list-container">
<section <section
class="position-absolute inset-0 overflow-y-auto flex flex-col gap-12px list" class="position-absolute inset-0 overflow-y-auto flex flex-col gap-12px list"

4
src/views/screen/compenonts/tabber.vue

@ -13,10 +13,10 @@
<section class="tabs-box"> <section class="tabs-box">
<section <section
:class="['item', curTab == item.value ? 'item-active' : '']" :class="['item', curTab == index? 'item-active' : '']"
v-for="(item, index) in tabberList" v-for="(item, index) in tabberList"
:key="index" :key="index"
@click="curTab = item.value " @click="curTab = index "
style="padding: 12px 16px" style="padding: 12px 16px"
> >
{{ item }} {{ item }}

2
src/views/system/jobinfo/index.vue

@ -15,7 +15,7 @@
placeholder="请输入汇报标题" placeholder="请输入汇报标题"
clearable clearable
@keyup.enter="handleQuery" @keyup.enter="handleQuery"
class="!w-240px" class="!w-370px"
:prefix-icon="Search" :prefix-icon="Search"
/> />
</el-form-item> </el-form-item>

8
src/views/system/taglibrary/index.vue

@ -15,13 +15,14 @@
clearable clearable
@keyup.enter.prevent="handleQuery" @keyup.enter.prevent="handleQuery"
class="!w-370px" class="!w-370px"
:prefix-icon="Search"
/> />
</el-form-item> </el-form-item>
<el-form-item label=""> <el-form-item label="">
<el-button @click="handleQuery" type="primary" plain <el-button @click="handleQuery" type="primary" plain
><Icon icon="ep:search" class="mr-8px" /> 查询 ><Icon icon="ep:search" class="mr-5px" /> 查询
</el-button> </el-button>
<el-button @click="resetQuery"><Icon icon="ep:refresh" class="mr-8px" /> 重置</el-button> <el-button @click="resetQuery"><Icon icon="ep:refresh" class="mr-5px" /> 重置</el-button>
<el-button <el-button
type="success" type="success"
plain plain
@ -29,7 +30,7 @@
:loading="exportLoading" :loading="exportLoading"
v-hasPermi="['system:tag-library:export']" v-hasPermi="['system:tag-library:export']"
> >
<Icon icon="ep:download" class="mr-8px" /> 导出 <Icon icon="ep:download" class="mr-5px" /> 导出
</el-button> </el-button>
</el-form-item> </el-form-item>
<el-form-item class="ml-auto"> <el-form-item class="ml-auto">
@ -72,6 +73,7 @@
import download from '@/utils/download' import download from '@/utils/download'
import { TagLibraryApi, TagLibraryVO } from '@/api/system/taglibrary' import { TagLibraryApi, TagLibraryVO } from '@/api/system/taglibrary'
import TagForm from './form.vue' import TagForm from './form.vue'
import {Search} from "@element-plus/icons-vue";
type QueryParams = { type QueryParams = {
pageNo: number pageNo: number

Loading…
Cancel
Save