supply-front/src/views/basic_data/dealer/components/dealer_list-detail.vue

<template>
  <div>
    <div class="sty">
      <el-page-header @back="goBack" content="详情页面"> </el-page-header>
    </div>
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span>客户</span>
      </div>
      <el-row>
        <el-col :span="8"
          ><span class="color">创建组织</span
          ><input v-model="infoForm.a" type="text"
        /></el-col>
        <el-col :span="8"
          ><span>客户编码</span><input v-model="infoForm.number" type="text"
        /></el-col>
        <el-col :span="8"
          ><span class="color">使用组织</span
          ><input v-model="infoForm.useOrgId" type="text"
        /></el-col>
      </el-row>
      <el-row>
        <el-col :span="8"><span>简称</span><input type="text" /></el-col>
      </el-row>
    </el-card>
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span>基本信息</span>
      </div>
      <div class="baseInfo">
        <div>
          <div class="base-header">
            <span>地址</span>
          </div>
          <el-row>
            <el-col :span="24"
              ><span class="marg-r color">国家</span><input type="text"
            /></el-col>
          </el-row>
          <el-row>
            <el-col :span="24"
              ><span class="marg-r color">地区</span
              ><input v-model="infoForm.region" type="text"
            /></el-col>
          </el-row>
          <el-row>
            <el-col :span="24"
              ><span class="marg-r color">省份</span
              ><input v-model="infoForm.province" type="text"
            /></el-col>
          </el-row>
          <el-row>
            <el-col :span="24"
              ><span class="marg-r color">城市</span><input type="text"
            /></el-col>
          </el-row>
          <el-row>
            <el-col :span="24"
              ><span class="marg-r">通讯地址</span
              ><input v-model="infoForm.invoiceAddress" type="text"
            /></el-col>
          </el-row>
          <el-row>
            <el-col :span="24"
              ><span class="marg-r">邮政编码</span><input type="text"
            /></el-col>
          </el-row>
          <el-row>
            <el-col :span="24"
              ><span class="marg-r">公司网址</span><input type="text"
            /></el-col>
          </el-row>
          <el-row>
            <el-col :span="24"
              ><span class="marg-r color">商城订单对应组织</span
              ><input type="text"
            /></el-col>
          </el-row>
          <el-row>
            <el-col :span="24"
              ><span class="marg-r">联系邮箱</span
              ><input v-model="infoForm.email" type="text"
            /></el-col>
          </el-row>
        </div>
        <div>
          <div class="base-header">
            <span>管理</span>
          </div>
          <el-row>
            <el-col :span="24"
              ><span class="marg-r">联系电话</span
              ><input v-model="infoForm.mobile" type="text"
            /></el-col>
          </el-row>
          <el-row>
            <el-col :span="24"
              ><span class="marg-r">传真</span><input type="text"
            /></el-col>
          </el-row>
          <el-row>
            <el-col :span="24"
              ><span class="marg-r color">公司类别</span><input type="text"
            /></el-col>
          </el-row>
          <el-row>
            <el-col :span="24"
              ><span class="marg-r color">公司性质</span><input type="text"
            /></el-col>
          </el-row>
          <el-row>
            <el-col :span="24"
              ><span class="marg-r color">公司规模</span><input type="text"
            /></el-col>
          </el-row>
          <div class="base-header">
            <span>开票信息</span>
          </div>
          <el-row>
            <el-col :span="24"
              ><span class="marg-r">发票抬头</span
              ><input v-model="infoForm.invoiceTitle" type="text"
            /></el-col>
          </el-row>
          <el-row>
            <el-col :span="24"
              ><span class="marg-r">纳税登记号</span><input type="text"
            /></el-col>
          </el-row>
          <el-row>
            <el-col :span="24"
              ><span class="marg-r">开户银行</span
              ><input v-model="infoForm.bank" type="text"
            /></el-col>
          </el-row>
          <el-row>
            <el-col :span="24"
              ><span class="marg-r">银行账号</span
              ><input v-model="infoForm.bankAccount" type="text"
            /></el-col>
          </el-row>
          <el-row>
            <el-col :span="24"
              ><span class="marg-r">开票联系电话</span
              ><input v-model="infoForm.invoicePhone" type="text"
            /></el-col>
          </el-row>
          <el-row>
            <el-col :span="24"
              ><span class="marg-r">开票通讯地址</span
              ><input v-model="infoForm.invoiceAddress" type="text"
            /></el-col>
          </el-row>
        </div>
        <div>
          <div class="base-header">
            <span>相关</span>
          </div>
          <el-row>
            <el-col :span="24"
              ><span class="marg-r color">对应供应商</span><input type="text"
            /></el-col>
          </el-row>
          <el-row>
            <el-col :span="24"
              ><span class="marg-r color">对应集团客户</span><input type="text"
            /></el-col>
          </el-row>
          <el-row>
            <el-col :span="24"
              ><span class="marg-r">集团客户</span><input type="checkbox"
            /></el-col>
          </el-row>
          <el-row>
            <el-col :span="24"
              ><span class="marg-r">默认付款方</span><input type="checkbox"
            /></el-col>
          </el-row>
          <el-row>
            <el-col :span="24"
              ><span class="marg-r">不校验可发量</span><input type="checkbox"
            /></el-col>
          </el-row>
          <el-row>
            <el-col :span="24"
              ><span class="marg-r color">客户类别</span><input type="text"
            /></el-col>
          </el-row>
          <el-row>
            <el-col :span="24"
              ><span class="marg-r color">客户分组</span><input type="text"
            /></el-col>
          </el-row>
          <el-row>
            <el-col :span="24"
              ><span class="marg-r color">对应组织</span><input type="text"
            /></el-col>
          </el-row>
          <el-row>
            <el-col :span="24"
              ><span class="marg-r">备注</span><input type="text"
            /></el-col>
          </el-row>
          <div class="base-header">
            <span>智慧订货</span>
          </div>
          <el-row>
            <el-col :span="24"
              ><span class="marg-r">允许对智慧订货</span><input type="checkbox"
            /></el-col>
          </el-row>
        </div>
      </div>
    </el-card>
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span>信用额度</span>
      </div>
      <el-row>
        <el-col :span="8"
          ><span class="color">信用额度</span><input type="text"
        /></el-col>
        <el-col :span="8"><span>有效期</span><input type="text" /></el-col>
        <el-col :span="8"></el-col>
      </el-row>
    </el-card>
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span>业务信息</span>
      </div>
    </el-card>
  </div>
</template>

<script>
export default {
  props: {
    infoList: {
      type: Object,
      required: true,
    },
  },
  data() {
    return {
      infoForm: {
        adminUserId: "",
        bank: "",
        bankAccount: "",
        bindUser: true,
        city: "",
        createBy: "",
        createTime: "",
        creditAmount: 0,
        email: "",
        forbidStatus: "",
        id: "",
        invoiceAddress: "",
        invoicePhone: "",
        invoiceTitle: "",
        mobile: "",
        name: "",
        number: "",
        province: "",
        region: "",
        saleDeptName: "",
        saleDeptNumber: "",
        syncTime: "",
        taxNo: "",
        updateBy: "",
        updateTime: "",
        useOrgId: "",
        useOrgName: "",
        useOrgNumber: "",
      },
    };
  },
  created() {
    this.infoForm = this.infoList;
  },
  methods: {
    goBack() {
      console.log(this.$parent);
      this.$parent.isShow = true;
    },
  },
};
</script>

<style lang="scss" scoped>
.color {
  color: #1f93ec;
}
.el-col-24 {
  margin: 6px 0;
}

.marg-r {
  padding-right: 15px;
  font-size: 12px;
  display: inline-block;
  width: 120px;
}
.base-header {
  height: 20px;
  width: 60%;
  border-bottom: 2px solid gray;
  span {
    width: 100px;
    height: 100%;
    display: block;
    text-align: center;
    color: #fff;

    background-color: gray;
  }
}
.box-card {
  margin-bottom: 20px;
}
.el-col-8 {
  span {
    padding-right: 10px;
    display: inline-block;
    width: 100px;
  }
}
.baseInfo {
  display: flex;
  justify-content: space-between;
  > div {
    width: 33%;
  }
}
.sty {
  margin-bottom: 20px;
}
.el-row {
  margin-bottom: 20px;
  &:last-child {
    margin-bottom: 0;
  }
}
</style>