From a9c350b960e399aaad03d2ff852f20ad0a2ef18f Mon Sep 17 00:00:00 2001
From: BianLzhaoMin <11485688+bianliangzhaomin123@user.noreply.gitee.com>
Date: Wed, 4 Dec 2024 18:00:17 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BB=A3=E7=A0=81=E8=B0=83=E8=AF=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 components.d.ts                               |   1 +
 src/components/TitleTip/index.vue             |  35 +++
 .../user/lessor/rent-termination/index.vue    | 147 ++++++---
 src/views/user/sourcingNeed/index.vue         | 285 +++++++++++++++---
 4 files changed, 391 insertions(+), 77 deletions(-)
 create mode 100644 src/components/TitleTip/index.vue

diff --git a/components.d.ts b/components.d.ts
index f818db3..db94f87 100644
--- a/components.d.ts
+++ b/components.d.ts
@@ -58,6 +58,7 @@ declare module 'vue' {
     RouterLink: typeof import('vue-router')['RouterLink']
     RouterView: typeof import('vue-router')['RouterView']
     TableComponent: typeof import('./src/components/TableComponent/index.vue')['default']
+    TitleTip: typeof import('./src/components/TitleTip/index.vue')['default']
     UploadComponent: typeof import('./src/components/uploadComponent/index.vue')['default']
     UploadComponentNew: typeof import('./src/components/uploadComponentNew/index.vue')['default']
     UploadImg: typeof import('./src/components/uploadImg.vue')['default']
diff --git a/src/components/TitleTip/index.vue b/src/components/TitleTip/index.vue
new file mode 100644
index 0000000..b90bbea
--- /dev/null
+++ b/src/components/TitleTip/index.vue
@@ -0,0 +1,35 @@
+<template>
+    <div class="title-text">
+        <div></div>
+        <div>
+            {{ titleText }}
+        </div>
+    </div>
+</template>
+<script setup lang="ts">
+defineProps({
+    titleText: {
+        type: String,
+        default: () => '',
+    },
+})
+</script>
+
+<style lang="scss" scoped>
+.title-text {
+    margin-top: 20px;
+    padding: 10px 0;
+    display: flex;
+    align-items: center;
+    font-size: 14px;
+    font-weight: bold;
+    letter-spacing: 1px;
+}
+
+.title-text div:first-child {
+    width: 5px;
+    height: 20px;
+    margin-right: 8px;
+    background-color: #00a288;
+}
+</style>
diff --git a/src/views/user/lessor/rent-termination/index.vue b/src/views/user/lessor/rent-termination/index.vue
index 51779e9..13ab2f9 100644
--- a/src/views/user/lessor/rent-termination/index.vue
+++ b/src/views/user/lessor/rent-termination/index.vue
@@ -506,13 +506,107 @@ div
             </div>
         </template>
 
-        <template v-else> 检修明细 </template>
+        <template v-else>
+            <el-row
+                style="
+                    display: flex;
+                    justify-content: space-between;
+                    letter-spacing: 1px;
+                    padding: 0 10px 20px;
+                "
+            >
+                <div style="flex: 1">
+                    <span>订单编号：</span>
+                    <span>{{ overhaulDetails.code }}</span>
+                </div>
+                <div style="flex: 1">
+                    <span>装备套数：</span>
+                    <span>{{ overhaulDetails.maNumber }}</span>
+                </div>
+                <div style="flex: 1">
+                    <span>退租时间：</span>
+                    <span>{{ overhaulDetails.rentEndTime }}</span>
+                </div>
+            </el-row>
+            <el-row
+                style="
+                    display: flex;
+                    letter-spacing: 1px;
+                    justify-content: space-between;
+                    padding: 0 10px 20px;
+                "
+            >
+                <div style="flex: 1">
+                    <span>结算单位：</span>
+                    <span>{{ overhaulDetails.leaseCompany }}</span>
+                </div>
+                <div style="flex: 1">
+                    <span>租赁天数：</span>
+                    <span>{{ overhaulDetails.rentDay }}</span>
+                </div>
+                <div style="flex: 1; color: transparent">
+                    <span>租赁天数：</span>
+                    <span>999</span>
+                </div>
+            </el-row>
+
+            <TitleTip :titleText="`维修费用明细`" />
+            <el-table
+                :data="repairRecordList"
+                border
+                show-overflow-tooltip
+                :header-cell-style="{
+                    background: '#00a288',
+                    color: '#fff',
+                }"
+            >
+                <el-table-column prop="deviceName" align="center" label="装备名称" />
+                <el-table-column prop="typeName" align="center" label="型号" />
+                <el-table-column prop="repairNum" align="center" label="维修数量" />
+                <el-table-column prop="repairPrice" align="center" label="维修费用(元)" />
+                <el-table-column prop="" align="center" label="附件" />
+            </el-table>
+            <TitleTip :titleText="`报废费用明细`" />
+            <el-table
+                :data="scrapRecordList"
+                border
+                show-overflow-tooltip
+                :header-cell-style="{
+                    background: '#00a288',
+                    color: '#fff',
+                }"
+            >
+                <el-table-column prop="deviceName" align="center" label="装备名称" />
+                <el-table-column prop="typeName" align="center" label="型号" />
+                <el-table-column prop="scrapNum" align="center" label="报废数量" />
+                <el-table-column prop="scrapReason" align="center" label="报废原因" />
+                <el-table-column prop="scrapPrice" align="center" label="报废费用(元)" />
+                <el-table-column prop="" align="center" label="附件" />
+            </el-table>
+            <TitleTip :titleText="`丢失费用明细`" />
+            <el-table
+                :data="lossRecordList"
+                border
+                show-overflow-tooltip
+                :header-cell-style="{
+                    background: '#00a288',
+                    color: '#fff',
+                }"
+            >
+                <el-table-column prop="deviceName" align="center" label="装备名称" />
+                <el-table-column prop="typeName" align="center" label="型号" />
+                <el-table-column prop="lossNum" align="center" label="丢失数量" />
+                <el-table-column prop="lossPrice" align="center" label="丢失费用(元)" />
+                <el-table-column align="center" label="附件" />
+            </el-table>
+        </template>
     </el-dialog>
 </template>
 
 <script setup lang="ts">
 import UploadComponentNew from 'components/uploadComponentNew/index.vue'
 import PagingComponent from 'components/PagingComponent/index.vue'
+import TitleTip from 'components/TitleTip/index.vue'
 import {
     getRentTerminationListApi,
     getOrderDetailsByIdApi,
@@ -536,6 +630,10 @@ const orderDetails = ref<any>({})
 const repairSelect = ref<any>([])
 const lossSelect = ref<any>([])
 const scrapSelect = ref<any>([])
+const repairRecordList = ref([])
+const scrapRecordList = ref([])
+const lossRecordList = ref([])
+const overhaulDetails = ref<any>({})
 const props2 = {
     multiple: true,
     checkStrictly: true,
@@ -764,49 +862,14 @@ const onRepublish = async (type: any, orderId: any) => {
         scrapSelect.value = res.detailsList
         orderDetails.value.orderId = orderId
     } else {
-        const { data: res }: any = getOverhaulApi(orderId)
-        console.log(res, '检修明细')
+        const { data: res }: any = await getOverhaulApi(orderId)
+
+        repairRecordList.value = res.repairRecordList
+        scrapRecordList.value = res.scrapRecordList
+        lossRecordList.value = res.lossRecordList
+        overhaulDetails.value = res
     }
 
-    // dialogTitle.value = '编辑'
-    // isRepublish.value = false
-    // isSave.value = type
-    // const res: any = await getLeaseDetailsByIdApi({ id })
-    // const {
-    //     leaseName,
-    //     typeId,
-    //     companyId,
-    //     person,
-    //     personPhone,
-    //     leaseDay,
-    //     leaseNum,
-    //     endTime,
-    //     description,
-    //     typeIds,
-    //     fileInfoList,
-    //     areaId,
-    // } = res.data
-
-    // Object.assign(addOrEditForm.value, {
-    //     leaseName,
-    //     typeId,
-    //     companyId,
-    //     person,
-    //     personPhone,
-    //     leaseDay,
-    //     leaseNum,
-    //     endTime,
-    //     description,
-    //     typeIds,
-    //     id,
-    //     fileInfoList: fileInfoList ? fileInfoList : [],
-    //     areaId,
-    // })
-
-    // addOrEditForm.value.typeIds = addOrEditForm.value.typeIds.map((e: any) => {
-    //     return (e *= 1)
-    // })
-
     addOrEditDialogVisible.value = true
 }
 
diff --git a/src/views/user/sourcingNeed/index.vue b/src/views/user/sourcingNeed/index.vue
index 711438d..cc235fa 100644
--- a/src/views/user/sourcingNeed/index.vue
+++ b/src/views/user/sourcingNeed/index.vue
@@ -201,7 +201,7 @@
                     </el-form-item>
                 </el-col>
             </el-row>
-            <el-row :gutter="20">
+            <!-- <el-row :gutter="20">
                 <el-col :span="12">
                     <el-form-item label="装备类目" prop="typeIds">
                         <el-cascader
@@ -237,6 +237,75 @@
                         </el-select>
                     </el-form-item>
                 </el-col>
+            </el-row> -->
+            <el-row :gutter="20">
+                <el-col :span="24">
+                    <el-form-item label="项目所在地" style="width: 100%" prop="areaId">
+                        <el-row :span="24">
+                            <el-col :span="6">
+                                <el-form-item prop="areaId">
+                                    <el-select
+                                        clearable
+                                        style="width: 95%"
+                                        placeholder="请选择项目所在省"
+                                        v-model="addOrEditForm.areaId"
+                                    >
+                                        <el-option
+                                            :key="item.areaId"
+                                            :value="item.areaId"
+                                            :label="item.areaName"
+                                            v-for="item in areaList"
+                                        />
+                                    </el-select>
+                                </el-form-item>
+                            </el-col>
+                            <el-col :span="6">
+                                <el-form-item prop="areaId">
+                                    <el-select
+                                        clearable
+                                        style="width: 95%"
+                                        placeholder="请选择项目所在市"
+                                        v-model="addOrEditForm.areaId"
+                                    >
+                                        <el-option
+                                            :key="item.areaId"
+                                            :value="item.areaId"
+                                            :label="item.areaName"
+                                            v-for="item in areaList"
+                                        />
+                                    </el-select>
+                                </el-form-item>
+                            </el-col>
+                            <el-col :span="6">
+                                <el-form-item prop="areaId">
+                                    <el-select
+                                        clearable
+                                        style="width: 95%"
+                                        placeholder="请选择项所在县"
+                                        v-model="addOrEditForm.areaId"
+                                    >
+                                        <el-option
+                                            :key="item.areaId"
+                                            :value="item.areaId"
+                                            :label="item.areaName"
+                                            v-for="item in areaList"
+                                        />
+                                    </el-select>
+                                </el-form-item>
+                            </el-col>
+                            <el-col :span="6">
+                                <el-form-item prop="areaId">
+                                    <el-input
+                                        style="width: 100%"
+                                        clearable
+                                        placeholder="请输入详细地址"
+                                        v-model="addOrEditForm.areaId"
+                                    />
+                                </el-form-item>
+                            </el-col>
+                        </el-row>
+                    </el-form-item>
+                </el-col>
             </el-row>
             <el-row :gutter="20">
                 <el-col :span="12">
@@ -271,20 +340,6 @@
                         />
                     </el-form-item>
                 </el-col>
-                <el-col :span="12">
-                    <el-form-item label="预估数量" prop="leaseNum">
-                        <el-input-number
-                            clearable
-                            :min="1"
-                            :max="9999"
-                            style="width: 100%"
-                            placeholder="请输入预估数量"
-                            v-model="addOrEditForm.leaseNum"
-                        />
-                    </el-form-item>
-                </el-col>
-            </el-row>
-            <el-row :gutter="20">
                 <el-col :span="12">
                     <el-form-item label="需求截止日期" prop="endTime">
                         <el-date-picker
@@ -298,24 +353,20 @@
                         />
                     </el-form-item>
                 </el-col>
-                <el-col :span="12">
-                    <el-form-item label="项目所在地" prop="areaId">
-                        <el-select
+                <!-- <el-col :span="12">
+                    <el-form-item label="预估数量" prop="leaseNum">
+                        <el-input-number
                             clearable
+                            :min="1"
+                            :max="9999"
                             style="width: 100%"
-                            placeholder="请选择项目所在地"
-                            v-model="addOrEditForm.areaId"
-                        >
-                            <el-option
-                                :key="item.areaId"
-                                :value="item.areaId"
-                                :label="item.areaName"
-                                v-for="item in areaList"
-                            />
-                        </el-select>
+                            placeholder="请输入预估数量"
+                            v-model="addOrEditForm.leaseNum"
+                        />
                     </el-form-item>
-                </el-col>
+                </el-col> -->
             </el-row>
+
             <el-row :gutter="20">
                 <el-col :span="24">
                     <el-form-item label="1" style="margin-bottom: 0" class="upload-tip">
@@ -325,7 +376,7 @@
             </el-row>
             <el-row :gutter="20">
                 <el-col :span="24">
-                    <el-form-item label="参考图片/样式">
+                    <el-form-item label="需求清单">
                         <div class="img-list" v-if="addOrEditForm.fileInfoList.length > 0">
                             <div
                                 v-for="(item, index) in addOrEditForm.fileInfoList"
@@ -344,8 +395,8 @@
                         <UploadComponentNew
                             :maxSize="2"
                             :max-limit="4"
-                            width="120px"
-                            height="120px"
+                            width="100px"
+                            height="100px"
                             :multiple="true"
                             :autoUpload="true"
                             :minLimit="minLimit"
@@ -370,11 +421,134 @@
                             type="textarea"
                             placeholder="请输入需求描述"
                             v-model="addOrEditForm.description"
-                            :autosize="{ minRows: 6, maxRows: 10 }"
+                            :autosize="{ minRows: 4, maxRows: 6 }"
                         />
                     </el-form-item>
                 </el-col>
             </el-row>
+
+            <el-row :gutter="20">
+                <el-col :span="24">
+                    <el-form-item label="装备需求信息" style="font-weight: bold">
+                        <el-button class="primary-lease" type="primary" @click="onAddDemandInfo">
+                            添加装备描述
+                        </el-button>
+                    </el-form-item>
+                </el-col>
+            </el-row>
+        </el-form>
+
+        <el-form
+            label-width="auto"
+            label-position="right"
+            v-for="(item, index) in addOrEditDemandFormList"
+            :key="item.newId"
+            :model="item"
+            :rules="addOrEditDemandFormRules"
+            :ref="
+                ($event:any) => {
+                    addOrEditDemandFormRefList[index] = $event
+                }
+                 "
+            style="position: relative"
+        >
+            <div
+                style="
+                    position: absolute;
+                    left: -5px;
+                    top: 0;
+                    width: 26px;
+                    height: 26px;
+                    border-radius: 13px;
+                    font-weight: bold;
+                    text-align: center;
+                    line-height: 26px;
+                    color: #fff;
+                    background-color: #00a288;
+                "
+            >
+                {{ index + 1 }}
+            </div>
+            <el-row :gutter="24">
+                <el-col :span="12">
+                    <el-form-item label="装备类目" prop="typeIds">
+                        <el-cascader
+                            clearable
+                            style="width: 100%"
+                            :options="classOptions"
+                            :show-all-levels="false"
+                            placeholder="请选择装备类目"
+                            v-model="item.typeIds"
+                            :props="{
+                                value: 'id',
+                                label: 'name',
+                                checkStrictly: true,
+                            }"
+                        />
+                    </el-form-item>
+                </el-col>
+                <el-col :span="12">
+                    <el-form-item label="预估数量" prop="leaseNum">
+                        <el-input-number
+                            clearable
+                            :min="1"
+                            :max="9999"
+                            style="width: 100%"
+                            placeholder="请输入预估数量"
+                            v-model="item.leaseNum"
+                        />
+                    </el-form-item>
+                </el-col>
+            </el-row>
+            <el-row :gutter="24">
+                <el-col :span="20">
+                    <el-form-item label="参考图片/样式">
+                        <div class="img-list" v-if="addOrEditForm.fileInfoList.length > 0">
+                            <div
+                                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>
+                        <UploadComponentNew
+                            :maxSize="2"
+                            :max-limit="4"
+                            width="100px"
+                            height="100px"
+                            :multiple="true"
+                            :autoUpload="true"
+                            :minLimit="minLimit"
+                            :actionUrl="uploadUrl"
+                            listType="picture-card"
+                            @onFileChange="onFileChange"
+                            :acceptTypeList="['.jpg', '.png']"
+                            :fileListN="addOrEditForm.fileInfoList"
+                        >
+                            <template v-slot:default>
+                                <el-icon size="48" color="#aaa"><Plus /></el-icon>
+                            </template>
+                        </UploadComponentNew>
+                    </el-form-item>
+                </el-col>
+                <el-col :span="4">
+                    <el-button
+                        size="small"
+                        type="danger"
+                        class="primary-lease"
+                        @click="onDeleteDemand(index)"
+                    >
+                        移除
+                    </el-button>
+                </el-col>
+            </el-row>
         </el-form>
         <template #footer>
             <div class="dialog-footer">
@@ -424,6 +598,8 @@ const companyOptions = ref<any>([])
 const searchFormRef = ref<any>(null)
 const addOrEditFormRef = ref<any>(null)
 const addOrEditDialogVisible = ref(false)
+const addOrEditDemandFormList = ref<any>([])
+const addOrEditDemandFormRefList = ref<any>([])
 const uploadUrl = import.meta.env.VITE_API_URL + '/file/upload'
 
 const searchParams = reactive({
@@ -471,9 +647,8 @@ const addOrEditFormTemp = ref<any>({
 const addOrEditFormRules = reactive({
     person: [{ required: true, message: '请输入联系人', trigger: 'blur' }],
     leaseDay: [{ required: true, message: '请输入预估租期', trigger: 'blur' }],
-    leaseNum: [{ required: true, message: '请输入预估数量', trigger: 'blur' }],
+
     leaseName: [{ required: true, message: '请输入需求名称', trigger: 'blur' }],
-    typeIds: [{ required: true, message: '请选择装备类目', trigger: 'change' }],
     areaId: [{ required: true, message: '请选择项目所在地', trigger: 'change' }],
     companyId: [{ required: true, message: '请选择租赁公司', trigger: 'change' }],
     fileInfoList: [{ required: true, message: '请上传参考图片', trigger: 'blur' }],
@@ -487,6 +662,10 @@ const addOrEditFormRules = reactive({
         },
     ],
 })
+const addOrEditDemandFormRules = reactive({
+    typeIds: [{ required: true, message: '请选择装备类目', trigger: 'change' }],
+    leaseNum: [{ required: true, message: '请输入预估数量', trigger: 'blur' }],
+})
 
 const disabledDate = (date: any) => {
     const today = new Date()
@@ -602,6 +781,24 @@ const onSubmit = (type: boolean) => {
             addOrEditForm.value.maStatus == 0
                 ? (addOrEditForm.value.maStatus = 1)
                 : addOrEditForm.value.maStatus
+
+            let isDemand = false
+            for (let index = 0; index < addOrEditDemandFormList.value.length; index++) {
+                try {
+                    const valid = await new Promise((resolve) => {
+                        addOrEditDemandFormRefList.value[index].validate((valid: any) => {
+                            resolve(valid)
+                        })
+                    })
+
+                    if (!valid) {
+                        isDemand = true
+                        throw new Error('表单校验失败')
+                    }
+                } catch (error) {}
+            }
+            if (isDemand) return
+
             const SUBMIT_API = isRepublish.value ? addLeaseInfoApi : editLeaseInfoApi
             const res: any = await SUBMIT_API(addOrEditForm.value)
             if (res.code === 200) {
@@ -635,6 +832,7 @@ const onCancel = () => {
     addOrEditDialogVisible.value = false
 }
 const onClose = () => {
+    addOrEditDemandFormList.value = []
     addOrEditFormRef.value.resetFields()
     addOrEditForm.value = JSON.parse(JSON.stringify(addOrEditFormTemp.value))
     fileListTemp.value = []
@@ -650,6 +848,23 @@ const minLimit = computed(() => {
 const onChangeClass = (val: any) => {
     console.log(val, '***')
 }
+const onAddDemandInfo = () => {
+    const newId = Date.now()
+    addOrEditDemandFormList.value.push({
+        newId,
+        typeIds: [],
+        leaseNum: 1,
+        fileInfoList: [],
+    })
+}
+
+const onDeleteDemand = (index: any) => {
+    addOrEditDemandFormList.value.splice(index, 1)
+    addOrEditDemandFormRefList.value.splice(index, 1)
+    addOrEditDemandFormRefList.value.forEach((e: any) => {
+        if (e) e.clearValidate()
+    })
+}
 
 onMounted(() => {
     getClassAndCompanyData()