zfire-newmall-admin/src/views/engineeringAuxiliaryParts/projectCollectionManagement/workOrderInfo/index.vue

<template>
  <zj-page-container v-if="formData">
    <zj-page-fill class="neibuview">
      <zj-form-container ref="formRef" :form-data="formData" :form-rules="formRules"
        :form-attributes="{ size: 'mini' }">
        <!-- 工程信息 -->
        <zj-form-module title="工程信息" :form-data="formData" :form-items="serviceInfo" label-width="120px" />
        <!-- 基本信息 -->
        <zj-form-module title="基本信息" :form-data="formData" :form-items="basicInfo" label-width="120px" />
        <!-- 产品信息 -->
        <zj-form-module title="产品信息" :form-data="formData" :form-items="product" label-width="120px" />
        <!-- 收款信息 -->
        <zj-form-module
          v-if="!!id && (formData.status == 'WAIT_PAY' || formData.status == 'PART_PAY' || formData.status == 'PAY')"
          title="收款信息" :form-data="formData" :form-items="payInfo" label-width="120px" />
      </zj-form-container>
    </zj-page-fill>
    <!-- 操作按钮 -->
    <div>
      <div style="box-sizing: border-box; padding: 10px">
        <el-button size="mini" @click="handleClose">关闭</el-button>
        <el-button v-if="!id" size="mini" type="primary" @click="submit">提交</el-button>
        <el-button v-if="!!id && formData.status == 'WAIT'" size="mini" type="primary" @click="examine">审核</el-button>
        <el-button v-if="!!id && (formData.status == 'WAIT_PAY' || formData.status == 'PART_PAY')" size="mini"
          type="primary" @click="confirm">确定提交</el-button>
      </div>
    </div>
  </zj-page-container>
</template>

<script>
import basicInfo from './mixins/basicInfo.js'
import productColumns from './mixins/productColumns.js'
import serviceInfo from './mixins/serviceInfo.js'
import editTable from "@/components/template/editTable.js"
import { enginPayDetail, enginPaySave, enginPayConfirm, enginPayPay } from "@/api/projectCollectionManagement.js"
import ImageUpload from '@/components/file-upload'
import { required, mobileRequired, mobile, httpUrl, email } from '@/components/template/rules_verify.js'
export default {
  props: {
    id: {
      type: [String, Number],
      default: null,
    },
    handleClose: Function
  },
  components: { ImageUpload },
  mixins: [
    basicInfo,
    productColumns,
    serviceInfo,
    editTable
  ],
  data() {
    return {
      formData: {
        "address": "",
        "area": "",
        "areaId": "",
        "city": "",
        "cityId": "",
        "companyWechatId": "",
        "companyWechatName": "",
        "confirmBy": "",
        "confirmTime": "",
        "customerMobile": "",
        "customerMobile2": "",
        "customerName": "",
        "goodsType": "",
        "items": [],
        "lastUpdateBy": "",
        "lastUpdateTime": "",
        "linkName": "",
        "orderSmallType": "",
        "orderSmallTypeText": "",
        "projectName": "",
        "projectNo": "",
        "province": "",
        "provinceId": "",
        "records": [],
        "remark": "",
        "salesNo": "",
        "salesWebsit": "",
        "status": "",
        "street": "",
        "streetId": "",
        "totalPayAmount": 0,
        "totalSalesAmount": 0,
        "websitId": "",
        "websitName": "",
        // 收款信息
        "amount": "",
        "fileUrl": [],
        "payRemark": ""
      },
    }
  },
  watch: {
    id: {
      handler(newVal, oldVal) {
        this.getorderDetail((data) => {
          this.getinitlbslist()
          this.gettGoodsAloneList()
        })
      },
      deep: true,
      immediate: true,
    },
  },
  computed: {
    // 用户信息
    userInfo() {
      return JSON.parse(localStorage.getItem('greemall_user'))
    },
    // 表单校验规则
    formRules() {
      return {}
    },
    payInfo() {
      return [
        ...(() => {
          if (!!this.id && (this.formData.status == 'WAIT_PAY' || this.formData.status == 'PART_PAY')) {
            return [{
              name: 'el-input',
              md: 6,
              attributes: { placeholder: '请输入' },
              formItemAttributes: {
                label: '收款金额',
                prop: 'amount',
                rules: [...required]
              }
            },
            {
              md: 24,
              isShow: true,
              name: 'slot-component',
              formItemAttributes: {
                label: '收款凭证',
                prop: 'fileUrl',
                rules: []
              },
              render: (h, { props, onInput }) => {
                var { value } = props
                return (
                  <ImageUpload fileList={this.formData.fileUrl} limit={1} />
                )
              }
            },
            {
              name: 'el-input',
              md: 24,
              attributes: {
                type: 'textarea',
                rows: 3,
                placeholder: '请输入'
              },
              formItemAttributes: {
                label: '备注',
                prop: 'payRemark',
                rules: []
              }
            }]
          }
          return []
        })(),
        {
          md: 24,
          isShow: true,
          name: 'slot-component',
          formItemAttributes: {
            label: '收款记录',
            prop: 'records',
            rules: []
          },
          render: (h, { props, onInput }) => {
            var { value } = props
            return (
              <zj-table
                columns={[{
                  columnAttributes: {
                    label: '收款结果',
                    prop: 'status'
                  },
                  render: (h, { row, column, index }) => {
                    return <div div style="padding-left:10px">
                      {({ WAIT: "待审核", WAIT_PAY: "待收款", PART_PAY: "部分收款", PAY: "收款完成", })[row.status]}
                    </div>
                  },
                }, {
                  columnAttributes: {
                    label: '收款金额',
                    prop: 'payAmount'
                  }
                }, {
                  columnAttributes: {
                    label: '收款凭证',
                    prop: 'fileUrl'
                  },
                  render: (h, { row, column, index }) => {
                    return <div div style="padding-left:10px">
                      {row.fileUrl ? <ImageUpload fileList={[{ url: row.fileUrl }]} limit={1} isEdit={false} /> : null}
                    </div>
                  },
                }, {
                  columnAttributes: {
                    label: '备注',
                    prop: 'payRemark'
                  }
                }, {
                  columnAttributes: {
                    label: '收款人',
                    prop: 'lastUpdateBy'
                  }
                }, {
                  columnAttributes: {
                    label: '收款时间',
                    prop: 'lastUpdateTime'
                  }
                },]}
                table-data={value}
              />
            )
          }
        },
      ]
    }
  },
  methods: {
    // 获取工单详情
    getorderDetail(cb) {
      if (this.id) {
        // 编辑详情
        enginPayDetail({
          id: this.id
        }).then((res) => {
          Object.assign(this.formData, res.data)
          cb && cb()
        })
      }
    },
    appointVerify(arr, cb) {
      this.$refs.formRef.validateField(arr, (valid, invalidFields, errLabels) => {
        cb && cb(valid, invalidFields, errLabels)
      })
    },
    submit() {
      this.$refs.formRef.validate((valid, invalidFields, errLabels) => {
        if (valid) {
          enginPaySave(this.formData).then(res => {
            this.$message({
              type: 'success',
              message: '提交成功'
            })
            this.handleClose && this.handleClose()
          })
        }
      })
    },
    examine() {
      this.$refs.formRef.validate((valid, invalidFields, errLabels) => {
        if (valid) {
          enginPayConfirm({ id: this.formData.id }).then(res => {
            this.$message({
              type: 'success',
              message: '审核成功'
            })
            this.handleClose && this.handleClose()
          })
        }
      })
    },
    confirm() {
      this.$refs.formRef.validate((valid, invalidFields, errLabels) => {
        if (valid) {
          enginPayPay({
            id: this.formData.id,
            "amount": this.formData.amount,
            "fileUrl": this.formData.fileUrl.map(item => item.url).join(","),
            "payRemark": this.formData.payRemark,
          }).then(res => {
            this.$message({
              type: 'success',
              message: '收款成功'
            })
            this.handleClose && this.handleClose()
          })
        }
      })
    },
  }
}
</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;
    }
  }
}

.pgxxTable {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}

.withinLine {
  display: inline-block;

  ::v-deep .el-button {
    margin-left: 0;
    margin-right: 10px;
    margin-bottom: 10px;
  }
}

.redbordererr {
  ::v-deep .el-form-item {
    margin: 0 !important;
    overflow: hidden;
  }
}
</style>