supply-front/src/views/basic_data/dealer/components/subMerchantForm.vue

<template>
  <div>
    <div class="sty">
      <el-page-header :content="title" @back="goBack" />
    </div>
    <el-form ref="formData" :model="formData" label-width="120px" :inline="false" size="mini" label-position="left">
      <el-card>
        <div slot="header" class="clearfix">
          <strong>客户信息</strong>
        </div>
        <el-row :gutter="20">
          <el-col :span="8">
            <el-form-item label="上级商户编码" prop="higherPrantNumber">
              <el-input v-model="formData.higherPrantNumber" placeholder="请输入上级商户编码" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="上级商户信息" prop="higherPrantName">
              <el-input v-model="formData.higherPrantName" placeholder="请输入上级商户信息" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="商户编码">
              <el-input v-model="formData.number" disabled placeholder="创建自动生成（仅显示不能编辑）" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="商户名称" prop="name">
              <el-input v-model="formData.name" placeholder="请输入客户信息" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="负责人" prop="chargeName">
              <el-input v-model="formData.chargeName" placeholder="请输入负责人姓名" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="联系电话" prop="mobile">
              <el-input v-model="formData.mobile" placeholder="请输入联系电话" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="地址" prop="invoiceAddress">
              <el-input v-model="formData.invoiceAddress" placeholder="请输入地址" />
            </el-form-item>
          </el-col>
        </el-row>
      </el-card>
      <el-card>
        <div slot="header" class="clearfix">
          <strong>售后系统关联信息</strong>
        </div>
        <el-row :gutter="20" class="center">
          <el-col :span="4">售后系统销售编号</el-col>
          <el-col :span="4">
            <el-form-item label-width="0" prop="afterNumber" style="margin: 0">
              <el-input
                v-model="formData.afterNumber"
                placeholder="请输入售后系统销售编号"
                size="mini"
                :disabled="moduleType == 3"
              />
            </el-form-item>
          </el-col>
          <el-col :span="4">售后系统绑定状态</el-col>
          <el-col :span="4">{{ formData.binding === 'YES' ? '是' : '否' }}</el-col>
          <el-col v-if="moduleType !== 3 && moduleType !== 1" :span="4">
            <el-button type="primary" size="mini" @click="handleBinding">绑定</el-button>
          </el-col>
        </el-row>
        <el-row class="radio center">
          <el-col :span="8">
            <el-form-item label-width="0" prop="afterType" style="margin: 0">
              <el-radio-group v-model="formData.afterType" :disabled="moduleType == 3">
                <el-radio v-for="item in afterTypeList" :key="item.value" :label="item.value">{{
                  item.label
                }}</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
          <el-col :span="2">绑定时间</el-col>
          <el-col :span="4">{{ formData.bindingTime }}</el-col>
          <el-col :span="2">绑定人</el-col>
          <el-col :span="4">{{ formData.bindingName }}</el-col>
        </el-row>
      </el-card>
      <el-card>
        <div slot="header" class="clearfix">
          <strong>使用状态</strong>
        </div>
        <el-form-item label-width="0" prop="forbidStatus" style="margin: 0">
          <el-radio-group v-model="formData.forbidStatus" :disabled="moduleType == 3">
            <el-radio label="A">正常</el-radio>
            <el-radio label="B">禁用</el-radio>
          </el-radio-group>
        </el-form-item>
        <div v-if="moduleType !== 3" style="margin: 20px">
          <el-button type="primary" size="mini" @click="handleSubmit">提交</el-button>
          <el-button type="primary" size="mini" @click="handleReset">重置</el-button>
        </div>
      </el-card>
      <el-card v-if="moduleType == 3">
        <div slot="header" class="clearfix">
          <strong>审核信息</strong>
        </div>
        <el-row :gutter="20">
          <el-col :span="8">
            <el-form-item label="审核人"> <el-input v-model="formData.approvalName" placeholder="系统自动生成" disabled /> </el-form-item></el-col>
          <el-col :span="8">
            <el-form-item label="审核时间"> <el-input v-model="formData.approvalTime" placeholder="系统自动生成" disabled /> </el-form-item></el-col>
          <el-col :span="24">
            <el-form-item label="备注"> <el-input v-model="formData.approvalRemark" placeholder="请输入备注" /> </el-form-item></el-col>
        </el-row>

        <div style="margin: 20px">
          <el-button type="primary" size="mini" @click="handleExamine">提交</el-button>
          <el-button type="primary" size="mini" @click="handleReset">重置</el-button>
        </div>
      </el-card>
    </el-form>
  </div>
</template>

<script>
import {
  addStagecustomer,
  examineStagecustomer,
  updateStagecustomer,
  updateSystem,
  getStageCustomerDetail
} from '@/api/basic_data/dealer'

export default {
  props: {
    moduleType: {
      type: Number,
      default: null
    },
    detailsId: {
      type: String,
      default: null
    }
  },
  data() {
    return {
      title: '新增',
      afterTypeList: [
        { label: '上级商户销售编号', value: 'CHARGE' },
        { label: '二级商户编号', value: 'STAGE' }
      ],
      formData: {
        higherPrantNumber: '',
        higherPrantName: '',
        number: '',
        name: '',
        chargeName: '',
        mobile: '',
        invoiceAddress: '',
        afterNumber: '',
        binding: '否',
        afterType: 'CHARGE',
        bindingTime: '',
        bindingName: '',
        forbidStatus: 'A',
        approvalName: '',
        approvalTime: '',
        approvalRemark: ''
      }
    }
  },
  mounted() {
    if ((this.moduleType === 3 || this.moduleType === 4) && this.detailsId) {
      this.title = this.moduleType === 3 ? '审核' : '编辑'
      this.getStageCustomerDetail()
    }
  },
  methods: {
    goBack() {
      this.$emit('close')
    },
    getStageCustomerDetail() {
      getStageCustomerDetail({ id: this.detailsId }).then(res => {
        this.formData = res.data
      })
    },
    handleSubmit() {
      if (this.moduleType !== 1) {
        updateStagecustomer({
          ...this.formData
        }).then(res => {
          this.$successMsg('编辑成功')
        })
      } else {
        addStagecustomer({
          ...this.formData
        }).then(res => {
          this.$successMsg('新增成功')
        })
      }
      this.$emit('close')
    },
    handleExamine() {
      examineStagecustomer({
        id: this.formData.id,
        examineStatus: 'OK',
        approvalRemark: this.formData.approvalRemark
      }).then(res => {
        console.log(res)
        this.$successMsg('审核成功')
        this.$emit('close')
      })
    },
    handleBinding() {
      updateSystem({
        id: this.detailsId,
        afterNumber: this.formData.afterNumber
      }).then(res => {
        getStageCustomerDetail({ id: this.detailsId }).then(res => {
          const { afterType, bindingTime, bindingName } = res.data
          this.formData.afterType = afterType
          this.formData.bindingTime = bindingTime
          this.formData.bindingName = bindingName
          this.$successMsg('绑定成功')
        })
      })
    },
    handleReset() {
      this.$refs.formData.resetFields()
    }
  }
}
</script>

<style lang="scss" scoped>
.sty {
  margin-bottom: 20px;
}
::v-deep .el-card {
  margin-bottom: 20px;
}
.center {
  display: flex;
  align-items: center;
}
.radio {
  padding: 20px 0;
}
</style>