Browse Source

1、修改备注,附件,变更记录位置

2、搜索框移动菜单栏(隐藏)
master_hella_20240701
yufei0306 8 months ago
parent
commit
55e6be62ae
  1. 13
      src/components/Annex/src/Annex.vue
  2. 9
      src/components/ChangeRecord/src/ChangeRecord.vue
  3. 14
      src/components/Descriptions/src/Descriptions.vue
  4. 27
      src/components/Detail/src/Detail.vue
  5. 22
      src/components/Remarks/src/Remarks.vue
  6. 17
      src/layout/components/useRenderLayout.tsx

13
src/components/Annex/src/Annex.vue

@ -2,14 +2,15 @@
<template>
<div class="annex">
<div class="title flex items-center">
<div class="title-txt">附件</div>
<UploadFile :isShowFile="false" :isShowTip="false" title="添加附件" :upData="upData"
@update:modelValue="handleAnnexSuccess" />
<!-- <div class="title-txt">附件</div> -->
<UploadFile
:isShowFile="false" :isShowTip="false" title="添加附件" :upData="upData"
@update:model-value="handleAnnexSuccess" />
</div>
<div class="list">
<div class="item flex items-start" v-for="(item, index) in annexData.annexList" :key="index">
<Icon icon="fa:file-text-o" color="#409eff" size="30" class="mt-4px" />
<div class="item-center" >
<div class="item-center">
<div class="item-title" @click="downFile(item)">{{ item.name }}</div>
<div class="info mt-6px">
<div class="info-txt">
@ -18,7 +19,7 @@
</div>
<Icon icon="ep:delete" class="cursor-pointer" size="18" @click="deleteAnnex(item.id)" />
</div>
<div class="time mt-6px ">{{ formatDate(item.createTime) }}</div>
<div class="time mt-6px">{{ formatDate(item.createTime) }}</div>
</div>
</div>
</div>
@ -72,7 +73,7 @@ const downFile = (item)=>{
<style scoped lang="scss">
.title {
border-bottom: 1px solid #dedede;
justify-content: space-between;
justify-content: flex-end;
.title-txt {
width: 80px;

9
src/components/ChangeRecord/src/ChangeRecord.vue

@ -1,22 +1,23 @@
<!-- 变更记录组件 -->
<template>
<div class="annex">
<div class="title flex items-center">
<!-- <div class="title flex items-center">
<div class="title-txt">变更记录</div>
</div>
</div> -->
<div class="list">
<el-steps direction="vertical" class="mt-16px" :space="90">
<el-step v-for="(item, index) in changeRecordData.changeRecordList" :key="index">
<template #icon>
<slot>
<Icon color="#9e9e9e"
<Icon
color="#9e9e9e"
:icon="item.type == 1 ? 'ep:document-add' : item.type == 2 ? 'ep:edit' : item.type == 3 ? 'ep:delete' : item.type == 4 ? 'fa:edit' : item.type == 5 ? 'ep:upload' : item.type == 6 ? 'ep:document-delete' : item.type == 7 ? 'ep:chat-line-square' : item.type == 8 ? 'ep:delete' : ''"
class="cursor-pointer" size="20" />
</slot>
</template>
<template #title>
<slot>
<span class="color-#9e9e9e font-size-16px time">{{ formatDate(item.createTime) }}</span>
<span class="time font-size-16px color-#9e9e9e">{{ formatDate(item.createTime) }}</span>
</slot>
</template>
<template #description>

14
src/components/Descriptions/src/Descriptions.vue

@ -108,7 +108,7 @@ const showAll = () =>{
<Icon v-if="collapse" :icon="show ? 'ep:arrow-down' : 'ep:arrow-up'" />
</div>
<ElCollapseTransition :style="{height: height,overflow: 'hidden'}">
<ElCollapseTransition :style="{height: height,overflow: 'hidden'}">
<div v-show="show" :class="[`${prefixCls}-content`]">
<ElDescriptions
:column="props.columns"
@ -133,7 +133,7 @@ const showAll = () =>{
:row="{
label: item.label
}"
>{{ item.label }}
>{{ item.label }}
</slot>
</template>
@ -144,10 +144,10 @@ const showAll = () =>{
}}
</slot>
<slot v-else-if="item.dictType">
<div v-if="data[item.field]&&Array.isArray(data[item.field])" >
<DictTag :type="item.dictType" :value="cur" v-for="(cur,key) in data[item.field]" :key="key" style="margin-right: 6px;margin-bottom: 6px;"/>
<div v-if="data[item.field]&&Array.isArray(data[item.field])">
<DictTag :type="item.dictType" :value="cur" v-for="(cur,key) in data[item.field]" :key="key" style="margin-right: 6px;margin-bottom: 6px;" />
</div>
<DictTag :type="item.dictType" :value="data[item.field] + ''" v-if="data[item.field]&&!Array.isArray(data[item.field])"/>
<DictTag :type="item.dictType" :value="data[item.field] + ''" v-if="data[item.field]&&!Array.isArray(data[item.field])" />
</slot>
<slot v-else :name="item.field" :row="data">{{ data[item.field] }}</slot>
</template>
@ -155,8 +155,8 @@ const showAll = () =>{
</ElDescriptions>
</div>
</ElCollapseTransition>
<div class="flex align-center justify-center">
<el-button type="primary" class="mt-20px" @click="showAll">{{!isShow?'展开':'收起'}}</el-button>
<div class="align-center flex justify-center">
<el-button type="primary" class="mt-20px" @click="showAll">{{ !isShow?'展开':'收起' }}</el-button>
</div>
</div>
</template>

27
src/components/Detail/src/Detail.vue

@ -28,7 +28,7 @@
<Tabs :tabsList="tabsList" :current="current" @change="change" />
<div class="flex">
<!-- 详情 -->
<ContentWrap class="w-[73%]">
<ContentWrap class="w-[100%]" v-show="current<tabsList.length-3">
<!-- 列表头部 -->
<TableHead
v-if="!isBasic"
@ -72,8 +72,8 @@
v-model:pageSize="tableObjectRef.pageSize"
v-model:currentPage="tableObjectRef.currentPage"
>
<template #photos="{ row }">
<div v-for="(item,index) in row.photos.split(',')" :key="index" style="color:#409eff ; cursor: pointer;" @click="openImage(item)">{{ item }}</div>
<template #photos="{ row }">
<div v-for="(item,index) in row.photos.split(',')" :key="index" style="color:#409eff ; cursor: pointer;" @click="openImage(item)">{{ item }}</div>
</template>
<template #action="{ row }">
<ButtonBase
@ -98,9 +98,12 @@
</template>
</DetailTable>
</ContentWrap>
<ContentWrap class="w-[27%] ml-16px">
<!-- 附件/备注/变更记录 -->
<ContentWrap class="w-[100%]" v-show="current>=tabsList.length-3">
<!-- 附件组件 -->
<Annex
v-show="current===tabsList.length-3"
:annexData="annexData"
@handleAnnexSuccess="handleAnnexSuccess"
@deleteAnnexSuccess="deleteAnnexSuccess"
@ -108,14 +111,16 @@
/>
<!-- 备注组件 -->
<Remarks
v-show="current===tabsList.length-2"
:remarksData="remarksData"
class="mt-20px"
@remarksSubmitScuess="remarksSubmitScuess"
/>
<!-- 变更记录组件 -->
<ChangeRecord :changeRecordData="changeRecordData" class="mt-20px" />
<ChangeRecord v-show="current===tabsList.length-1" :changeRecordData="changeRecordData" class="mt-20px" />
</ContentWrap>
</div>
</el-drawer>
<!-- 表单弹窗添加/修改 -->
<BasicForm
@ -322,8 +327,16 @@ if (props.isBasic == true) {
]
}
}
if (tabsList.value) {
}
tabsList.value = [...tabsList?.value,{
label:'附件',
prop:'Annex'
},{
label:'备注',
prop:'Remarks'
},{
label:'变更记录',
prop:'ChangeRecord'
}]
//
const annexData = reactive({

22
src/components/Remarks/src/Remarks.vue

@ -1,29 +1,29 @@
<!-- 备注组件 -->
<template>
<div class="annex">
<div class="title flex items-center">
<!-- <div class="title flex items-center">
<div class="title-txt">备注</div>
</div>
</div> -->
<div class="list">
<div class="item flex items-start" v-for="(item, index) in remarksData.remarksList" :key="index">
<div class="user-icon mt-4px">
<img :src="item.avatar" v-if="item.avatar" alt="" class="w-[100%] h-[100%]"/>
<Icon icon="fa-solid:user" color="#fff" v-else size="16"/>
<img :src="item.avatar" v-if="item.avatar" alt="" class="h-[100%] w-[100%]" />
<Icon icon="fa-solid:user" color="#fff" v-else size="16" />
</div>
<div class="item-center">
<div class="item-title">
<div class="item-title-txt">{{ item.nickname }}</div>
<div class="time">{{formatDate(item.createTime)}}</div>
<div class="time">{{ formatDate(item.createTime) }}</div>
</div>
<div class="mt-8px color-#303133 font-size-14px">{{ item.remark }}</div>
<div class="mt-8px font-size-14px color-#303133">{{ item.remark }}</div>
</div>
</div>
</div>
<div class="add-remarks flex items-center mt-20px">
<el-input v-model="data.remark" placeholder="请输入备注" />
<el-button class="ml-16px" type="primary" @click="handleSubmitrRemarks" >
确定
</el-button>
<div class="add-remarks mt-20px flex items-center">
<el-input v-model="data.remark" placeholder="请输入备注" />
<el-button class="ml-16px" type="primary" @click="handleSubmitrRemarks">
确定
</el-button>
</div>
</div>
</template>

17
src/layout/components/useRenderLayout.tsx

@ -8,6 +8,7 @@ import AppView from './AppView.vue'
import ToolHeader from './ToolHeader.vue'
import { ElScrollbar } from 'element-plus'
import { useDesign } from '@/hooks/web/useDesign'
import RouterSearch from '@/components/RouterSearch/index.vue'
const { getPrefixCls } = useDesign()
@ -35,6 +36,9 @@ const mobile = computed(() => appStore.getMobile)
// 固定菜单
const fixedMenu = computed(() => appStore.getFixedMenu)
// 搜索图片
const search = computed(() => appStore.search)
export const useRenderLayout = () => {
const renderClassic = () => {
return (
@ -58,7 +62,18 @@ export const useRenderLayout = () => {
style="transition: all var(--transition-time-02);"
></Logo>
) : undefined}
<Menu class={[{ '!h-[calc(100%-var(--logo-height))]': logo.value }]}></Menu>
{/* {search.value && !appStore.getCollapse? (<div class={[
prefixCls,
'h-[var(--top-tool-height)] relative px-[var(--top-tool-p-x)] flex items-center justify-between'
]}> <RouterSearch class={[
'bg-[var(--left-menu-bg-color)] relative',
{
'!pl-0': mobile.value && collapse.value,
'w-[var(--left-menu-min-width)]': appStore.getCollapse,
'w-[var(--left-menu-max-width)]': !appStore.getCollapse
}
]} isModal={false} /> </div>) : undefined} */}
<Menu class={[{ '!h-[calc(100% - 50px - var(--logo-height)))]': logo.value }]}></Menu>
</div>
<div
class={[

Loading…
Cancel
Save