代码优化

components.d.ts

@@ -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']

src/router/index.ts

@@ -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',

src/views/user/index.vue

@@ -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;

src/views/user/lessor/tag-manage/index.vue

@@ -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>