supply-front/src/views/basic_data/supplier/components/supplier_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="6"
          ><span class="color">创建组织</span
          ><input type="text" v-model="infoForm.createOrgName"
        /></el-col>
        <el-col :span="6"
          ><span>使用组织</span><input type="text" v-model="infoForm.useOrgId"
        /></el-col>
        <el-col :span="6"
          ><span class="color">注册编码</span
          ><input v-model="infoForm.regNumber" type="text"
        /></el-col>
        <el-col :span="6"
          ><span class="color">编码</span
          ><input v-model="infoForm.number" type="text"
        /></el-col>
      </el-row>
      <el-row>
        <el-col :span="6"
          ><span>名称</span><input v-model="infoForm.name" type="text"
        /></el-col>
        <el-col :span="6"
          ><span>简称</span><input v-model="infoForm.shortName" 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 v-model="infoForm.country" type="text"
            /></el-col>
          </el-row>
          <el-row>
            <el-col :span="24"
              ><span class="marg-r color">地区</span
              ><input v-model="infoForm.provincial" type="text"
            /></el-col>
          </el-row>
          <el-row>
            <el-col :span="24"
              ><span class="marg-r color">通讯地址</span
              ><textarea
                v-model="infoForm.address"
                name=""
                id=""
                cols="30"
                rows="10"
                class="textareaStyle"
              ></textarea>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="24"
              ><span class="marg-r color">邮政编码</span
              ><input v-model="infoForm.zip" type="text"
            /></el-col>
          </el-row>
          <el-row>
            <el-col :span="24"
              ><span class="marg-r">语言</span
              ><input v-model="infoForm.language" type="text"
            /></el-col>
          </el-row>
          <el-row>
            <el-col :span="24"
              ><span class="marg-r">公司地址</span
              ><textarea
                v-model="infoForm.webSite"
                class="textareaStyle"
                name=""
                id=""
                cols="30"
                rows="10"
              ></textarea>
            </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.trade" type="text"
            /></el-col>
          </el-row>
          <el-row>
            <el-col :span="24"
              ><span class="marg-r">创立日期</span
              ><input v-model="infoForm.foundDate" type="text"
            /></el-col>
          </el-row>
          <el-row>
            <el-col :span="24"
              ><span class="marg-r color">法人代表</span
              ><input v-model="infoForm.legalPerson" type="text"
            /></el-col>
          </el-row>
          <el-row>
            <el-col :span="24"
              ><span class="marg-r color">注册资金(万元)</span
              ><input v-model="infoForm.registerFund" type="text"
            /></el-col>
          </el-row>
          <el-row>
            <el-col :span="24"
              ><span class="marg-r color">公司规模工商登记号</span
              ><input v-model="infoForm.registerCode" type="text"
            /></el-col>
          </el-row>
          <el-row>
            <el-col :span="24"
              ><span class="marg-r color">生产经许可证</span
              ><input v-model="infoForm.tendPermit" type="text"
            /></el-col>
          </el-row>
          <el-row>
            <el-col :span="24"
              ><span class="marg-r color">统一社会信用代码</span
              ><input v-model="infoForm.socialCreCode" type="text"
            /></el-col>
          </el-row>
          <el-row>
            <el-col :span="24"
              ><span class="marg-r color">注册地址</span
              ><textarea
                v-model="infoForm.registerAddress"
                name=""
                id=""
                cols="30"
                rows="10"
                class="textareaStyle"
              ></textarea>
            </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 v-model="infoForm.deptName" type="text"
            /></el-col>
          </el-row>
          <el-row>
            <el-col :span="24"
              ><span class="marg-r color">负责人</span
              ><input v-model="infoForm.staffName" type="text"
            /></el-col>
          </el-row>
          <el-row>
            <el-col :span="24"
              ><span class="marg-r">供应商分类</span
              ><input v-model="infoForm.supplierClassify" type="text"
            /></el-col>
          </el-row>
          <el-row>
            <el-col :span="24"
              ><span class="marg-r">供应类别</span
              ><select name="" id="" class="selectStyle">
                <option value="">采购</option>
              </select></el-col
            >
          </el-row>
          <el-row>
            <el-col :span="24"
              ><span class="marg-r">供应商等级</span
              ><input v-model="infoForm.supplierGrade" type="text"
            /></el-col>
          </el-row>
          <el-row>
            <el-col :span="24"
              ><span class="marg-r color">供应商分组</span
              ><input v-model="infoForm.groupName" type="text"
            /></el-col>
          </el-row>
          <el-row>
            <el-col :span="24"
              ><span class="marg-r color">公司类别</span
              ><input v-model="infoForm.companyClassify" type="text"
            /></el-col>
          </el-row>
          <el-row>
            <el-col :span="24"
              ><span class="marg-r color">公司性质</span
              ><input v-model="infoForm.companyNature" type="text"
            /></el-col>
          </el-row>
          <el-row>
            <el-col :span="24"
              ><span class="marg-r">公司规模</span
              ><input v-model="infoForm.companyScale" type="text"
            /></el-col>
          </el-row>
          <el-row>
            <el-col :span="24"
              ><span class="marg-r">对应组织</span
              ><input v-model="infoForm.correspondOrgName" type="text"
            /></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="6"
          ><span class="color">采购组</span><input type="text"
        /></el-col>
        <el-col :span="6"><span>默认价目表</span><input type="text" /></el-col>
        <el-col :span="6"
          ><span>业务状态</span
          ><select name="" id="" class="selectStyle2">
            <option value="">正常</option>
          </select></el-col
        >
        <el-col :span="6"><span>默认折扣表</span><input type="text" /></el-col>
      </el-row>
      <el-row>
        <el-col :span="6"
          ><span>冻结范围</span
          ><select name="" id="" class="selectStyle2">
            <option value=""></option></select
        ></el-col>
        <el-col :span="6"
          ><span class="color">供货方</span><input type="text"
        /></el-col>
        <el-col :span="6"><span>冻结人</span><input type="text" /></el-col>
        <el-col :span="6"
          ><span class="color">VMI仓库</span><input type="text"
        /></el-col>
      </el-row>
      <el-row>
        <el-col :span="6"
          ><span>冻结日期</span><input type="date" class="inputDate"
        /></el-col>
        <el-col :span="6"><span>VMI业务</span><input type="checkbox" /></el-col>
        <el-col :span="6"
          ><span class="color">汇总公司</span><input type="text"
        /></el-col>
        <el-col :span="6"
          ><span>启用供应商协同</span><input type="checkbox"
        /></el-col>
      </el-row>
      <el-row>
        <el-col :span="6"><span>保证金比例</span><input type="text" /></el-col>
        <el-col :span="6"
          ><span class="color">默认联系人</span><input type="text"
        /></el-col>
        <el-col :span="6"></el-col>
        <el-col :span="6"></el-col>
      </el-row>
    </el-card>
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span>财务信息</span>
      </div>
      <el-row>
        <el-col :span="6"
          ><span class="color">对应客户</span><input type="text"
        /></el-col>
        <el-col :span="6"
          ><span>单次预付额度</span><input type="text"
        /></el-col>
        <el-col :span="6"
          ><span class="color">发票类型</span
          ><select name="" id="" class="selectStyle2">
            <option value="">正常</option>
          </select></el-col
        >
        <el-col :span="6"
          ><span class="color">结算币别</span><input type="text"
        /></el-col>
      </el-row>
      <el-row>
        <el-col :span="6"
          ><span class="color">税分类</span><input type="text"
        /></el-col>
        <el-col :span="6"
          ><span class="color">默认税率</span><input type="text"
        /></el-col>
        <el-col :span="6"
          ><span class="color">结算方式</span><input type="text"
        /></el-col>
        <el-col :span="6"><span>税务登记号</span><input type="text" /></el-col>
      </el-row>
      <el-row>
        <el-col :span="6"
          ><span>描述</span
          ><textarea
            class="textareaStyle"
            name=""
            id=""
            cols="30"
            rows="10"
            style="width: 41%"
          ></textarea>
        </el-col>
        <el-col :span="6"
          ><span class="color">付款条件</span><input type="text"
        /></el-col>
        <el-col :span="6"
          ><span class="color">经营类型</span><input type="text"
        /></el-col>
        <el-col :span="6"
          ><span class="color">结算方</span><input type="text"
        /></el-col>
      </el-row>
      <el-row>
        <el-col :span="6"
          ><span class="color">收款方</span><input type="text"
        /></el-col>
        <el-col :span="6"></el-col>
        <el-col :span="6"></el-col>
        <el-col :span="6"></el-col>
      </el-row>
    </el-card>
  </div>
</template>

<script>
export default {
  props: {
    infoList: {
      type: Object,
      required: true,
    },
  },
  data() {
    return {
      infoForm: {
        address: "",
        auditName: "",
        companyClassify: "",
        companyNature: "",
        companyScale: "",
        correspondOrgName: "",
        country: "",
        createBy: "",
        createOrgName: "",
        createTime: "",
        deptName: "",
        forbidStatus: "",
        foundDate: "",
        groupName: "",
        groupNumber: "",
        id: "",
        language: "",
        legalPerson: "",
        name: "",
        number: "",
        provincial: "",
        regNumber: "",
        registerAddress: "",
        registerCode: "",
        registerFund: 0,
        shortName: "",
        socialCreCode: "",
        staffName: "",
        supplierClassify: "",
        supplierGrade: "",
        supplyClassify: "",
        syncTime: "",
        tendPermit: "",
        trade: "",
        updateBy: "",
        updateTime: "",
        useOrgId: "",
        useOrgName: "",
        useOrgNumber: "",
        webSite: "",
        zip: "",
      },
    };
  },
  created() {
    this.infoForm = this.infoList;
  },
  methods: {
    goBack() {
      console.log(this.$parent);
      this.$parent.isShow = true;
    },
  },
};
</script>

<style lang="scss" scoped>
.baseWidth {
  width: 46%;
}
.inputDate {
  width: 41%;
}
.selectStyle2 {
  width: 41%;
}
.selectStyle {
  width: 31%;
}

.textareaStyle {
  vertical-align: text-top;
  resize: none;
  width: 31%;
  height: 100px;
}
.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-6 {
  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>