代码优化

This commit is contained in:
BianLzhaoMin 2024-12-11 09:55:14 +08:00
parent 794720124d
commit 0f04e449aa
4 changed files with 475 additions and 93 deletions

9
components.d.ts vendored
View File

@ -9,6 +9,8 @@ declare module 'vue' {
export interface GlobalComponents {
Breadcrumb: typeof import('./src/components/Breadcrumb/index.vue')['default']
ElBadge: typeof import('element-plus/es')['ElBadge']
ElBreadcrumb: typeof import('element-plus/es')['ElBreadcrumb']
ElBreadcrumbItem: typeof import('element-plus/es')['ElBreadcrumbItem']
ElButton: typeof import('element-plus/es')['ElButton']
ElCarousel: typeof import('element-plus/es')['ElCarousel']
ElCarouselItem: typeof import('element-plus/es')['ElCarouselItem']
@ -22,6 +24,7 @@ declare module 'vue' {
ElEmpty: typeof import('element-plus/es')['ElEmpty']
ElForm: typeof import('element-plus/es')['ElForm']
ElFormItem: typeof import('element-plus/es')['ElFormItem']
ElHeader: typeof import('element-plus/es')['ElHeader']
ElIcon: typeof import('element-plus/es')['ElIcon']
ElImage: typeof import('element-plus/es')['ElImage']
ElInput: typeof import('element-plus/es')['ElInput']
@ -29,11 +32,17 @@ declare module 'vue' {
ElMenu: typeof import('element-plus/es')['ElMenu']
ElMenuItem: typeof import('element-plus/es')['ElMenuItem']
ElOption: typeof import('element-plus/es')['ElOption']
ElPageHeader: typeof import('element-plus/es')['ElPageHeader']
ElPagination: typeof import('element-plus/es')['ElPagination']
ElPopconfirm: typeof import('element-plus/es')['ElPopconfirm']
ElProgress: typeof import('element-plus/es')['ElProgress']
ElRadioButton: typeof import('element-plus/es')['ElRadioButton']
ElRadioGroup: typeof import('element-plus/es')['ElRadioGroup']
ElRow: typeof import('element-plus/es')['ElRow']
ElSelect: typeof import('element-plus/es')['ElSelect']
ElStep: typeof import('element-plus/es')['ElStep']
ElSteps: typeof import('element-plus/es')['ElSteps']
ElSwitch: typeof import('element-plus/es')['ElSwitch']
ElTable: typeof import('element-plus/es')['ElTable']
ElTableColumn: typeof import('element-plus/es')['ElTableColumn']
ElTag: typeof import('element-plus/es')['ElTag']

View File

@ -291,6 +291,17 @@ const routes: Array<RouteRecordRaw> = [
isLogin: true
},
},
{
path: '/tag-manage',
name: 'tag-manage',
component: () => import('views/user/lessor/tag-manage/index.vue'),
meta: {
title: '标签',
keepAlive: true,
AuthFlag: false,
isLogin: true
},
},
{
path: '/sourcingNeed',
name: 'sourcingNeed',

View File

@ -2,62 +2,21 @@
import Header from 'components/header/index.vue'
import { useRouter } from 'vue-router'
import { useStore } from '../../store/user'
import { mainStore } from '../../store/main'
import { useRoute } from 'vue-router'
const spaceTop = ref('')
const store = useStore()
const router = useRouter()
const route = useRoute()
const userInfo: any = computed(() => {
return mainStore().userInfo
})
import imgSrc from '@/assets/img/logo.png'
//
// const seekingRentClick = () => {
// store.editcurrentMenuItem('baseInfo')
// store.editCurrentMenuType(true)
// store.editcurrentMenuList([
// { title: '', name: 'baseInfo' },
// { title: '', name: 'orderManagement' },
// { title: '', name: 'subAccount' },
// { title: '', name: 'business' },
// { title: '', name: 'sourcingNeed' },
// ])
// router.push({ name: 'baseInfo' })
// }
// //
// const lesseeClick = () => {
// store.editcurrentMenuItem('orderManagementCz')
// store.editCurrentMenuType(false)
// store.editcurrentMenuList([
// { title: '', name: 'orderManagementCz' },
// { title: '', name: 'goodsManagement' },
// { title: '', name: 'goodsUpdown' },
// { title: '', name: 'operatorManagement' },
// { title: '', name: 'sourcingBidding' },
// { title: '', name: 'zoneManag' },
// ])
// router.push({ name: 'orderManagementCz' })
// }
const handleSelect = (name: any, path: any) => {
// store.editcurrentMenuItem(name)
store.editcurrentMenuItem(name)
router.push({
name,
})
}
const activeseekingRent = computed(() => {
return store.currentMenuType
})
const isType: any = computed(() => {
return localStorage.getItem('rolesType')
})
@ -70,6 +29,7 @@ const allList = [
{ title: '结算管理', name: 'settlement-manage', permission: ['1'] },
{ title: '质检管理', name: 'quality-manage', permission: ['1'] },
{ title: '安全证书管理', name: 'security-certificate', permission: ['1'] },
{ title: '标签管理', name: 'tag-manage', permission: ['1'] },
{ title: '需求管理', name: 'sourcingNeed', permission: ['2'] },
{ title: '订单管理', name: 'orderManagement', permission: ['2'] },
{ title: '合同管理', name: 'contract-manage', permission: ['1'] },
@ -84,34 +44,6 @@ const activeItem = computed(() => {
router.push({
name: activeItem.value,
})
onMounted(() => {
console.log(route, '**********************')
})
// const activeMenuItem = computed(() => {
// return store.leaseAndLesseeUserList[0].name
// })
// watch(route, (newVlaue) => {
// if (newVlaue.path.indexOf('myuser') === -1) {
// store.editcurrentMenuItem('baseInfo')
// store.editCurrentMenuType(true)
// store.editcurrentMenuList([
// // { title: '', name: 'baseInfo' },
// { title: '', name: 'orderManagement' },
// // { title: '', name: 'subAccount' },
// // { title: '', name: 'business' },
// ])
// }
// })
// onMounted(() => {
// let divElement: any = document.getElementById('user-container')
// let rect = divElement.getBoundingClientRect()
// let top = rect.top + 20 + 'px'
// spaceTop.value = top
// })
</script>
<template>
@ -126,26 +58,6 @@ onMounted(() => {
fit="contain"
/>
</div>
<!-- <div class="pic-box">
<img v-if="userInfo.logoUrl" :src="userInfo.logoUrl" alt="" />
<img
v-else
src="https://zlpt-1259760603.cos.ap-nanjing.myqcloud.com/2023/12/09/815629f192564db98ac55a643b46f853gouwu.png"
alt=""
/>
<span>{{ userInfo.phonenumber || '' }}</span>
</div>
<div class="btn-box">
<span @click="seekingRentClick">
<a :class="activeseekingRent ? 'active' : ''">承租</a>
</span>
<span @click="lesseeClick">
<a :class="!activeseekingRent ? 'active' : ''">出租</a>
</span>
</div> -->
<el-menu
class="el-menu-vertical-demo"
@select="handleSelect"
@ -166,7 +78,6 @@ onMounted(() => {
<style lang="scss">
.app-container {
// background-color: #fff;
display: flex;
height: calc((100vh - 37px));
width: 100%;
@ -174,11 +85,8 @@ onMounted(() => {
.left-menu {
width: 260px;
background-color: #f7f9fa;
// border-radius: 5px;
// margin-right: 15px;
.logo-title {
// background-color: #1ea193;
cursor: pointer;
text-align: center;
padding: 15px;

View File

@ -0,0 +1,454 @@
<template>
<!-- 标签管理 -->
<div class="app-container-content">
<el-form
:inline="true"
size="default"
label-width="0"
ref="searchFormRef"
:model="searchParams"
>
<el-row>
<el-col :span="6">
<el-form-item prop="code">
<el-input
clearable
style="width: 100%"
placeholder="请输入装备编码"
v-model.trim="searchParams.code"
/>
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item prop="code">
<el-input
clearable
style="width: 100%"
placeholder="请输入装备名称"
v-model.trim="searchParams.code"
/>
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item prop="code">
<el-input
clearable
style="width: 100%"
placeholder="请输入上传人"
v-model.trim="searchParams.code"
/>
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item prop="code">
<el-input
clearable
style="width: 100%"
placeholder="请输入归属公司"
v-model.trim="searchParams.code"
/>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="6">
<el-form-item>
<el-date-picker
v-model="createTime"
type="daterange"
style="width: 100%"
range-separator="-"
value-format="YYYY-MM-DD"
start-placeholder="上传开始日期"
end-placeholder="上传结束日期"
/>
</el-form-item>
</el-col>
</el-row>
</el-form>
<!-- 表格 -->
<el-table
border
:data="qualityLis"
show-overflow-tooltip
:header-cell-style="{
color: '#fff',
background: '#00a288',
}"
>
<el-table-column align="center" label="序号" type="index" width="80" />
<el-table-column align="center" prop="deviceCode" label="装备编号" />
<el-table-column align="center" prop="deviceName" label="装备名称" />
<el-table-column align="center" prop="nickName" label="上传人" width="120" />
<el-table-column align="center" prop="createTime" label="归属公司" />
<el-table-column align="center" prop="updateTime" label="装备数量" />
<el-table-column align="center" prop="updateTime" label="上传时间" />
<el-table-column align="center" label="二维码标签" :width="220">
<template #default="{ row }">
<el-button
size="small"
type="primary"
class="primary-lease"
@click="onViewQualityRecord(row)"
>
查看
</el-button>
<el-popconfirm
width="220"
:icon="InfoFilled"
icon-color="#626AEF"
title="确定删除该项需求吗?"
@confirm="onDelete(row.maId)"
>
<template #reference>
<el-button size="small" type="danger"> 删除 </el-button>
</template>
<template #actions="{ confirm }">
<el-button type="primary" class="primary-lease" size="small"
>取消</el-button
>
<el-button
class="primary-lease"
type="primary"
size="small"
@click="confirm()"
>
确定
</el-button>
</template>
</el-popconfirm>
</template>
</el-table-column>
</el-table>
<PagingComponent
:total="total"
:size="searchParams.pageSize"
:page="searchParams.pageNum"
@getListChange="getLeaseListData"
v-model:page-num="searchParams.pageNum"
v-model:page-size="searchParams.pageSize"
/>
<!-- 新增修改对话框 -->
<el-dialog
width="40%"
align-center
@close="onClose"
destroy-on-close
:title="dialogTitle"
v-model="addOrEditDialogVisible"
>
<el-form
label-width="auto"
label-position="right"
ref="addOrEditFormRef"
:model="addOrEditForm"
:rules="addOrEditFormRules"
>
<el-row :gutter="20">
<el-col :span="24">
<el-form-item label="关联装备" style="width: 100%" prop="maId">
<el-select
clearable
style="width: 100%"
placeholder="请选择关联装备"
v-model="addOrEditForm.maId"
@change="onMaIdChange"
:disabled="dialogTitle != '证书新增'"
>
<el-option
:key="item.maId"
:value="item.maId * 1"
:label="item.deviceName"
v-for="item in associationList"
/>
</el-select>
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="20">
<el-col :span="24">
<el-form-item label="1" style="margin-bottom: 0" class="upload-tip">
支持格式.jpg.png 单个文件大小不能超过2M最多可上传1张
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="20">
<el-col :span="24">
<el-form-item label="安全证书附件" prop="fileInfoList">
<div style="flex: 1">
<UploadComponentNew
:maxSize="2"
:max-limit="1"
width="100%"
height="100%"
:multiple="true"
:autoUpload="true"
:minLimit="addOrEditForm.fileInfoList.length"
:actionUrl="uploadUrl"
listType="text"
:justifyContent="`flex-start`"
@onFileChange="onFileChange"
:acceptTypeList="['.jpg', '.png', '.pdf', '.doc']"
>
<template v-slot:default>
<!-- <el-icon size="48" color="#aaa"><Plus /></el-icon> -->
<el-button
:icon="UploadFilled"
type="primary"
class="primary-lease"
>上传文件</el-button
>
</template>
</UploadComponentNew>
</div>
</el-form-item>
</el-col>
</el-row>
</el-form>
<template #footer>
<div class="dialog-footer">
<el-button type="primary" class="primary-lease" @click="onCancel"
>取消</el-button
>
<el-button class="primary-lease" type="primary" @click="onSubmit()">
提交
</el-button>
</div>
</template>
</el-dialog>
</div>
</template>
<script setup lang="ts">
import PagingComponent from 'components/PagingComponent/index.vue'
import UploadComponentNew from 'components/uploadComponentNew/index.vue'
import {
addSafeBookApi,
getSafeBookByMaIdListApi,
editSafeBookApi,
delSafeBookByIdApi,
getAssociationListApi,
} from 'http/api/security-certificate'
import { InfoFilled, UploadFilled } from '@element-plus/icons-vue'
import { ElMessage } from 'element-plus'
const total = ref(0)
const createTime = ref([])
const qualityLis = ref<any>([])
const dialogTitle = ref('')
const searchFormRef = ref<any>(null)
const addOrEditFormRef = ref<any>(null)
const addOrEditDialogVisible = ref(false)
const associationList = ref<any>([])
const uploadUrl = import.meta.env.VITE_API_URL + '/file/upload'
const searchParams = reactive({
code: '',
startTime: '',
endTime: '',
pageSize: 10,
pageNum: 1,
})
const addOrEditForm = ref<any>({
maId: '',
fileInfoList: [],
fileInfoTempList: [],
})
const addOrEditFormRules = reactive({
maId: [{ required: true, message: '请选择关联装备', trigger: 'change' }],
fileInfoList: [{ required: true, message: '请上传证书附件', trigger: 'blur' }],
})
//
const getLeaseListData = async () => {
if (createTime.value.length > 0) {
searchParams.startTime = createTime.value[0]
searchParams.endTime = createTime.value[1]
}
const { data: res }: any = await getSafeBookByMaIdListApi(searchParams)
qualityLis.value = res.rows
total.value = res.total
}
//
const getAssociationListData = async () => {
const res: any = await getAssociationListApi()
associationList.value = res.data
}
const onMaIdChange = (id: any) => {
ElMessage.closeAll()
try {
associationList.value.forEach((e: any) => {
if (e.maId == id && e.isSafeBook === 1) {
ElMessage({
type: 'warning',
message: '当前装备证书已上传,不可重复选择!',
})
addOrEditForm.value.maId = ''
throw new Error()
}
})
} catch (error) {}
}
//
const onReset = () => {
createTime.value = []
searchParams.startTime = ''
searchParams.endTime = ''
searchParams.pageNum = 1
searchParams.pageSize = 10
searchFormRef.value.resetFields()
getLeaseListData()
}
//
const onDelete = async (maId: any) => {
const res: any = await delSafeBookByIdApi({ maId })
if (res.code === 200) {
ElMessage({
type: 'success',
message: '删除成功',
})
getLeaseListData()
}
}
//
const onSubmit = () => {
addOrEditForm.value.fileInfoList = addOrEditForm.value.fileInfoTempList
addOrEditFormRef.value.validate(async (valid: any) => {
if (valid) {
const SEN_API = dialogTitle.value === '证书修改' ? editSafeBookApi : addSafeBookApi
const res: any = await SEN_API(addOrEditForm.value)
if (res.code === 200) {
ElMessage({
type: 'success',
message: '提交成功',
})
addOrEditDialogVisible.value = false
getLeaseListData()
}
}
})
}
//
const onViewQualityRecord = (row: any) => {
addOrEditForm.value.maId = row.maId
dialogTitle.value = '证书修改'
addOrEditDialogVisible.value = true
}
//
const onFileChange = (fileList: any) => {
addOrEditForm.value.fileInfoTempList = []
const fileListTemp = fileList.map((e: any) => {
return {
fileName: e.name,
fileUrl: e.url,
}
})
addOrEditForm.value.fileInfoTempList.push(...fileListTemp)
}
//
const onCancel = () => {
addOrEditDialogVisible.value = false
}
const onClose = () => {
addOrEditFormRef.value.resetFields()
addOrEditForm.value.fileInfoTempList = []
addOrEditForm.value.fileInfoList = []
addOrEditForm.value.maId = ''
}
onMounted(() => {
getLeaseListData()
getAssociationListData()
})
</script>
<style lang="scss" scoped>
:deep.upload-tip .el-form-item__label {
color: transparent;
}
.el-pagination {
justify-content: flex-end;
padding: 5px 0;
}
:deep.el-pagination.is-background .el-pager li.is-active {
background-color: #3cb4a6;
}
:deep.el-form--inline .el-form-item {
margin-right: 6px;
width: 95%;
}
.img-list {
display: flex;
align-items: center;
.img-items {
width: 100px;
height: 100px;
margin-right: 8px;
position: relative;
img {
width: 100%;
height: 100%;
}
.mask-img {
visibility: hidden;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #000;
opacity: 0.5;
display: flex;
align-items: center;
justify-content: center;
.delete-icon {
font-size: 20px;
cursor: pointer;
z-index: 9;
color: #fff;
}
}
}
.img-items:hover .mask-img {
visibility: visible;
}
}
.app-container-content {
:deep(.el-dialog) {
display: flex !important;
flex-direction: column !important;
margin: 0 !important;
position: absolute !important;
top: 50% !important;
left: 50% !important;
transform: translate(-50%, -50%) !important;
max-height: 100vh !important;
.el-dialog__body {
flex: 1;
overflow-y: scroll !important;
}
.dialog-content {
padding: 20px;
}
}
}
</style>