From c319692a07b5b6208c8401846fd20846a3dd2bd1 Mon Sep 17 00:00:00 2001
From: BianLzhaoMin <11485688+bianliangzhaomin123@user.noreply.gitee.com>
Date: Fri, 29 Nov 2024 13:30:02 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BB=A3=E7=A0=81=E6=9C=89=E5=93=88?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 components.d.ts                               |   8 +-
 src/components/uploadComponentNew/index.vue   |  19 ++-
 src/store/user.ts                             |   4 +-
 .../cart/components/date-picker-button.vue    | 120 ++++++++++++++++++
 src/views/cart/index.vue                      |  78 +++++++++---
 src/views/user/sourcingNeed/index.vue         |  65 ++++++++--
 6 files changed, 259 insertions(+), 35 deletions(-)
 create mode 100644 src/views/cart/components/date-picker-button.vue

diff --git a/components.d.ts b/components.d.ts
index 9a5a2ad..e740531 100644
--- a/components.d.ts
+++ b/components.d.ts
@@ -17,11 +17,12 @@ declare module 'vue' {
     ElCheckbox: typeof import('element-plus/es')['ElCheckbox']
     ElCol: typeof import('element-plus/es')['ElCol']
     ElConfigProvider: typeof import('element-plus/es')['ElConfigProvider']
+    ElCountdown: typeof import('element-plus/es')['ElCountdown']
     ElDatePicker: typeof import('element-plus/es')['ElDatePicker']
     ElDialog: typeof import('element-plus/es')['ElDialog']
+    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']
@@ -31,11 +32,12 @@ declare module 'vue' {
     ElOption: typeof import('element-plus/es')['ElOption']
     ElPagination: typeof import('element-plus/es')['ElPagination']
     ElPopconfirm: typeof import('element-plus/es')['ElPopconfirm']
+    ElPopover: typeof import('element-plus/es')['ElPopover']
     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']
     ElTable: typeof import('element-plus/es')['ElTable']
     ElTableColumn: typeof import('element-plus/es')['ElTableColumn']
     ElTag: typeof import('element-plus/es')['ElTag']
diff --git a/src/components/uploadComponentNew/index.vue b/src/components/uploadComponentNew/index.vue
index ec80c72..89f8ae6 100644
--- a/src/components/uploadComponentNew/index.vue
+++ b/src/components/uploadComponentNew/index.vue
@@ -10,9 +10,7 @@
             :on-error="errorUpload"
             :accept="props.acceptTypeList.join(',')"
             :before-upload="beforeUpload"
-            :multiple="props.multiple"
-            :limit="props.maxLimit"
-            :on-exceed="handleExceed"
+            :multiple="false"
             :file-list="fileListNew"
             :disabled="props.disabledFlag"
             :on-change="changeFileFn"
@@ -92,6 +90,11 @@ const props = defineProps({
         type: Number || String,
         default: 1,
     },
+    minLimit: {
+        // 最大上传个数限制
+        type: Number || String,
+        default: 1,
+    },
     maxSize: {
         // 文件上传的最大体积 M
         type: Number || String,
@@ -200,6 +203,8 @@ const errorUpload = (res: any) => {
 }
 const beforeUpload = (file: any) => {
     console.log('file', file)
+
+    console.log(props.minLimit, '个数---')
     const { name = '', size } = file
     if (size > props.maxSize * 1024 * 1000) {
         ElMessage({
@@ -208,6 +213,14 @@ const beforeUpload = (file: any) => {
         })
         return false
     }
+
+    if (fileListNew.value.length + props.minLimit >= 4) {
+        ElMessage({
+            type: 'warning',
+            message: `最多只能上传${props.maxLimit}个文件`,
+        })
+        return false
+    }
     let names = name.split('.')
     let currentName = names[names.length - 1]
     console.log('acceptTypeListacceptTypeList', props.acceptTypeList, currentName)
diff --git a/src/store/user.ts b/src/store/user.ts
index 74287e4..88dc173 100644
--- a/src/store/user.ts
+++ b/src/store/user.ts
@@ -144,14 +144,14 @@ export const useStore = defineStore('myUser', {
         editUserMenuList(type: number) {
             const leaseList: any = [
                 { title: '订单管理', name: 'orderManagementCz' },
-                { title: '商品管理', name: 'goodsManagement' },
+                { title: '装备管理', name: 'goodsManagement' },
                 { title: '商品上下架', name: 'goodsUpdown' },
                 // { title: '机手管理', name: 'operatorManagement' },
                 // { title: '寻源竞价', name: 'sourcingBidding' },
                 // { title: '专区管理', name: 'zoneManag' },
             ]
             const lesseeList: any = [
-                { title: '寻源需求', name: 'sourcingNeed' },
+                { title: '需求管理', name: 'sourcingNeed' },
                 { title: '订单管理', name: 'orderManagement' },
             ]
             this.leaseAndLesseeUserList = []
diff --git a/src/views/cart/components/date-picker-button.vue b/src/views/cart/components/date-picker-button.vue
new file mode 100644
index 0000000..b71493b
--- /dev/null
+++ b/src/views/cart/components/date-picker-button.vue
@@ -0,0 +1,120 @@
+<template>
+    <div class="custom-date-picker">
+        <el-button @click="showPicker = !showPicker" :size="size" class="date-picker-button">
+            {{ displayDate }}
+        </el-button>
+        <el-date-picker
+            v-model="selectedDate"
+            :type="pickerType"
+            :placeholder="placeholder"
+            :format="format"
+            :value-format="valueFormat"
+            :style="{ visibility: 'hidden' }"
+            @change="handleDateChange"
+            style="margin-top: -100px"
+            ref="datePicker"
+        />
+    </div>
+</template>
+
+<script setup>
+import { ref, computed, watch, nextTick } from 'vue'
+import { ElDatePicker, ElButton } from 'element-plus'
+
+const props = defineProps({
+    modelValue: {
+        type: [Date, String, Array],
+        default: [],
+    },
+    type: {
+        type: String,
+        default: 'primary',
+    },
+    size: {
+        type: String,
+        default: 'small',
+    },
+    pickerType: {
+        type: String,
+        default: 'daterange',
+    },
+    placeholder: {
+        type: String,
+        default: '选择日期',
+    },
+    format: {
+        type: String,
+        default: 'YYYY-MM-DD',
+    },
+    valueFormat: {
+        type: String,
+        default: 'YYYY-MM-DD',
+    },
+    companyIndex: {
+        type: Number,
+        default: 0,
+    },
+    goodsIndex: {
+        type: Number,
+        default: 0,
+    },
+})
+
+const emit = defineEmits(['update:modelValue', 'onLeaseDateChange'])
+
+const selectedDate = ref(props.modelValue)
+const showPicker = ref(false)
+const datePicker = ref(null)
+
+const displayDate = computed(() => {
+    return selectedDate.value ? '修改租期' : '请选择租期'
+})
+
+const handleDateChange = (value) => {
+    emit('update:modelValue', value, props.companyIndex, props.goodsIndex)
+    emit('onLeaseDateChange', value, props.companyIndex, props.goodsIndex)
+    showPicker.value = false
+}
+
+// const onVisibleChange = () => {
+//     console.log('关闭')
+//     showPicker.value = false
+// }
+
+watch(
+    showPicker,
+    (newValue) => {
+        if (newValue) {
+            nextTick(() => {
+                datePicker.value.handleOpen()
+            })
+        } else {
+            nextTick(() => {
+                datePicker.value.handleClose()
+            })
+        }
+    },
+    { deep: true, immediate: true },
+)
+
+watch(
+    () => props.modelValue,
+    (newValue) => {
+        selectedDate.value = newValue
+    },
+)
+</script>
+
+<style scoped>
+.custom-date-picker {
+    display: inline-block;
+}
+
+.date-picker-button {
+    /* min-width: 120px; */
+    background-color: #1abc9c;
+    color: #fff;
+    height: 30px;
+    border: none;
+}
+</style>
diff --git a/src/views/cart/index.vue b/src/views/cart/index.vue
index e85a889..42892c0 100644
--- a/src/views/cart/index.vue
+++ b/src/views/cart/index.vue
@@ -80,22 +80,37 @@
                     />
                     <div class="goods-code">
                         <div style="font-size: 14px; font-weight: bold">{{ goods.deviceName }}</div>
-                        <div>装备编号： {{ goods.code }}</div>
-                        <div>装备型号： {{ goods.typeName }}</div>
+
+                        <!-- <div>装备编号： {{ goods.code }}</div>
+                        <div>装备型号： {{ goods.typeName }}</div> -->
                     </div>
                 </el-col>
                 <el-col :span="4">
                     <div class="lease-date">
-                        <div v-if="goods.rentBeginTime && goods.rentEndTime">
-                            {{ goods.rentBeginTime }}-{{ goods.rentEndTime }}
+                        <div style="margin-bottom: 8px">
+                            {{ goods.rentBeginTime }}
+                            <span v-if="goods.rentBeginTime && goods.rentEndTime">-</span>
+                            {{ goods.rentEndTime }}
                         </div>
-                        <el-date-picker
+
+                        <!-- <el-date-picker
                             style="width: 100px; margin-top: 10px"
                             v-model="goods.lease_date"
                             type="daterange"
                             size="small"
                             value-format="YYYY-MM-DD"
                             @change="onLeaseDateChange($event, goods)"
+                        >
+                        </el-date-picker> -->
+
+                        <CustomDatePickerButton
+                            :modelValue="goods.lease_date"
+                            :companyIndex="index"
+                            :goodsIndex="j"
+                            type="primary"
+                            size="large"
+                            placeholder="选择日期"
+                            @onLeaseDateChange="onLeaseDateChange"
                         />
                     </div>
                 </el-col>
@@ -211,12 +226,11 @@ import {
 } from '../../http/api/cart/index'
 import moment, { max } from 'moment'
 import { InfoFilled } from '@element-plus/icons-vue'
+import CustomDatePickerButton from './components/date-picker-button.vue'
 
 const protocolChecked = ref<boolean>(false)
 const allKey = ref(0)
-
 const cardList = ref<any>([])
-
 const getBookCarDetailsData = async () => {
     const res: any = await getBookCarDetailsApi()
 
@@ -231,6 +245,7 @@ const getBookCarDetailsData = async () => {
             j.costs = 0
             j.rentBeginTime = ''
             j.rentEndTime = ''
+            j.lease_date = null
         })
     })
 
@@ -243,16 +258,30 @@ onMounted(() => {
 })
 
 // 日期change事件
-const onLeaseDateChange = (e: any, item: any) => {
-    console.log(e, '*****')
-    if (!e) {
-        item.rentBeginTime = ''
-        item.rentEndTime = ''
-        item.days = 0
+// const onLeaseDateChange = (e: any, item: any) => {
+//     console.log(e, '*****')
+//     if (!e) {
+//         item.rentBeginTime = ''
+//         item.rentEndTime = ''
+//         item.days = 0
+//     } else {
+//         item.rentBeginTime = e[0]
+//         item.rentEndTime = e[1]
+//         item.days = moment(e[1]).diff(e[0], 'day')
+//     }
+// }
+const onLeaseDateChange = (value: any, companyIndex: number, goodsIndex: number) => {
+    if (!value) {
+        cardList.value[companyIndex].devInfoVoList[goodsIndex].rentBeginTime = ''
+        cardList.value[companyIndex].devInfoVoList[goodsIndex].rentEndTime = ''
+        cardList.value[companyIndex].devInfoVoList[goodsIndex].days = 0
     } else {
-        item.rentBeginTime = e[0]
-        item.rentEndTime = e[1]
-        item.days = moment(e[1]).diff(e[0], 'day')
+        cardList.value[companyIndex].devInfoVoList[goodsIndex].rentBeginTime = value[0]
+        cardList.value[companyIndex].devInfoVoList[goodsIndex].rentEndTime = value[1]
+        cardList.value[companyIndex].devInfoVoList[goodsIndex].days = moment(value[1]).diff(
+            value[0],
+            'day',
+        )
     }
 }
 
@@ -366,6 +395,23 @@ const onCartSubmit = async () => {
         return
     }
 
+    let isDays = false
+    try {
+        amountDeviceList.value.forEach((e: any) => {
+            if (e.days < 1) {
+                ElMessage({
+                    showClose: false,
+                    message: '有装备租期未选择或租期为0，请重新选择后再提交',
+                    type: 'error',
+                })
+                isDays = true
+                throw new Error()
+            }
+        })
+    } catch (error) {}
+
+    if (isDays) return
+
     // 组装参数
     const detailsList = amountDeviceList.value.map((e: any) => {
         return {
diff --git a/src/views/user/sourcingNeed/index.vue b/src/views/user/sourcingNeed/index.vue
index 7dc9109..83afd7b 100644
--- a/src/views/user/sourcingNeed/index.vue
+++ b/src/views/user/sourcingNeed/index.vue
@@ -295,18 +295,25 @@
             <el-row :gutter="20">
                 <el-col :span="24">
                     <el-form-item label="参考图片/样式">
-                        <!-- <div class="img-list">
+                        <div class="img-list" v-if="addOrEditForm.fileInfoList.length > 0">
                             <div
-                                v-for="item in addOrEditForm.fileInfoList || []"
+                                v-for="(item, index) in addOrEditForm.fileInfoList"
                                 :key="item.id"
                                 class="img-items"
                             >
                                 <img :src="item.fileUrl" alt="" />
+
+                                <div class="mask-img">
+                                    <el-icon class="delete-icon" @click="onDeleteImg(index)"
+                                        ><DeleteFilled
+                                    /></el-icon>
+                                </div>
                             </div>
-                        </div> -->
+                        </div>
                         <UploadComponentNew
                             :maxSize="2"
-                            :maxLimit="4"
+                            :minLimit="minLimit"
+                            :max-limit="4"
                             width="120px"
                             height="120px"
                             :autoUpload="true"
@@ -373,6 +380,8 @@ const total = ref(0)
 const endTime = ref([])
 const releaseTime = ref([])
 const dialogTitle = ref('新增')
+const fileListTemp = ref<any>([])
+
 const searchParams = reactive({
     leaseName: '',
     leaseCode: '',
@@ -410,7 +419,7 @@ const addOrEditFormTemp = ref<any>({
     endTime: '',
     description: '',
     isSubmit: '',
-    fileInfoList: [],
+    fileInfoList: fileListTemp ? fileListTemp : [],
 })
 
 const addOrEditFormRules = reactive({
@@ -438,10 +447,6 @@ const disabledDate = (date: any) => {
     return date.getTime() < today.getTime()
 }
 
-const successResultCallBackFnDevicePic = (list: any) => {
-    console.log(99999, list)
-}
-
 const getClassAndCompanyData = async () => {
     const classResult: any = await getGoodsClassListApi()
     const companyResult: any = await getCompanyListApi()
@@ -521,7 +526,7 @@ const onRepublish = async (id: any, type: any) => {
         description,
         typeIds,
         id,
-        fileInfoList,
+        fileInfoList: fileInfoList ? fileInfoList : [],
     })
 
     addOrEditForm.value.typeIds = addOrEditForm.value.typeIds.map((e: any) => {
@@ -538,6 +543,8 @@ const onSubmit = (type: boolean) => {
             addOrEditForm.value.isSubmit = type
             addOrEditForm.value.typeId =
                 addOrEditForm.value.typeIds[addOrEditForm.value.typeIds.length - 1]
+
+            addOrEditForm.value.fileInfoList.push(...fileListTemp.value)
             const SUBMIT_API = isRepublish.value ? addLeaseInfoApi : editLeaseInfoApi
             const res: any = await SUBMIT_API(addOrEditForm.value)
             if (res.code === 200) {
@@ -555,12 +562,15 @@ const onSubmit = (type: boolean) => {
 
 // 自定义事件
 const onFileChange = (fileList: any) => {
-    addOrEditForm.value.fileInfoList = fileList.map((e: any) => {
+    fileListTemp.value = []
+    fileListTemp.value = fileList.map((e: any) => {
         return {
             fileName: e.name,
             fileUrl: e.url,
         }
     })
+
+    // addOrEditForm.value.fileInfoList.push(...fileListTemp.value)
 }
 
 // 取消按钮
@@ -570,7 +580,15 @@ const onCancel = () => {
 const onClose = () => {
     addOrEditFormRef.value.resetFields()
     addOrEditForm.value = JSON.parse(JSON.stringify(addOrEditFormTemp.value))
+    fileListTemp.value = []
 }
+const onDeleteImg = (index: any) => {
+    addOrEditForm.value.fileInfoList.splice(index, 1)
+}
+
+const minLimit = computed(() => {
+    return addOrEditForm.value.fileInfoList.length
+})
 
 onMounted(() => {
     getClassAndCompanyData()
@@ -602,11 +620,36 @@ onMounted(() => {
         width: 120px;
         height: 120px;
         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;
     }
 }
 </style>