优化结算页面

sgzb-ui/src/views/cost/csotSettlement/component/finishAndDetails.vue

@@ -19,6 +19,7 @@
             :totalPrice="settleTotalPrice_01"
             :tableData="settleTableData_01"
             @handelSaveSuccess="handelSaveSuccess"
+            v-if="settleTableData_01.length > 0"
         />
         <!-- 03承担方 -->
         <FinishTable
@@ -29,6 +30,7 @@
             :totalPrice="settleTotalPrice_03"
             :tableData="settleTableData_03"
             @handelSaveSuccess="handelSaveSuccess"
+            v-if="settleTableData_03.length > 0"
         />
         <FinishTable
             :tableColumns="repairTableColumns"

sgzb-ui/src/views/cost/csotSettlement/component/finishTable.vue

@@ -6,6 +6,7 @@
                 调整天数批量设置：
                 <el-input
                     v-model="batchNum"
+                    ref="batchNumRef"
                     type="number"
                     clearable
                     style="width: 120px"
@@ -38,6 +39,7 @@
                     size="mini"
                     type="success"
                     v-if="!isEdit && isCostBear"
+                    @click="submitSell"
                     >确认结算</el-button
                 >
                 <el-button
@@ -60,30 +62,36 @@
                 :width="t.t_slot === 't_date' ? '180' : ''"
                 show-overflow-tooltip
             >
-                <template slot-scope="{ row }">
+                <template slot-scope="scope">
                     <template v-if="t.t_slot && isEdit">
+                        <!-- 调整天数时的输入框 -->
                         <el-input
                             v-if="t.t_slot === 't_ipt'"
-                            v-model.number="row[t.t_prop]"
+                            v-model.number="scope.row[t.t_prop]"
                             style="width: 80px"
                             type="number"
+                            :ref="`editIpt_${scope.$index}`"
+                            :class="{
+                                active: activeIndex === scope.$index,
+                            }"
                         />
 
-                        <template v-if="t.t_slot === 't_date'">
+                        <!-- 调整终结日期的日期选择组件 -->
-                            <el-date-picker
+                        <el-date-picker
-                                v-model="row[t.t_prop]"
+                            v-model="scope.row[t.t_prop]"
-                                type="date"
+                            type="date"
-                                placeholder="选择日期"
+                            placeholder="选择日期"
-                                v-if="!row[t.t_prop]"
+                            v-if="t.t_slot === 't_date'"
-                                style="width: 150px"
+                            value-format="yyyy-M-d"
-                            />
+                            :ref="`editTime_${scope.$index}`"
-                            <template v-else>
+                            :class="{
-                                {{ row[t.t_prop] }}
+                                active: activeIndexTime === scope.$index,
-                            </template>
+                            }"
-                        </template>
+                            style="width: 150px"
+                        />
                     </template>
                     <template v-else>
-                        {{ row[t.t_prop] }}
+                        {{ scope.row[t.t_prop] }}
                     </template>
                 </template>
             </el-table-column>
@@ -134,15 +142,20 @@ export default {
 
     data() {
         return {
-            isEdit: false,
+            isEdit: false, // 是否编辑数据
-            batchNum: 0,
+            batchNum: '', // 批量调整天数的数据源
-            // tableDataList: [],
+            activeIndex: '', // 调整天数输入框不合格时的 index 用来设置动态 class 增加一个红色边框
+            activeIndexTime: '', // 调整终结日期时的 index 用来设置动态 class 增加一个红色边框
         }
     },
     methods: {
-        // 编辑按钮
+        /** 编辑按钮 */
         handleEdit() {
             this.isEdit = !this.isEdit
+            if (!this.isEdit) {
+                this.batchNum = ''
+                this.$emit('handelSaveSuccess')
+            }
         },
         /** 调整天数 */
         iptChange(val) {
@@ -161,40 +174,67 @@ export default {
             const regex = /^-?\d+$/
             let isNum = false
             try {
-                this.tableData.map((e) => {
+                // 1. 先循环列表数据 判断调整的天数是否符合要求
+                this.tableData.map((e, v) => {
+                    console.log(e.endTime, '选择的时间')
+
+                    if (!e.endTime) {
+                        this.$message.error('请选择终结日期！')
+                        this.activeIndexTime = v
+                        this.$refs[`editTime_${v}`][0].focus()
+                        isNum = true
+                        throw new Error()
+                    }
                     if (!regex.test(e.trimDay)) {
+                        this.$message.error('请输入正整数和负整数或0！')
+                        this.activeIndex = v
+                        this.$refs[`editIpt_${v}`][0].focus()
                         isNum = true
                         throw new Error()
                     }
                 })
-            } catch {}
 
-            if (isNum) {
+                if (isNum) return
-                this.$message.error('请输入正整数和负整数或0！')
-                return
-            }
 
-            let saveParams = []
+                // 2. 组装保存时的参数
-            this.tableData.map((e) => {
+                let saveParams = []
-                const item = {
+                this.tableData.map((e) => {
-                    agreementId: e.agreementId,
+                    const item = {
-                    typeId: e.typeId,
+                        agreementId: e.agreementId, // 协议id
-                    trimDay: e.trimDay,
+                        typeId: e.typeId, // 设备id
-                    maId: e.maId || '',
+                        trimDay: e.trimDay, // 调整的天数
+                        maId: e.maId || '',
+                    }
+
+                    saveParams.push(item)
+                })
+
+                // 3. 请求后台接口传递更改后的数据
+                const res = await editSaveApi(saveParams)
+
+                if (res.code == 200) {
+                    this.$message.success('保存成功！')
+                    this.activeIndex = ''
+                    this.activeIndexTime = ''
+                    this.batchNum = ''
+                    this.isEdit = false
+                    this.$emit('handelSaveSuccess')
                 }
-
+            } catch {}
-                saveParams.push(item)
+        },
+        /** 单个列表确认结算 */
+        submitSell() {
+            this.$confirm(
+                '确定后则会生成财务报表，数据将不可修改，请确认检查无误',
+                '提示',
+                {
+                    confirmButtonText: '确定',
+                    cancelButtonText: '取消',
+                    type: 'warning',
+                },
+            ).then(() => {
+                console.log('确定，后续走确定逻辑')
             })
-
-            console.log(saveParams, '保存时的参数---')
-
-            const res = await editSaveApi(saveParams)
-
-            if (res.code == 200) {
-                this.$message.success('保存成功！')
-                this.isEdit = false
-                this.$emit('handelSaveSuccess')
-            }
         },
     },
 }
@@ -254,4 +294,9 @@ export default {
         line-height: 36px;
     }
 }
+::v-deep .active {
+    .el-input__inner:focus {
+        border-color: #f56c6c;
+    }
+}
 </style>