zfire-newmall-admin/src/views/workOrder/workOrderPool/detailModule/SettleAccounts/index.vue

<template>
  <zj-page-container>
    <zj-page-fill class="neibuview">
      <zj-form-container ref="formRef" v-if="formData.orderType" :form-data="formData"
        :formAttributes="{ 'label-position': 'top' }">
        <zj-form-module :title="`费用结算-${({ INSTALL: '安装', REPAIR: '维修' })[formData.orderType]}`" :form-data="formData"
          :form-items="repairInfo" />
      </zj-form-container>
      <el-empty v-else description="暂时没有结算信息"></el-empty>
    </zj-page-fill>
    <div v-if="formData.settleStatus == 'YWG'" style="box-sizing: border-box;padding: 16px;">
      <el-button size="mini" @click="queding">确定结算</el-button>
    </div>
  </zj-page-container>
</template>

<script>
import { getClassifyList } from '@/api/goods'
import { required, mobileRequired, mobile, httpUrl, email } from '@/components/template/rules_verify.js'
import { listPageV2 } from "@/api/workOrder/settlementStandardInstall";
import { listPageV2 as listPageV2Repair } from "@/api/workOrder/settlementStandardRepair";
import { listPageV2 as listPageV2Other } from "@/api/workOrder/settlementStandardOther";
import { orderBaseSettleNormDetail, orderBaseSettleNormConfirm } from "@/api/workOrderPool.js";
import { EventBus } from '@/utils/eventBus'
export default {
  props: {
    id: {
      type: [String, Number],
      default: null,
    }
  },
  data() {
    return {
      classifyList: [],
      classifyListLv2: [],
      gonglv: [],
      gonglr: [],
      gongqtdl: [],
      gongqt: [],
      formData: {}
    }
  },
  computed: {
    normColumns() {
      return [
        {
          columnAttributes: {
            label: '工单类型',
            prop: 'typeName'
          },
        },
        {
          columnAttributes: {
            label: '产品大类',
            prop: 'parentCategoryId'
          },
          render: (h, { row, column, index }) => {
            return <div class="redbordererr">
              <el-form-item label="" label-width="0px" prop={`normList.${index}.${column.columnAttributes.prop}`} rules={required}>
                <el-select
                  disabled={this.formData.settleStatus != 'YWG'}
                  value={row[column.columnAttributes.prop]}
                  onInput={(val) => { row[column.columnAttributes.prop] = val }}
                  onChange={(val) => {
                    row.categoryId = ""
                    row.categoryName = ""
                    row.label = ""
                    row.normAmount = ""
                    row.repairAmount = ""
                    row.settleNormId = ""
                    row.settleNum = ""
                    if (val) {
                      var data = this.classifyList.find(item => item.categoryId == val)
                      row.parentCategoryName = data.name
                    } else {
                      row.parentCategoryName = ""
                    }
                  }}
                  placeholder="请选择">
                  {this.classifyList.map((item, index_) => <el-option key={index_} label={item.name} value={item.categoryId}></el-option>)}
                </el-select>
              </el-form-item>
            </div>
          }
        },
        {
          columnAttributes: {
            label: '产品小类',
            prop: 'categoryId'
          },
          render: (h, { row, column, index }) => {
            return <div class="redbordererr">
              <el-form-item label="" label-width="0px" prop={`normList.${index}.${column.columnAttributes.prop}`} rules={required}>
                <el-select
                  disabled={this.formData.settleStatus != 'YWG'}
                  value={row[column.columnAttributes.prop]}
                  onInput={(val) => { row[column.columnAttributes.prop] = val }}
                  onChange={(val) => {
                    row.label = ""
                    row.normAmount = ""
                    row.repairAmount = ""
                    row.settleNormId = ""
                    row.settleNum = ""
                    if (val) {
                      var data = this.classifyListLv2.find(item => item.categoryId == val)
                      row.categoryName = data.name
                    } else {
                      row.categoryName = ""
                    }
                  }}
                  placeholder="请选择">
                  {this.classifyListLv2.filter(item => item.parentId === row.parentCategoryId).map((item, index_) => <el-option key={index_} label={item.name} value={item.categoryId}></el-option>)}
                </el-select>
              </el-form-item>
            </div>
          }
        },
        ...(() => {
          if (this.formData.orderType == 'INSTALL') {
            return [
              {
                columnAttributes: {
                  label: '功率',
                  prop: 'label'
                },
                render: (h, { row, column, index }) => {
                  return <div class="redbordererr">
                    <el-form-item label="" label-width="0px" prop={`normList.${index}.${column.columnAttributes.prop}`} rules={required}>
                      <el-select
                        disabled={this.formData.settleStatus != 'YWG'}
                        value={row[column.columnAttributes.prop]}
                        onInput={(val) => { row[column.columnAttributes.prop] = val }}
                        onChange={(val) => {
                          row.settleNum = ""
                          if (val) {
                            var data = this.getflList(this.gonglv, row).find(item => item.label == val)
                            row.normAmount = data.normAmount
                            row.settleNormId = data.id
                          } else {
                            row.normAmount = ""
                            row.settleNormId = ""
                          }
                        }}
                        placeholder="请选择">
                        {this.getflList(this.gonglv, row).map((item, index_) => <el-option key={index_} label={item.label} value={item.label}></el-option>)}
                      </el-select>
                    </el-form-item>
                  </div>
                }
              },
              {
                columnAttributes: {
                  label: '结算标准(元/套)',
                  prop: 'normAmount'
                },
              },
              {
                columnAttributes: {
                  label: '数量',
                  prop: 'settleNum'
                },
                render: (h, { row, column, index }) => {
                  return <div class="redbordererr">
                    <el-form-item label="" label-width="0px" prop={`normList.${index}.${column.columnAttributes.prop}`} rules={required}>
                      <el-input
                        disabled={this.formData.settleStatus != 'YWG'}
                        type="number"
                        disabled={row.normAmount ? false : true}
                        value={row[column.columnAttributes.prop]}
                        onInput={(val) => { row[column.columnAttributes.prop] = val }}
                        placeholder="请输入内容"
                      >
                      </el-input>
                    </el-form-item>
                  </div>
                }
              },
              {
                columnAttributes: {
                  label: '结算金额(元)',
                  prop: 'settleAmount',
                },
                render: (h, { row, column, index }) => {
                  return <div class="redbordererr">
                    {(Number(row.normAmount || 0) * Number(row.settleNum || 0)).toFixed(2)}
                  </div>
                }
              },
            ]
          }
          return []
        })(),
        ...(() => {
          if (this.formData.orderType == 'REPAIR') {
            return [
              {
                columnAttributes: {
                  label: '质保类型',
                  prop: 'label'
                },
                render: (h, { row, column, index }) => {
                  return <div class="redbordererr">
                    <el-form-item label="" label-width="0px" prop={`normList.${index}.${column.columnAttributes.prop}`} rules={required}>
                      <el-select
                        disabled={this.formData.settleStatus != 'YWG'}
                        value={row[column.columnAttributes.prop]}
                        onInput={(val) => { row[column.columnAttributes.prop] = val }}
                        onChange={(val) => {
                          row.settleNum = ""
                          if (val) {
                            var data = this.getflList(this.gonglr, row).find(item => item.label == val)
                            row.repairAmount = data.repairAmount
                            row.normAmount = data.normAmount
                            row.settleNormId = data.id
                          } else {
                            row.repairAmount = ""
                            row.normAmount = ""
                            row.settleNormId = ""
                          }
                        }}
                        placeholder="请选择">
                        {this.getflList(this.gonglr, row).map((item, index_) => <el-option key={index_} label={({ INSIDE: '保内', OUT: '保外' })[item.label]} value={item.label}></el-option>)}
                      </el-select>
                    </el-form-item>
                  </div>
                }
              },
              {
                columnAttributes: {
                  label: '上门费（元/单）',
                  prop: 'repairAmount'
                },
                render: (h, { row, column, index }) => {
                  return <div class="redbordererr">
                    <el-form-item label="" label-width="0px" prop={`normList.${index}.${column.columnAttributes.prop}`} rules={required}>
                      <el-input
                        disabled={this.formData.settleStatus != 'YWG'}
                        type="number"
                        disabled={row.normAmount ? false : true}
                        value={row[column.columnAttributes.prop]}
                        onInput={(val) => { row[column.columnAttributes.prop] = val }}
                        placeholder="请输入内容"
                      >
                      </el-input>
                    </el-form-item>
                  </div>
                }
              },
              {
                columnAttributes: {
                  label: '维修费结算比例%',
                  prop: 'normAmount'
                },
                render: (h, { row, column, index }) => {
                  return <div class="redbordererr">
                    {row[column.columnAttributes.prop]}%
                  </div>
                }
              },
              {
                columnAttributes: {
                  label: '维修费用结算',
                  prop: 'repairNormAmount'
                },
                render: (h, { row, column, index }) => {
                  return <div class="redbordererr">
                    <el-form-item label="" label-width="0px" prop={`normList.${index}.${column.columnAttributes.prop}`} rules={required}>
                      <el-input
                        disabled={this.formData.settleStatus != 'YWG'}
                        type="number"
                        disabled={row.normAmount ? false : true}
                        value={row[column.columnAttributes.prop]}
                        onInput={(val) => { row[column.columnAttributes.prop] = val }}
                        placeholder="请输入内容"
                      >
                      </el-input>
                    </el-form-item>
                  </div>
                }
              },
              {
                columnAttributes: {
                  label: '数量',
                  prop: 'settleNum'
                },
                render: (h, { row, column, index }) => {
                  return <div class="redbordererr">
                    <el-form-item label="" label-width="0px" prop={`normList.${index}.${column.columnAttributes.prop}`} rules={required}>
                      <el-input
                        disabled={this.formData.settleStatus != 'YWG'}
                        type="number"
                        disabled={row.normAmount ? false : true}
                        value={row[column.columnAttributes.prop]}
                        onInput={(val) => { row[column.columnAttributes.prop] = val }}
                        placeholder="请输入内容"
                      >
                      </el-input>
                    </el-form-item>
                  </div>
                }
              },
              {
                columnAttributes: {
                  label: '结算金额(元)',
                  prop: 'settleAmount',
                },
                render: (h, { row, column, index }) => {
                  return <div class="redbordererr">
                    {(Number(row.repairAmount || 0) + (Number(row.normAmount || 0) / 100) * Number(row.repairNormAmount || 0) * Number(row.settleNum || 0)).toFixed(2)}
                  </div>
                }
              },
            ]
          }
          return []
        })(),
        {
          columnAttributes: {
            label: '备注',
            prop: 'remark'
          },
          render: (h, { row, column, index }) => {
            return <div class="redbordererr">
              <el-form-item label="" label-width="0px">
                <el-input
                  disabled={this.formData.settleStatus != 'YWG'}
                  value={row[column.columnAttributes.prop]}
                  onInput={(val) => { row[column.columnAttributes.prop] = val }}
                  placeholder="请输入内容"
                >
                </el-input>
              </el-form-item>
            </div>
          }
        },
      ]
    },
    otherColumns() {
      return [
        {
          columnAttributes: {
            label: '费用类型',
            prop: 'type'
          },
          render: (h, { row, column, index }) => {
            return <div class="redbordererr">
              <el-form-item label="" label-width="0px">
                <el-select
                  disabled={this.formData.settleStatus != 'YWG'}
                  value={row[column.columnAttributes.prop]}
                  onInput={(val) => { row[column.columnAttributes.prop] = val }}
                  onChange={(val) => {
                    row.label = ""
                    row.normAmount = ""
                    row.settleNormId = ""
                    row.settleNum = ""
                  }}
                  placeholder="请选择">
                  {this.gongqtdl.map((item, index_) => <el-option key={index_} label={item.label} value={item.value}></el-option>)}
                </el-select>
              </el-form-item>
            </div>
          }
        },
        {
          columnAttributes: {
            label: '规格',
            prop: 'label'
          },
          render: (h, { row, column, index }) => {
            return <div class="redbordererr">
              <el-form-item label="" label-width="0px">
                <el-select
                  disabled={this.formData.settleStatus != 'YWG'}
                  value={row[column.columnAttributes.prop]}
                  onInput={(val) => { row[column.columnAttributes.prop] = val }}
                  onChange={(val) => {
                    row.settleNum = ""
                    if (val) {
                      var data = this.gongqt.filter(item => item.type === row.type).find(item => item.label == val)
                      row.normAmount = data.normAmount
                      row.settleNormId = data.id
                    } else {
                      row.normAmount = ""
                      row.settleNormId = ""
                    }
                  }}
                  placeholder="请选择">
                  {this.gongqt.filter(item => item.type === row.type).map((item, index_) => <el-option key={index_} label={item.label} value={item.label}></el-option>)}
                </el-select>
              </el-form-item>
            </div>
          }
        },
        {
          columnAttributes: {
            label: '单价(元/套)',
            prop: 'normAmount'
          },
        },
        {
          columnAttributes: {
            label: '数量',
            prop: 'settleNum'
          },
          render: (h, { row, column, index }) => {
            return <div class="redbordererr">
              <el-form-item label="" label-width="0px">
                <el-input
                  disabled={this.formData.settleStatus != 'YWG'}
                  type="number"
                  disabled={row.normAmount ? false : true}
                  value={row[column.columnAttributes.prop]}
                  onInput={(val) => { row[column.columnAttributes.prop] = val }}
                  placeholder="请输入内容"
                >
                </el-input>
              </el-form-item>
            </div>
          }
        },
        {
          columnAttributes: {
            label: '结算金额(元)',
            prop: 'settleAmount',
          },
          render: (h, { row, column, index }) => {
            return <div class="redbordererr">
              {(Number(row.normAmount || 0) * Number(row.settleNum || 0)).toFixed(2)}
            </div>
          }
        },
        {
          columnAttributes: {
            label: '备注',
            prop: 'remark'
          },
          render: (h, { row, column, index }) => {
            return <div class="redbordererr">
              <el-form-item label="" label-width="0px">
                <el-input
                  disabled={this.formData.settleStatus != 'YWG'}
                  value={row[column.columnAttributes.prop]}
                  onInput={(val) => { row[column.columnAttributes.prop] = val }}
                  placeholder="请输入内容"
                >
                </el-input>
              </el-form-item>
            </div>
          }
        },
      ]
    },
    repairInfo() {
      return [
        {
          name: 'el-input',
          md: 6,
          attributes: { disabled: true, },
          formItemAttributes: { label: '网点名称', prop: 'websitName' },
        },
        {
          name: 'el-input',
          md: 6,
          attributes: { disabled: true, },
          formItemAttributes: { label: '工程师', prop: 'workerName' },
        },
        {
          name: 'el-input',
          md: 6,
          attributes: { disabled: true, },
          formItemAttributes: { label: '联系电话', prop: 'mobile' },
        },
        {
          name: 'el-input',
          md: 6,
          attributes: { disabled: true, },
          formItemAttributes: { label: '身份证', prop: 'idcard' },
        },
        {
          md: 24,
          name: 'slot-component',
          formItemAttributes: {
            label: '费用结算',
            prop: 'normList',
          },
          render: (h, { props, onInput }) => {
            var { formData } = props
            return (
              <zj-table
                columns={this.normColumns}
                table-data={formData.normList}
              />
            )
          }
        },
        {
          md: 24,
          name: 'slot-component',
          formItemAttributes: {
            label: '其他费用结算',
            prop: 'otherNormList',
          },
          render: (h, { props, onInput }) => {
            var { formData } = props
            return (
              <zj-table
                columns={this.otherColumns}
                table-data={formData.otherNormList}
              />
            )
          }
        }
      ]
    },
  },
  watch: {
    id: {
      handler(newVal, oldVal) {
        if (this.id) {
          orderBaseSettleNormDetail({
            id: this.id
          }).then(res => {
            this.formData = res.data || {}
            if (this.formData.orderType == "INSTALL") {
              // 安装单请求
              listPageV2({ "pageNum": 1, "pageSize": -1, "params": [] }).then(res => {
                this.gonglv = res.data.records
              })
            } else if (this.formData.orderType == "REPAIR") {
              // 维修单请求
              listPageV2Repair({ "pageNum": 1, "pageSize": -1, "params": [] }).then(res => {
                this.gonglr = res.data.records
              })
            }
          })
        }
      },
      deep: true,
      immediate: true,
    },
  },
  created() {
    // 获取产品大类小类
    getClassifyList({ type: 2, status: true }).then(res => {
      var classifyListLv2 = []
      this.classifyList = res.data.map(item => {
        var { children, ...data } = item
        classifyListLv2.push(...(children || []))
        return {
          ...data
        }
      });
      this.classifyListLv2 = classifyListLv2
    })
    // 其他类型
    listPageV2Other({ "pageNum": 1, "pageSize": -1, "params": [] }).then(res => {
      this.gongqt = res.data.records
      this.gongqtdl = Array.from(new Set(res.data.records.map(item => item.type))).map(type => ({
        label: type,
        value: type
      }))
    })
  },
  methods: {
    getflList(list = [], row = {},) {
      return list.filter(item => (
        item.type == row.type &&
        item.parentCategoryId == row.parentCategoryId &&
        item.categoryId == row.categoryId 
        // &&
        // !~this.formData.normList.map(v => `${v.type}_${v.parentCategoryId}_${v.categoryId}_${v.label}`).filter(v => (
        //   v != `${row.type}_${row.parentCategoryId}_${row.categoryId}_${row.label}`
        // )).indexOf(`${item.type}_${item.parentCategoryId}_${item.categoryId}_${item.label}`)
      ))
    },
    queding() {
      this.$refs.formRef.validate((valid, invalidFields, errLabels) => {
        if (valid) {
          orderBaseSettleNormConfirm(this.formData).then(res => {
            this.$message({
              type: 'success',
              message: '结算成功'
            })
            // 结算成功后跳转列表
            EventBus.$emit('handleOrderClone')
          })
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.neibuview {
  box-sizing: border-box;
  padding-left: 16px;

  ::v-deep &>.zj-page-fill-scroll {
    box-sizing: border-box;
    padding-right: 16px;

    &>div:nth-child(1) {
      margin-top: 20px;
    }
  }
}
</style>