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 () => (
<ElBreadcrumb separator="/" class={`${prefixCls} flex items-center h-full ml-[10px]`}>
<TransitionGroup appear enter-active-class="animate__animated animate__fadeInRight">
<ElBreadcrumb separator="/" class={`${prefixCls} flex items-center h-full`}>
{renderBreadcrumb()}
</TransitionGroup>
</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 { useDesign } from '@/hooks/web/useDesign'
const { variables } = useDesign()
const { variables } = useDesign()
const appStore = useAppStore()
//
const screenfull = computed(() => appStore.getScreenfull)
@ -25,21 +22,15 @@ const search = computed(() => appStore.search)
//
const size = computed(() => appStore.getSize)
//
const locale = computed(() => appStore.getLocale)
export default defineComponent({
name: 'ToolHeader',
setup() {
return () => (
<div
id={`${variables.namespace}-tool-header`}
class=" relative flex items-cente "
>
<div class="flex items-center" >
<div id={`${variables.namespace}-tool-header`} class=" relative flex items-cente ">
<div class="flex items-center">
<Screen class="block" color="var(--top-header-text-color)" />
{screenfull.value ? (
<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>
) : undefined}
{locale.value ? (
<LocaleDropdown
class="block"
color="var(--top-header-text-color)"
></LocaleDropdown>
<LocaleDropdown class="block" color="var(--top-header-text-color)"></LocaleDropdown>
) : undefined}
<UserInfo></UserInfo>
</div>
@ -68,12 +56,12 @@ $prefix-cls: #{$namespace}-tool-header;
.#{$prefix-cls} {
transition: left var(--transition-time-02);
}
.block{
display: flex;
height: 100%;
padding: 0 10px;
cursor: pointer;
align-items: center;
transition: background var(--transition-time-02);
.block {
display: flex;
height: 100%;
padding: 0 10px;
cursor: pointer;
align-items: center;
transition: background var(--transition-time-02);
}
</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 { useUserStore } from '@/store/modules/user'
defineOptions({ name: 'UserInfo' })
const { t } = useI18n()
const { replace } = useRouter()
const { replace } = useRouter()
const userStore = useUserStore()
const tagsViewStore = useTagsViewStore()
const avatar = computed(() => userStore.user.avatar || avatarImg)
const realName = computed(() => userStore.user.realName ?? '管理员')
const deptName = computed(() => userStore.user.deptName ?? '管理员')
@ -34,7 +31,6 @@ const loginOut = async () => {
replace('/login?redirect=/index')
} catch {}
}
</script>
<template>
@ -43,11 +39,13 @@ const loginOut = async () => {
<span class="text-14px color-#303133 font-500 line-height-22px">
{{ realName }} | {{ deptName }}
</span>
<div @click="loginOut" class="hover:color-[var(--el-color-primary)] translate-y-1px">
<Icon icon="ep:switch-button" :size="20"/>
</div>
<div
@click="loginOut"
class="color-[var(--el-color-primary)] cursor-pointer text-14px font-500 line-height-22px"
>
退出
</div>
</div>
</template>
<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 { useDesign } from '@/hooks/web/useDesign'
import { BackOperation } from '@/layout/components/BackOperation'
import { Breadcrumb } from '@/layout/components/Breadcrumb'
const { getPrefixCls } = useDesign()
@ -75,6 +76,7 @@ export const useRenderLayout = () => {
style="transition: all var(--transition-time-02);padding:16px 20px"
>
<div>
<Breadcrumb></Breadcrumb>
<BackOperation />
</div>
<ToolHeader></ToolHeader>

11
src/styles/variables.scss

@ -56,3 +56,14 @@ $elNamespace: el;
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>
<section class="flex gap-20px items-center mb-20px">
<el-button type="primary" plain @click="getData">
<Icon icon="ep:search" />
<Icon icon="ep:search" class="mr-5px"/>
查询
</el-button>
<el-button @click="reset">
<Icon icon="ep:refresh" />
<Icon icon="ep:refresh" class="mr-5px" />
重置
</el-button>
</section>

2
src/views/enterprises/index.vue

@ -114,7 +114,7 @@
{{ getDictLabel(DICT_TYPE.ENTERPRISES_AREA, scope.row.region) }}
</template>
</el-table-column>
<el-table-column label="行业类别" width="300">
<el-table-column label="行业类别">
<template #default="scope">
<span v-if="scope.row.tagListName">
{{ 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.gpsLocation = formData.value.gpsLocation.split(',')
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.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>
<ContentWrap>
<section class="flex flex-col gap-20px">
<!-- 搜索工作栏 -->
<el-form
class="-mb-15px"
:model="queryParams"
ref="queryFormRef"
:inline="true"
label-width="98px"
size="large"
>
<el-form-item label="" prop="qualificationName">
<el-input
v-model="queryParams.enterpriseName"
placeholder="请输入企业名称"
clearable
@keyup.enter="handleQuery"
class="!w-240px"
/>
</el-form-item>
<el-form-item label="" prop="qualificationName" >
<el-select
<!-- 搜索工作栏 -->
<el-form
class="-mb-15px"
:model="queryParams"
ref="queryFormRef"
:inline="true"
label-width="98px"
size="large"
>
<el-form-item label="" prop="qualificationName">
<el-input
v-model="queryParams.enterpriseName"
placeholder="请输入企业名称"
clearable
@keyup.enter="handleQuery"
class="!w-370px"
:prefix-icon="Search"
/>
</el-form-item>
<el-form-item label="" prop="qualificationName">
<el-select
v-model="queryParams.qualificationName"
placeholder="请选择资质名称"
clearable
class="!w-240px"
class="!w-370px"
>
<el-option
<el-option
v-for="dict in getStrDictOptions(DICT_TYPE.ENTERPRISES_QUA)"
:key="dict.value"
:label="dict.label"
:value="dict.value"
/>
</el-select>
</el-form-item>
<el-form-item label="" prop="expiryDate">
<el-date-picker
v-model="queryParams.expiryDate"
value-format="YYYY-MM-DD HH:mm:ss"
type="daterange"
start-placeholder="开始日期"
end-placeholder="结束日期"
:default-time="[new Date('1 00:00:00'), new Date('1 23:59:59')]"
class="!w-220px"
/>
</el-form-item>
<el-form-item>
<el-button @click="handleQuery"><Icon icon="ep:search" class="mr-5px" /> 查询</el-button>
<el-button @click="resetQuery"><Icon icon="ep:circle-plus" 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-select>
</el-form-item>
<el-form-item label="" prop="expiryDate">
<el-date-picker
v-model="queryParams.expiryDate"
value-format="YYYY-MM-DD HH:mm:ss"
type="daterange"
start-placeholder="开始日期"
end-placeholder="结束日期"
:default-time="[new Date('1 00:00:00'), new Date('1 23:59:59')]"
class="!w-370px"
/>
</el-form-item>
<el-form-item>
<el-button @click="handleQuery" type="primary" plain
><Icon icon="ep:search" class="mr-5px" /> 查询</el-button
>
删除
</el-button>
</template>
</el-table-column>
</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>
<el-button @click="resetQuery"><Icon icon="ep:refresh" class="mr-5px" /> 重置</el-button>
</el-form-item>
</el-form>
<el-table v-loading="loading" :data="list" :show-overflow-tooltip="true">
<el-table-column label="企业名称" prop="enterpriseName" />
<el-table-column label="资质名称" prop="qualificationName" width="240">
<template #default="scope">
{{getDictLabel(DICT_TYPE.ENTERPRISES_QUA, scope.row.qualificationName)}}
</template>
</el-table-column>
<el-table-column label="资质编号" prop="enterpriseAuth" width="477" />
<el-table-column
label="到期时间"
:formatter="dateFormatter2"
prop="expiryDate"
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>
<!-- 表单弹窗添加/修改 -->
@ -116,18 +92,15 @@
</template>
<script setup lang="ts">
import { dateFormatter,dateFormatter2 } from '@/utils/formatTime'
import download from '@/utils/download'
import { dateFormatter2 } from '@/utils/formatTime'
import { EnterpriseQualificationApi, EnterpriseQualificationVO } from '@/api/qualification'
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' })
const message = useMessage() //
const { t } = useI18n() //
const loading = ref(true) //
const list = ref<EnterpriseQualificationVO[]>([]) //
const total = ref(0) //
@ -143,10 +116,9 @@ const queryParams = reactive({
updateBy: undefined,
createBy: undefined,
handleDate: [],
enterpriseAuth: undefined,
enterpriseAuth: undefined
})
const queryFormRef = ref() //
const exportLoading = ref(false) //
/** 查询列表 */
const getList = async () => {
@ -174,36 +146,8 @@ const resetQuery = () => {
/** 添加/修改操作 */
const formRef = ref()
const openForm = (type: string, id?: number) => {
formRef.value.open(type, id)
}
/** 删除按钮操作 */
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
}
const openForm = (params) => {
formRef.value.open(params)
}
/** 初始化 **/

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

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

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

@ -1,6 +1,5 @@
<template>
<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>
{{ item.label }}
@ -17,6 +16,7 @@
import { ScreenApi } from '@/api/screen'
const list = ref([] as any)
const time=ref()
const getAirQuality = async () => {
const res = await ScreenApi.getAirData({})
const airData = {
@ -53,6 +53,7 @@ const getAirQuality = async () => {
suffix: 'ug/m³'
}
}
time.value=res.time
list.value = Object.keys(res)
.map((key) => {
if (airData.hasOwnProperty(key)) {

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

@ -3,7 +3,7 @@
<TitleBox title="执法任务">
<Charts :options="row1Options" ref="row1Chart" />
</TitleBox>
<TitleBox title="资质临期状态">
<TitleBox title="资质临期">
<section class="list-container">
<section
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="['item', curTab == item.value ? 'item-active' : '']"
:class="['item', curTab == index? 'item-active' : '']"
v-for="(item, index) in tabberList"
:key="index"
@click="curTab = item.value "
@click="curTab = index "
style="padding: 12px 16px"
>
{{ item }}

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

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

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

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

Loading…
Cancel
Save